Adding scrollviewr to ListBox

Question

I'm struggling with my XAML! I have 3 rows, and they don't really change height on the page, other than the middle row. The middle row has a ListBox.

Depending on the size of the screen I would like the 2nd row's height to get bigger as items are added to the ListBox unless it pushes the 3rd row out of the screen. In this case, I'd like the ListBox to show a Scrollbar. I'm not sure how I can achieve this.

My research shows for Height we have Auto and * - the Auto will size based upon the control, and the * will fill the entire gap. I can't see how either of these fit what I need really...

The following is code from a UserControl. This UserControl is rendered in the parents TabControl.

My effort is

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

         <StackPanel Grid.Row="0">
               <TextBlock Text="[?] Source directory" />
         </StackPanel>

        <ListView ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding Folders}"  Grid.Row="1" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        //data template code
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListView>

            <StackPanel Grid.Row="2">
                    <Button Content="Save" />
            </StackPanel>

     </Grid>

Edit

If I set a height on the grid, it works, but, setting a fixed height is not an option as it won't scale for any resolution.

codeproject.com/Articles/30904/WPF-Layouts-A-Visual-Quick-Start — Fede
– Fede, Commented Sep 24, 2014 at 17:12
So do you want those two StackPanels docked to the top and bottom, while allowing the ListView to take up the entire middle portion of the screen? — estebro
– estebro, Commented Sep 24, 2014 at 17:12
You're missing a part somewhere I think, you end your Grid right after your StackPanel at the top, so those RowDefinitions aren't valid for where your ListView sits. — Chris W.
– Chris W., Commented Sep 24, 2014 at 17:58

123 456 789 0 · Accepted Answer · 2014-09-24 17:31:16Z

1

Scrollbar won't show up because it doesn't know the Height of the parent which is the Grid and because the RowDefinitions are defined as Auto and *.

If you want the Scrollbar to show up you have to explicitly set a height in the Grid

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

     <StackPanel Grid.Row="0">
           <TextBlock Text="[?] Source directory" />
     </StackPanel>

    <ListView ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding Folders}"  Grid.Row="1" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    //data template code
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListView>

    <StackPanel Grid.Row="2">
        <Button Content="Save" />
     </StackPanel>

 </Grid>

answered Sep 24, 2014 at 17:31

123 456 789 0

10.8k4 gold badges46 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MyDaftQuestions Over a year ago

Whilst the code you provide works, the problem is, it needs to scale for different screen resolutions. Whilst a height of 700 is fine for 1024*768, it's not if some one had 800*600, nor if some one has a much higher resolution. Is there really no way to make this dynamic?

123 456 789 0 Over a year ago

@MyDaftQuestions If you want it to scale for different resolutions then you would have to compute how much height you want the Grid to have and set it. You can use a create an attach property and set the computed height value. Alternatively, you can try using ViewBox inside but I forgot if it works.

estebro · Accepted Answer · 2014-09-24 17:38:09Z

0

Alternatively,

You could use a DockPanel layout with its attribute LastChildFill=True. You would then need to also add the attribute DockPanel.Dock=[LOCATION] to each of your elements (StackPanels and ListView). Since you want the ListView to take up the remaining space, just make sure to have that as the last child inside your <DockPanel>.

answered Sep 24, 2014 at 17:38

estebro

1,03710 silver badges21 bronze badges

5 Comments

MyDaftQuestions Over a year ago

Interesting, let me try it

estebro Over a year ago

Sounds good. Just tag me in your comments if you need some help.

MyDaftQuestions Over a year ago

Sorry, this doesn't work. I've tried. The only way to get it to work is, as per III post, is to set a height for the control. The problem is, this means it won't scale with different resolutions

estebro Over a year ago

@MyDaftQuestions Did you get rid of your grid? And how are you using this where you don't know the height?

MyDaftQuestions Over a year ago

It's a UserControl, shown in a TabControl. Yes, I totally removed the Grid

Collectives™ on Stack Overflow

Adding scrollviewr to ListBox

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related