XTab's Blog

Ged Mead's Blog at vbCity

This blog hosted by:
http://blogs.vbcity.com      
  Home :: Syndication  :: Login

AugSeptember 2007Oct
SMTWTFS
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456

Archives

Topics

Ramblings

VB.NET

Sunday, September 09, 2007 #

 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:

Code Copy
<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 &gt;
   </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:

Code Copy
  <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.

Code Copy
    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.

posted @ 5:57 PM | Feedback (0)