In an earlier blog item we looked at a DockPanel in which the Button and the TextBlock were muscled out of the view by an Image that grabbed all the available Window space. The code in that example was:
<DockPanel >
<!-- First Item : A large Image -->
<Image Source="Images/Pictures 106.jpg" DockPanel.Dock="Top" />
<!-- Second item : Button in right hand bottom corner -->
<Button Margin="4" Padding="4" Background="Green" FontSize="13" DockPanel.Dock="Right"
Foreground="White" MaxHeight="60" MaxWidth="199" HorizontalAlignment="Right">
Next Image >
</Button>
<!-- Third Item : TextBlock with Description -->
<TextBlock Margin="7" FontFamily="Verdana" FontSize="15" TextWrapping="Wrap" DockPanel.Dock ="Left" >
PortPatrick, Dumfries and Galloway, South West Scotland May 2006
</TextBlock>
</DockPanel>
There are several ways of improving on this, in addition to the suggestion in that earlier blog item of rearranging the order in which the controls are created. One very simple one is to place all the above content in a ScrollViewer. To do this, simply wrap the above code inside its opening and closing tags:
<ScrollViewer >
<DockPanel >
<!-- Original code from above -->
</DockPanel>
</ScrollViewer>
Now, when the display is resized to the point where all the content can't be displayed vertically, the ScrollBar can be used to access hidden items.


Note that the Image is constrained to a properly proportioned display of its content.
So, what about horizontal scrollbars? Are they available to carry out the same function as the vertical one? The answer is yes, but in fact inserting a horizontal scrollbar in this particular layout won't achieve the effect you want. The better alternative for the time being is to set a MinWidth value on the Window itself; this will ensure that all the text will remain readable, the button will remain accessible, and the image will stay visible and proportionate.
Title="Scrolling" Height="300" Width="300" MinWidth="240">
This will produce the following display when the window is resized down to its absolute allowed minimum width:

which is a user-friendly display. And if the user continues to decrease the height of the window, then of course that is dealt with by the availability of the ScrollBar, which the user can use to scroll up or down the Window as needed.

But there is more, so much more, layout control and constraint available to you yet - as we will see in future blog items.