XTab's Blog

Ged Mead's Blog at vbCity

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

AprMay 2008Jun
SMTWTFS
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

Archives

Topics

Ramblings

VB.NET

 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 on Sunday, September 09, 2007 5:57 PM

Feedback

No comments posted yet.

Post Feedback

Title:
Name:
Url:
Comments: 
Protected by Clearscreen.SharpHIPEnter the code you see: