Flexible Panel Layouts

The sheer number of panel layout combinations can be overwhelming to WPF newcomers, I know it was for me! Having been used to traditional Windows Forms and fairly simple UI panel layouts, WPF really removes all the restrictions on what can be done, but takes a little getting used to.

While experimenting with simple layouts I came across a nice way to use a ScrollViewer control inside of an Expander. This is typical of my experiences of WPF thus far, in that the WPF layout is so flexible in what you can do some things are not immediately obvious until you start playing around with different combinations. In this case it was when I had three expanders inside a parent expander, as show below.

Now, if users behave themselves and don’t resize the main Window then every thing is fine. But if you decrease the height of the Window then, when all three child Expander controls are expanded, some controls will disappear of the screen!

Hmm, not really desirable. So, a nice remedy that will keep users happy is wrap the child Expander controls inside of a ScrollViewer control. When the user resizes the Window that would normally obscure other controls, the Window displays a scroll bar so the missing controls can be bought back into view again. All the code for thr three child Expanders is wrapped inside a StackPanel control, so all we need to do is to place this code inside a ScrollViewer container. The full code for the parent Expander is shown below.

<ScrollViewer VerticalScrollBarVisibility="Auto">
   <StackPanel Width="230">
      <Border Margin="10" Background="#FFE6E6E6" CornerRadius="8" Padding="5" BorderBrush="#FF4F4F4F" BorderThickness="1">
         <TextBlock Text="Expand/collapse the sections below to view available options." TextWrapping="Wrap" Height="31.92"/>
      </Border>
      <Expander x:Name="expander1" Margin="8,8,0,0" RenderTransformOrigin="0.5,0.5">
         <Expander.Header>
    	   <TextBlock FontSize="13.333" FontStyle="Italic" Foreground="#FFEA3939"><Run FontSize="14.667" Text="Expander #1"/></TextBlock>
    	 </Expander.Header>
    	 <Border Width="190" BorderThickness="0,0,0,0.5" BorderBrush="#FF949494">
    	    <StackPanel Height="85.718">
    	       <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
               <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
            </StackPanel>
         </Border>
      </Expander>
      <Expander x:Name="expander2" Margin="8,8,0,0" Background="Transparent" RenderTransformOrigin="0.5,0.5">
         <Expander.Header>
    	    <TextBlock Text="Expander #2" Foreground="#FF55C724" FontStyle="Italic" FontSize="14.667"/>
    	 </Expander.Header>
    	 <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Width="100">
    	    <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
    	    <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
    	 </StackPanel>
      </Expander>
      <Expander x:Name="expander3" Margin="8,8,0,0" Background="Transparent" RenderTransformOrigin="0.5,0.5">
         <Expander.Header>
    	    <TextBlock Text="Expander #3" Foreground="#FF2A4BE0" FontStyle="Italic" FontSize="14.667"/>
    	 </Expander.Header>
    	 <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Width="100">
    	    <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
    	    <Button Content="Button" Margin="22.286,10,26.999,10" Height="22.859" HorizontalContentAlignment="Center" VerticalContentAlignment="Top"/>
         </StackPanel>
      </Expander>
   </StackPanel>
</ScrollViewer>

Now when the Window height is reduced, a scroll bar automatically appears to allow the parent Expanders content to be viewed by dragging the scroll bar up and down.

The ScrollViewer attribute VerticalScrollBarVisibility="Auto" describes how the vertical scroll bar should be rendered. If set to just “visible” then the scroll bar will always be visible even when it isn’t needed (in which case it appears, but is disabled). Setting it to “Auto” means that it is only displayed when required, as shown above.

Advertisement