CODEWITHSUNDEEP
c#.netwpfxaml
Ahmed A.Hamid
Ahmed A.Hamid

Reputation: 268

How do I have an ItemsControl fit its contents and not expand vertically without regard to its sibling elements?

I am working on a WPF application with layout similar to this defined in the following example XAML:

<Window>
    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Border Grid.Column="0" Background="AliceBlue" />

        <!-- Main Panel -->
        <Grid Grid.Column="1" 
              Background="LightPink">

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

            <!-- Row 0: some User Control -->
            <Grid Grid.Row="0" MinHeight="100" />

            <!-- Row 1: some label -->
            <Label Grid.Row="1" Content="Example text" />

            <!-- Row 2: another User Control -->
            <StackPanel Grid.Row="2">

                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <ItemsControl>
                        <ItemsControl.Items>
                            <ContentPresenter Content="Item 1" />
                            <ContentPresenter Content="Item 2" />
                            <ContentPresenter Content="Item 3" />
                            <ContentPresenter Content="Item 4" />
                            <ContentPresenter Content="Item 5" />
                            <ContentPresenter Content="Item 6" />
                        </ItemsControl.Items>
                    </ItemsControl>
                </ScrollViewer>

                <Button Content="Open" />
            </StackPanel>

        </Grid>
        <Border Grid.Column="2" Background="AliceBlue" />

    </Grid>
</Window>

Visually it's intended to look like this: Application layout

Simply put, the layout root is a grid that contains 3 columns; the left and right columns are just spacers and the middle column contains 2 User Controls (represented by 2 grids in my above example).

What I am trying to achieve is as follows:

  1. If there is enough vertical space, I want the ItemsControl to display no scroll-bar and the button to appear right below the items (not at the bottom of its containing panel).

  2. If there isn't enough vertical space, I want the ItemsControl to display a scroll-bar and not expand vertically effectively kicking the button out of view.

A visual example of the desired layout is as in the screenshot below: Desired layout

Everything I have tried seems to either:

  1. Keep the Open button docked to the bottom when there is plenty of space, or
  2. Kick the Open button out of view when there is insufficient space due to the ItemsControl expanding vertically.

Is there any way I can achieve the desired layout (whether it's in XAML or code)?

Upvotes: 0

Views: 335

Answers (1)

Clemens
Clemens

Reputation: 128013

Replace the StackPanel by a top-aligned Grid:

<!-- Row 2: another User Control -->
<Grid VerticalAlignment="Top" Grid.Row="2">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <ItemsControl>
            ...
        </ItemsControl>
    </ScrollViewer>

    <Button Grid.Row="1" HorizontalAlignment="Left" Content="Open" />
</Grid>

Upvotes: 1

Related Questions