locked
Grid spacing in Windows Phone Runtime XAML

    Question

  • Hello

    I've got a simple problem with XAML UI in Windows Phone 8.1 Runtime. I always want my button control to appear on the very bottom of the page (just above an App Bar), horizontally stretched.

    On Windows Phone 8.0/8.1 Silverlight such a simple requirement was done just by this code:

    <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.9*"/>
                        <RowDefinition Height="0.1*" />
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Row="0" >
                        --some content here, which has to be on the rest of the page--
                    </StackPanel>
                    <Button x:Name="BtnOnTheBottom" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
                </Grid>

    To make this working on this Windows Runtime thing, I have to explicitly set Grid's Height to any value. Then, the bottom 10% of the explicitly passed value is taken by this button. But users might have different screen sizes and on bigger screen this explicitly assigned value may lead the button to appear in the middle of the screen, which I don't want.

    The second thing I don't want to do is to rely on the page SizeChanged event and dynamically assign the pixel values. I want everything be done in the XAML way.

    Is it possible on this Windows Runtime thing to achieve such an extremely difficult requirement to be done only on XAML side :P?

    Many thanks in advance

    Friday, March 13, 2015 4:11 PM

Answers

  • StackPanel always squishes to the smallest amount of room possible, which is why you're having problems. The stackpanel doesn't take up very much room, and the Grid doesn't fill up the entire amount of space.  Try this:

     <Grid>
            <StackPanel >
            </StackPanel>
             <Button HorizontalAlignment="Stretch" Content="Button" VerticalAlignment="Bottom"/>
        </Grid>


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by mmaciekksz Friday, March 13, 2015 7:27 PM
    Friday, March 13, 2015 7:10 PM
    Moderator

All replies

  • StackPanel always squishes to the smallest amount of room possible, which is why you're having problems. The stackpanel doesn't take up very much room, and the Grid doesn't fill up the entire amount of space.  Try this:

     <Grid>
            <StackPanel >
            </StackPanel>
             <Button HorizontalAlignment="Stretch" Content="Button" VerticalAlignment="Bottom"/>
        </Grid>


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by mmaciekksz Friday, March 13, 2015 7:27 PM
    Friday, March 13, 2015 7:10 PM
    Moderator
  • Many thanks for this response :).

    It worked great now :).

    Friday, March 13, 2015 7:26 PM