WPF XAML ListView with ScrollBars

Question

I have a ListView which is showing both scroll bars. To achieve that, I places my ListView within a Border located in a Grid like below:

<Window ...
    MinWidth="600" MinHeight="500" Width="800" Height="500"
    Topmost="True"
    WindowStartupLocation="CenterScreen" 
    SizeToContent="Height" WindowStyle="None">

    <Window.Resources>
        <ResourceDictionary>
            ...
        </ResourceDictionary>
    </Window.Resources>

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

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

        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="32"/>
                <RowDefinition Height="370"/>  <-- THIS IS HARDCODED TO 370 BUT I NEED IT TO BE RESIZABLE
            </Grid.RowDefinitions>

            <Grid Margin="5,0,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="4"/>
                    <ColumnDefinition Width="346*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding MyName}" Grid.Column="1"
                       Style="{StaticResource MyNameStyle}" Margin="0,5,0,5" />

            </Grid>

            <Border BorderBrush="{StaticResource MyBrush}" Grid.Row="1" Grid.Column="0" >
                <ListView
                    x:Name="lstMyListView" 
                    Margin="0,0,0,0"
                    BorderBrush="Transparent"
                    ItemsSource="{Binding MyItems}" 
                    SelectedIndex="0"
                    ScrollViewer.CanContentScroll="True"
                    ScrollViewer.VerticalScrollBarVisibility="Auto">
                  ...
                  ...
                </ListView>
              ...
              ...
            </Border>
            ...
            ...
        </Grid>
    </Grid>
</Window>

This is all in a form that is resizable. Therefore, the ListView should also resize but it should do that only when user resizes the form. The problem with my hard coded value above is obvious, the ListView will not resize but stay at constant height=370.

I know I can set this to 370* but in that case, my List will resize to fit all items. I want to limit this so that resizing only occurs when user resizes the form. So, ListView should show scroll bars if there are more items and as the user resizes form, that scroll bar should go away if form is resized to height that can accommodate all items in ListView.

UPDATE: Instead of hard coding the height to 370 above, I have tried setting the height to , Auto, and 370. All of these would expand the ListView (and therefore form, too) to accommodate all items in the ListView.

UPDATE 2: Updated XAML to show whole tree structure.

UPDATE 3: As per Rachel's suggestion, set hardcoded 370 to "*" in commented line above in XAML and that produces form resized so that the ListView fits all items in it. I added screenshot showing the form as it opens and a screenshot showing how it should look like when it opens. As you can see, it resizes hightwise to accomodate all itesm.

What I need is that form and ListView stay in their set size and resize only if user resizes the form.

Change 370 to * and maybe just use the 370 as the MinHeight. — Chris W.
I am going through it. And note this: although the Grid is designed to be invisible, you can set the Grid.ShowGridLines property to true for debugging convenience which helps to visualize the column width and rows height and help you understand how the Grid has subdivided itself into smaller regions. — Topman
I copy/pasted your XAML into a new application, and it seems to be working fine if you use * instead of 370. Can you try it once more and show us a screenshot of the result? <RowDefinition Height="*"/> ends up looking like this for me. If this is not what you are looking for, perhaps I am misunderstanding the question? — Rachel
@dbnex14 I sorry, I still don't think I understand what the problem is. Are you saying the form loads as too large of a size because of the ListView? If that's the case, remove the SizeToContent="Height" from the <Window> tag since it is making the window equal to whatever height the content is, which includes the fully sized ListView. — Rachel

Rachel Rachel · Accepted Answer · 2016-05-27T13:38:45

If I understand your question correctly, you are saying the form loads as too large of a size because the ListView is growing to it's full height. If that's the case, remove the SizeToContent="Height" from the <Window> tag since it is making the window's initial height be equal to whatever height the content is, which includes the fully sized ListView.

WPF XAML ListView with ScrollBars

3 Answers