locked
Keep control in bottom after scaling RRS feed

  • Question

  • My page structre is on top there is a panel of height 30 and on bottom also there is a panel with height 30 . And a scrollviewer in the middle
     I always want to keep the scrollviewer in the center. But now what is happening is when i scale down the scrollviewer contents the bottom frame also coming to top LIKE IN THE IMAGE 

     the code i used is

    <Grid>
            <ScrollViewer  Margin="0,35,5,35" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                <StackPanel Orientation="Horizontal"  HorizontalAlignment="Center" VerticalAlignment="Center">
                  i want to show the contents of stackpanel always at center. Even if i scaletransform the panel area
                </StackPanel>
            </ScrollViewer>
            <Grid VerticalAlignment="Top"  Background="LightGray" Height="30">
               
            </Grid>
            <Grid VerticalAlignment="Bottom" Background="LightGray" Height="30">            
               
            </Grid>
    </Grid>

    How to keep that bottom panel always on bottom


    Thanks ***Share Knowledge to gain more***


    • Edited by FullPgmr Thursday, January 31, 2013 10:08 AM ADD IMAGE
    Thursday, January 31, 2013 10:07 AM

Answers

  • Hi,

    as your new code is correct, your problem lies somewhere else. The code

      <DockPanel VerticalAlignment="Stretch">
        <Border DockPanel.Dock="Top" Background="Red" Height="30" />
        <Border DockPanel.Dock="Bottom" Background="Green" Height="30" />
        <Border Background="LightBlue" />
      </DockPanel>

    results in

    Setting the Height of the blue Border to "30" (simulating your scaling) yields

    So it looks like you're scaling the whole outer grid.

    Cheers
    Jürgen

    NB: You don't need to specify "LastChildFill="True", as it is the default. That's why I left it out in my post

    • Proposed as answer by Christopher84 Monday, February 4, 2013 4:23 PM
    • Marked as answer by FullPgmr Tuesday, February 5, 2013 4:38 AM
    Friday, February 1, 2013 7:22 AM

All replies

  • Hi,

    either keep your (outermost) Grid and add three RowDefinitions to it

    <Grid>
       <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition />
          <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>
    </Grid>

    Specify for your contentparts the row to use by adding Grid.Row="0" to their definition.

    Alternatively try a DockPanel. But then you have to change the "order of appearance" of your contentparts (the ScrollViewer must be the last to be inserted). On the content grids, specify DockPanel.Dock="Top"/"Bottom".

    In both cases the margin of the ScrollViewer can be omitted (at least its top and bottom definition).

    Hope this helps.

    Cheers
    Jürgen

    Thursday, January 31, 2013 2:14 PM
  • You could also use a DockPanel isntead of a Grid. Note that by default "LastChildFills" is set to true, so the last element will always take up "as much palce as possible".

    This makes creating "Windows style" applications easy (One menu bar at top, one StatusBar at the bottom, perhaps some menues left or right and the final piece taking as much space as possible.

    Thursday, January 31, 2013 7:37 PM
  • I tried dockpanel way but still the same problem . My code now is 

     <DockPanel LastChildFill="True">
          
               
            <Grid DockPanel.Dock="Top" Background="LightGray" Height="30">
               
            </Grid>
            <Grid DockPanel.Dock="Bottom"  Background="LightGray" Height="30">            
              
            </Grid>
            <ScrollViewer   HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Name="scroler">
              
            </ScrollViewer>
        </DockPanel>
     <DockPanel LastChildFill="True">
          
               
            <Grid DockPanel.Dock="Top" Background="LightGray" Height="30">
               
            </Grid>
            <Grid DockPanel.Dock="Bottom"  Background="LightGray" Height="30">            
              
            </Grid>
            <ScrollViewer   HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Name="scroler">
              
            </ScrollViewer>
        </DockPanel>

    and output screen in 100% zoom size (as expected)

    But after zoom in the screen is like this (I want the bottom grid should be in the bottom of the screen )


    Thanks ***Share Knowledge to gain more***

    Friday, February 1, 2013 5:20 AM
  • Hi,

    as your new code is correct, your problem lies somewhere else. The code

      <DockPanel VerticalAlignment="Stretch">
        <Border DockPanel.Dock="Top" Background="Red" Height="30" />
        <Border DockPanel.Dock="Bottom" Background="Green" Height="30" />
        <Border Background="LightBlue" />
      </DockPanel>

    results in

    Setting the Height of the blue Border to "30" (simulating your scaling) yields

    So it looks like you're scaling the whole outer grid.

    Cheers
    Jürgen

    NB: You don't need to specify "LastChildFill="True", as it is the default. That's why I left it out in my post

    • Proposed as answer by Christopher84 Monday, February 4, 2013 4:23 PM
    • Marked as answer by FullPgmr Tuesday, February 5, 2013 4:38 AM
    Friday, February 1, 2013 7:22 AM
  • If you put a Container (like Grid) into another container (like DockPanel) it is important to not manually set the sizes of the inner containers. Container's calculate thier sizes based on the size of thier Child-elements. Be they buttons, UserControlls or another container.

    If you want a minimum size, you should use MinWidth and MinHeight on the inner containers. All WPF UI elements have it (since they inherit it from FrameworkElement).

    Monday, February 4, 2013 4:29 PM