Keeping WPF grids from getting out of parent bounds

Question

In my UI, I have a big grid with two columns and one row. in the right column, I have a grid with three rows where in the top row I have a user control, and in the two bottom rows I have two Expander objects, each containing an ItemsControl with a list that gets populated in runtime. Sometimes, that list gets really long and "spills" from the screen towards the bottom.

What I want to do is to allow the user to see both expanders, be able to expand or collapse them while keeping them both in sight. I tried wrapping them in WrapPanels or StackPanel but to no avail.

Here's some code to help explain my problem:

<Grid Grid.Row="1" x:Name="grid1">
<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
<Expander Grid.Row="0" Header="Expander 1" x:Name="expander1" FontSize="14" IsExpanded="True">
    <Expander.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC4C4C4" Offset="0" />
            <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush>
    </Expander.Background>
    <ContentPresenter Content="{Binding ViewModel.OpenAlerts, ElementName=m_viewControl}" ClipToBounds="True"/>
</Expander>
<Expander Grid.Row="1" x:Name="expander2" Header="Expander 2" FontSize="14" IsExpanded="True">
    <Expander.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC4C4C4" Offset="0" />
            <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush>
    </Expander.Background>
    <ContentPresenter Content="{Binding ViewModel.ClosedAlerts, ElementName=m_viewControl}" ClipToBounds="True"/>
</Expander>
</Grid>

Any assistance or tips will be highly appreciated!

Thanks, John.

score 1 · Answer 1 · answered Jun 04 '12 at 07:47

1

It's really not clear what kind of UI elements you have in the Expanders, but a ListBox for example works just fine, it will show scrollbars when the number of items is larger that the allocated space in the Grid row.

But you can also wrap you list of items in a StackPanel inside a ScrollViewer, which also works fine:

<Expander Grid.Row="0" Header="Expander 1" x:Name="expander1" FontSize="14" IsExpanded="True">
  <Expander.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#FFC4C4C4" Offset="0" />
      <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>
  </Expander.Background>
  <ScrollViewer>
    <StackPanel>
      <TextBlock>Test</TextBlock>
      <TextBlock>Test</TextBlock>
      <TextBlock>Test</TextBlock>
      <!-- etc.. -->
      <!-- etc.. -->
    </StackPanel>
  </ScrollViewer>
</Expander>

That should also work for you.

answered Jun 04 '12 at 07:47

Magnus Johansson

28,010
19
106
164

Thank you Magnus for your input, however this doesn't seem to be working. I might have been unclear - I want the content of the grid (Currently it's a `ContentPresenter`) to be visible. I tried using the `ClipToBounds="True"` dependency property but this doesn't seem to be working. – Jonathan Perry Jun 04 '12 at 10:03
I'm sorry, I must be thickheaded this Monday, but I don't understand. Can you please update your sample XAML with something that actually depicts your problem? You indicated that the (size of the) list of items is the culprit, and to the best of my understanding my example works fine regardless of the size. Both Expanders are visible regardless of the list size. So please at least hard code some content that showcase your issue. – Magnus Johansson Jun 04 '12 at 10:08
I updated the code and removed the comments with the actual content I have now in my `Expander`s. Thanks again for your help! – Jonathan Perry Jun 04 '12 at 10:38

Keeping WPF grids from getting out of parent bounds

1 Answers1