Vertical scroll bar is not viewing inside a grid for a list view in WPF

Question

I have a design for my user control. The control contains many rows and columns and inside it has sub-grids and rows and columns. One of the inner most row contains a ListView whose Horizontal and Vertical Scroll bar set to Auto.

I am able to view Horizontal Scroll bar for listview as well as the outer most grid, but I am unable to view Vertical Scroll bar for listview, but for the outer grid is working fine.

Here is the xaml for the same.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center" Margin="8,0,0,0">
        <Image Source="pack://application:,,,/EMC.DD.CommonFrameworkLayer;component/Images/Items1.png" Width="50" Height="50"></Image>
        <TextBlock Text="Items" VerticalAlignment="Center" Style="{StaticResource  DashboardTextBlockStyle}" Margin="8,0,0,0" ></TextBlock>
    </StackPanel>

    <StackPanel Orientation="Horizontal" Grid.Row="1" Background="#eaeaea" Margin="8,0,0,0">
        <Image Source="pack://application:,,,/EMC.DD.CommonFrameworkLayer;component/Images/HomeDashBoard.png"></Image>
        <TextBlock Text="DashBoard" Style="{StaticResource HomeDashBoardTextBlockStyle}" VerticalAlignment="Center" Margin="8,0,0,0"></TextBlock>
        <TextBlock Text=">" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource HomeDashBoardTextBlockStyle}" FontWeight="Medium"></TextBlock>
        <TextBlock Text="Items" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource HomeDashBoardTextBlockStyle}" FontWeight="Medium"></TextBlock>
        <TextBlock x:Name="ItemsTextBlock" x:FieldModifier="private" Margin="5,0,0,0" VerticalAlignment="Center"></TextBlock>
    </StackPanel>

    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="2" Grid.Column="0">

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center" Margin="8,10,0,10">
                <TextBox x:Name="ItemTextBox" MinWidth="160" Height="25">
                </TextBox>
            </StackPanel>

            <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" Margin="8,2,0,10">
                <ComboBox x:Name="CategoryComboBox" DisplayMemberPath="CategoryName" SelectedValue="CategoryID" SelectedValuePath="CategoryName" 
                  Margin="2,2,0,3" MinHeight="27" MinWidth="250" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Left" Grid.ColumnSpan="2" SelectedIndex="-1"/>
                <Button Style="{StaticResource CRUDButtonStyle}" Content="Search" Margin="5,0,0,0" Click="SearchButton_Click"></Button>

                <StackPanel Orientation="Horizontal" Margin="150,0,0,0">
                    <Button Style="{StaticResource CRUDButtonStyle}" Content="New Item" Click="ItemButton_Click" ></Button>
                    <Button Style="{StaticResource CRUDButtonStyle}" Content="Delete Item" Margin="5,0,0,0" Click="DeleteButton_Click"></Button>
                    <Button Style="{StaticResource CRUDButtonStyle}" Content="Delete All" Margin="2,0,0,0" Click="DeleteAllItem_Click"></Button>
                </StackPanel>
            </StackPanel>

            <Grid Grid.Row="2" Margin="8,0,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="900"/>
                    <ColumnDefinition Width="Auto" MinWidth="200"/>
                </Grid.ColumnDefinitions>

                <Grid Grid.Column="0">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="10" />
                    </Grid.RowDefinitions>

                    <Border Grid.Row="0" Style="{StaticResource DefaultBorderStyle}">
                        <StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Top" Margin="0,0,0,0">
                            <Image Source="pack://application:,,,/EMC.DD.CommonFrameworkLayer;component/Images/Items1.png"></Image>
                            <TextBlock Text="List Of Items" Margin="5,0,0,0" VerticalAlignment="Center" 
                             Style="{StaticResource HomeDashBoardTextBlockStyle}" FontWeight="Normal"/>
                        </StackPanel>
                    </Border>

                    <ListView x:Name="ItemsListView" x:FieldModifier="private" Grid.Row="1" MouseDown="ListViewItem_PreviewMouseDown" 
                      SelectionChanged="ListView_SelectionChanged" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
                        <ListView.Resources>
                            <Style TargetType="{x:Type GridViewColumnHeader}" x:Key="MyHeaderStyle">
                                <Setter Property="FontFamily"  Value="Segoe UI Light"/>
                                <Setter Property="FontWeight" Value="DemiBold"></Setter>
                                <Setter Property="Height" Value="30"></Setter>
                            </Style>

                            <local:IntToBoolConverter x:Key="IntBoolKey"></local:IntToBoolConverter>

                            <Style x:Key="TextStyle" TargetType="{x:Type TextBlock}">
                                <EventSetter Event="Hyperlink.Click" Handler="EditClicked" />
                            </Style>

                            <local:BackgroundConverter x:Key="BackgroundKey"/>

                            <Style x:Key="columnHeaderContianerStyle" TargetType="ListViewItem">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <Binding RelativeSource="{RelativeSource Self}" Converter="{StaticResource BackgroundKey}"/>
                                    </Setter.Value>
                                </Setter>
                                <!--<EventSetter Event="PreviewMouseDown" Handler="ListViewItem_PreviewMouseDown"></EventSetter>-->
                            </Style>

                            <Style x:Key="myHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="False">
                                        <Setter Property="Background" Value="#1570a6"/>
                                        <Setter Property="Foreground" Value="#FFFFFF"/>
                                    </Trigger>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Foreground" Value="#000000"/>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>

                        </ListView.Resources>
                        <ListView.ItemContainerStyle>
                            <Style TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource columnHeaderContianerStyle}">
                                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                                <Style.Triggers>
                                    <Trigger Property="IsKeyboardFocusWithin" Value="True">
                                        <Setter Property="IsSelected" Value="True" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </ListView.ItemContainerStyle>
                        <ListView.View>
                            <GridView AllowsColumnReorder="true" ColumnHeaderContainerStyle="{StaticResource MyHeaderStyle}">
                                <GridViewColumn Width="50" HeaderContainerStyle="{StaticResource myHeaderStyle}">
                                    <GridViewColumn.CellTemplate>
                                        <DataTemplate>
                                            <CheckBox Width ="20" Height="20" IsChecked="{Binding Path=IsActive,Converter={StaticResource IntBoolKey}}"></CheckBox>
                                        </DataTemplate>
                                    </GridViewColumn.CellTemplate>
                                </GridViewColumn>
                                <GridViewColumn Header="Item ID" Width="110"  DisplayMemberBinding="{Binding Path=ItemID,Mode=OneWay}" 
                                 HeaderContainerStyle="{StaticResource myHeaderStyle}"/>
                                <GridViewColumn Header="Item Name" Width="200" DisplayMemberBinding="{Binding Path=ItemName,Mode=OneWay}" 
                                 HeaderContainerStyle="{StaticResource myHeaderStyle}"/>
                                <GridViewColumn Header="Item Price" Width="200" DisplayMemberBinding="{Binding Path=Price,Mode=OneWay}" 
                                 HeaderContainerStyle="{StaticResource myHeaderStyle}" >
                                </GridViewColumn>
                                <GridViewColumn Header="Category" Width="200" DisplayMemberBinding="{Binding Path=Category.CategoryName,Mode=OneWay}" 
                                 HeaderContainerStyle="{StaticResource myHeaderStyle}"/>
                                <GridViewColumn Header="Item Image" Width="200" HeaderContainerStyle="{StaticResource myHeaderStyle}">
                                    <GridViewColumn.CellTemplate>
                                        <DataTemplate>
                                            <Image Width="100" Height="50" VerticalAlignment="Center" HorizontalAlignment="Center" 
                                                 Source="{Binding Path=ItemImagePath,Mode=OneWay}"></Image>
                                        </DataTemplate>
                                    </GridViewColumn.CellTemplate>
                                </GridViewColumn>
                                <GridViewColumn Width="100" HeaderContainerStyle="{StaticResource myHeaderStyle}">
                                    <GridViewColumn.CellTemplate>
                                        <DataTemplate>
                                            <TextBlock  Name="urlToContent" MinWidth="150" Width="Auto" Style="{StaticResource TextStyle}">
                                              <Hyperlink NavigateUri="{Binding Path=URL}" Name="hlkURL">
                                                <TextBlock Text="Edit" HorizontalAlignment="Center"/>  
                                             </Hyperlink>
                                         </TextBlock>
                                        </DataTemplate>
                                    </GridViewColumn.CellTemplate>
                                </GridViewColumn>
                            </GridView>
                        </ListView.View>
                    </ListView>

                </Grid>

                <Grid Grid.Column="1">

                    <GroupBox x:Name="ItemDetails" Header="Item Details" FontFamily="Segoe UI" HorizontalAlignment="Center" Margin="2,-10,0,0" 
                      VerticalAlignment="Top" Height="Auto" Width="Auto" Grid.Row="0">
                        <Grid Margin="2,5,0,0" HorizontalAlignment="Center">

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <Grid Grid.Row="0" HorizontalAlignment="Center">

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                </Grid.RowDefinitions>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <TextBlock Text="Item Name" FontFamily="Segoe UI" VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1"
                         Margin="0,0,0,5"/>
                                <TextBlock x:Name="ItemNameTextBlock"  Text="{Binding Path=ItemName,Mode=OneWay}" FontFamily="Segoe UI" FontWeight="DemiBold" VerticalAlignment="Top" 
                         HorizontalAlignment="Left" Grid.Row="0" Grid.Column="2" Margin="5,0,0,0"/>

                                <TextBlock Text="Category" FontFamily="Segoe UI" VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1"
                         Margin="0,0,0,5"></TextBlock>
                                <TextBlock x:Name="CategoryTextBlock" Text="{Binding Path=Category.CategoryName,Mode=OneWay}" FontFamily="Segoe UI" FontWeight="DemiBold" VerticalAlignment="Top"
                         HorizontalAlignment="Left" Grid.Row="1" Grid.Column="2" Margin="5,0,0,0"/>

                                <TextBlock Text="Item Quantity" FontFamily="Segoe UI" VerticalAlignment="Center" HorizontalAlignment="Right"  Grid.Row="2" Grid.Column="1"
                         Margin="0,0,0,5"></TextBlock>
                                <TextBlock x:Name="ItemQuantityTextBlock" Text="{Binding Path=ItemQuantity,Mode=OneWay}" FontFamily="Segoe UI" FontWeight="DemiBold" VerticalAlignment="Top"
                         HorizontalAlignment="Left" Grid.Row="2" Grid.Column="2" Margin="5,0,0,0"/>

                            </Grid>

                            <ListView x:Name="ItemIngredientsListView" Grid.Row="1" Margin="2,0,0,5" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                              ScrollViewer.VerticalScrollBarVisibility="Auto">
                                <ListView.Resources>
                                    <Style TargetType="{x:Type GridViewColumnHeader}" x:Key="MyHeaderStyle">
                                        <Setter Property="FontFamily"  Value="Segoe UI Light"/>
                                        <Setter Property="FontWeight" Value="DemiBold"></Setter>
                                        <Setter Property="Height" Value="30"></Setter>
                                    </Style>

                                    <Style x:Key="myHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="False">
                                                <Setter Property="Background" Value="#1570a6"/>
                                                <Setter Property="Foreground" Value="#FFFFFF"/>
                                            </Trigger>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Foreground" Value="#000000"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>

                                    <local:BackgroundConverter x:Key="BackgroundKey"/>

                                    <Style x:Key="columnHeaderContianerStyle" TargetType="ListViewItem">
                                        <Setter Property="Background">
                                            <Setter.Value>
                                                <Binding RelativeSource="{RelativeSource Self}" Converter="{StaticResource BackgroundKey}"/>
                                            </Setter.Value>
                                        </Setter>
                                        <!--<EventSetter Event="PreviewMouseDown" Handler="ListViewItem_PreviewMouseDown"></EventSetter>-->
                                    </Style>

                                </ListView.Resources>
                                <ListView.ItemContainerStyle>
                                    <Style TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource columnHeaderContianerStyle}">
                                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                                        <Style.Triggers>
                                            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                                                <Setter Property="IsSelected" Value="True" />
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </ListView.ItemContainerStyle>
                                <ListView.View>
                                    <GridView AllowsColumnReorder="true" ColumnHeaderContainerStyle="{StaticResource MyHeaderStyle}">
                                        <GridViewColumn Header="Ingredient ID" Width="80" DisplayMemberBinding="{Binding Path=ItemIngredientID,Mode=OneWay}" 
                                          HeaderContainerStyle="{StaticResource myHeaderStyle}"/>
                                        <GridViewColumn Header="Ingredient" Width="200" DisplayMemberBinding="{Binding Path=IngredientName,Mode=OneWay}" 
                                          HeaderContainerStyle="{StaticResource myHeaderStyle}"/>
                                    </GridView>
                                </ListView.View>
                            </ListView>
                        </Grid>
                    </GroupBox>

                </Grid>
            </Grid>

        </Grid>
    </ScrollViewer>
</Grid>

May be I am posting huge xaml, because I am not sure where exactly went wrong in the whole user control.

Some one, please look into my xaml and tell me where exactly do I need to change the rowHeight or some thing else.

Any help highly appreciated.

Answer 1

The ScrollViewer of WPF provides unlimited space to its child element - I think that is what hinders you to see the vertical scroll bar of your ListView . Let's analyze your situation:

1. The scroll viewer provides unlimited space to its child grid (let's call it A).
2. A is divided into three rows: the first two rows' height will be calculated according to the content they display ( <RowDefinition Height="Auto" /> ). The last row will take the remaining infinite space provided by the scroll viewer.
3. In this last row, another grid is placed (let's call it B) that has two columns and three rows. The second row takes the remaining space (still infinite) because its height is set to * .
4. In this very row, your list view is placed. This means that it has unlimited vertical space within the WPF layout system and has no need to show its vertical scroll bar.

A solution might be to limit the height of this row but provide a GridSplitter so that the user is able to change the height. Another solution as pointed out by @pushpraj (while I was writing this) is to limit the height of the list view.

If you have any further questions, please feel free to ask.