1

I am developing a Windows 8.1 Application.

I have a SettingsFlyout (msdn link if you don't know what it is) The Content of the SettingsFlyout is a grid with a ListView and a Button

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="15*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <ListView>
             <!-- SOME CONTENT -->
     </ListView>
    <Button Grid.Row="1" Content="Add" />
</Grid>

As per the above grid arrangement, even if the ListView's content is huge the button will be displayed properly. This is because the ListView is allowed to take maximum of 15/16 space of the grid and the rest 1/6 will always be given to the button.

However if the ListView doesn't have any content or if the content is very less, now the ListView will be collapsed completely or will have a height far lesser than 15* of the Grid and hence the button will go and sit at the top, instead of sitting at the bottom 1* only.

I want the button to stick to the bottom of the page independent of the ListView's content. That is independent of whether the ListView consumes the entire space given by the Grid or not.

So I tried the following

<RowDefinition Height="930" />
<RowDefinition Height="*" />

I basically have fixed the height of the first row in the grid to 930 so the button is forced to go down. But this is causing a problem on tablets with lower form factor. 930 is too much and the button goes out of the display. So I am stuck.

I have also tried this 

<RowDefinition />
<RowDefinition Height="Auto" />

in the hope that the button will be fixed at the bottom and the rest will be given to the ListView.

Here's the image that shows the problem (You can't see the bottom border, trust me the bottom of the grid is way down than where the button is currently seen)

enter image description here

Can I achieve this without a code behind? I am flexible to use a different control/child if necessary. I would be very glad if someone can point me in the right direction. Thanks in Advance.

HelpMatters
  • 1,299
  • 1
  • 13
  • 32

2 Answers2

3

I'd suggest this layout:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <ScrollViewer>
         <!-- SOME CONTENT -->
    </ScrollViewer>
    <Button Grid.Row="1" Content="Add" />
</Grid>

You don't seem to need the StackPanel for any reason. Typically you'd rather have a StackPanel inside of a ScrollViewer rather than the other way around. A StackPanel will expand in the direction of its orientation regardless of the space available and it will expand by the space required to accomodate all its children.

Default RowDefinition height is *, so I skip that for the first row letting it expand to available space and the second row's height is set to auto to let its height be the desired height of the button so it stays at the bottom.

Also, set VerticalContentAlignment="Stretch" on the flyout.

Filip Skakun
  • 31,624
  • 6
  • 74
  • 100
  • I tried what you suggested above, but it still didn't work as expected. I have updated the question to include an image. – HelpMatters Aug 06 '14 at 18:36
  • What's outside of your main `Grid` quoted here? By default the `Grid` expands to available space unless you set `VerticalAlignment="Top"` or put it in another element like a `StackPanel`. I suspect that's where your problem is. – Filip Skakun Aug 06 '14 at 18:43
  • My grid is the main content of a "SettingsFlyout" http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh872190.aspx – HelpMatters Aug 06 '14 at 19:01
  • I have edited my question to include that I am using SettingsFlyout. – HelpMatters Aug 06 '14 at 19:10
  • 3
    Try setting `VerticalContentAlignment="Stretch"` on the flyout. – Filip Skakun Aug 06 '14 at 20:03
  • That worked. Awesome. Thanks a lot :). I have edited your answer to better suit the question now so that others who land here will easily be able to get to the answer. Please review it (make changes if necessary) and accept. – HelpMatters Aug 07 '14 at 03:47
  • @FilipSkakun Could you move the bit about `VerticalContentAlignment="Stretch"` into the answer since that's really the important bit when working with the settings flyout? – N_A Feb 05 '15 at 16:35
0

This looks like a good scenario to use a DockPanel. You can set alignment of all child elements of a DockPanel, for example, so that the button is always at the bottom. I like to use DockPanel because it ensures that the Button will always have the same height, as opposed to 1/16th of window's height.

LastChildFill property, which is True by default, allows the last child element (in XAML code) to take up remaining space. That's why you define the Button first, set its alignment, and let another element fill the DockPanel.

By the way, for debugging XAML code I frequently use background colours:

<DockPanel Background="Gold" LastChildFill="True">
    <Button Grid.Row="1" Content="Add" DockPanel.Dock="Bottom"/>
    <ScrollViewer Background="Red">        
        <!-- Your content -->
    </ScrollViewer>
</DockPanel>

DockPanel approach

I tried to run your code, and I didn't see the button being pulled up:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="15*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <StackPanel Background="Gold">
        <ScrollViewer Background="Red">

        </ScrollViewer>
    </StackPanel>
    <Button Grid.Row="1" Content="Add" />
</Grid>

Grid approach

Amadeusz Wieczorek
  • 3,139
  • 2
  • 28
  • 32
  • Note that there is no `DockPanel` in WinRT XAML out of the box. – Filip Skakun Aug 06 '14 at 17:46
  • 1
    You can find an open source one though. Seems like someone updated the one from Silverlight Toolkit here: http://stackoverflow.com/questions/11137884/let-textbox-stretch-to-fill-width-in-stackpanel – Filip Skakun Aug 06 '14 at 17:55