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.

Feune

Change 370 to * and maybe just use the 370 as the MinHeight. – Matchbox

@ChrisW. That is not working. I tried using 370*, *, and Auto already. All of these will expand the form and ListView to size that accommodate all items in the ListView. Much appreciated Chris – Feune

I may not be understanding your overall intent correctly then. 370* isn't valid, * just let's it consume the space provided, Auto takes just what it needs. – Matchbox

All I want is to have ListView take all space in the form. If there are more items it can accommodate, show vertical scrollbar. Otherwise don't show it. If user resizes the height of the form, the ListView should resize and show vertical scrollbar until it is resized to the point where all items are accommodated by the current height of the ListView. – Feune

Then having * on your RowDefinition and Auto on your scrollviewer should accomplish just that. I can only assume there's something else going on in your layout overall. Sorry amigo. – Matchbox

Could it be that all this is contained within another grid's cell with its RowHeight="*"? So, In my example above, there is one more grid container containing the grid and ListView I show above. – Feune

Hard to tell, if it's a large layout with multiple nested elements and parent/child relationships sometimes you just have to start at the top and work your way down to identify the culprit. – Matchbox

Hi, i am trying: If you remove the Width and Height property, it’s the same as setting the property to 1*. So you can remove it. ListView will consume all of the remaining space height-32(1st row height). Remove height and width of the ListView itself too. You should provide more xaml if this grid is contained in another another grid. – Shelton

@Mr.Top I have updated XAML to show whole tree structure. BTW, I dont have Height/Width set on ListView. The xaml is updated. Thanks, – Feune

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. – Shelton

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? – Nodababus

@Nodababus I tried it and posted screenshot. Much appreciated Rachel – Feune

@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. – Nodababus

@Nodababus Yes, that was the problem. But this is a comment and I cannot mark it as an answer. Can you post it as an answer so I can accept your answer. Much appreciated, that solved the issue. :) – Feune

@dbnex14 Ok, posted it as an answer :) – Nodababus

Answer 1

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.

Nodababus

Answer 2

By setting ScrollViewer.VerticalScrollBarVisibility="Visible" & MaxHeight="700" scroll bar will be visible MaxHeight to any value

Irwin

Answer 3

Hi I think i have understand you. So, i am trying:

So, you want to have your ListView at least a height of 370 and then only resizes if the window resizes (increment and decrement of window size).

Setting MinHeight of 2nd RowDefinition could help

<Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition MinHeight="370"/>  <!-- THIS IS HARDCODED....-->
        </Grid.RowDefinitions>
.....
</Grid>

Thank you.

Shelton

Sorry, that is not working. That just sets MinHeight. I updated my question with some screenshots to explain. – Feune

Your saying What I need is that form and ListView stay in their set size and resize only if user resizes the form. So, minheight should work, ListView will be only 370 and it's size will be increased when form size increases and vice versa. And when decreases, minimum height of ListView will be 370 (your set size). – Shelton

@MrTop Thanks but Rachel's answer resolves the issue. Much appreciated for the effort though. – Feune