Grid Properties

Background

By default the <Page> has a background defined:

<Page
...
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

But you can set a grid background if you want:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid Background="Black">
Columns
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="30"/>
		<ColumnDefinition Width="1*"/>
	</Grid.ColumnDefinitions>
Rows
	<Grid.RowDefinitions>
		<RowDefinition Height="30"/>
		<RowDefinition Height="50"/>
		<RowDefinition Height="3*"/>
		<RowDefinition Height="1*" MinHeight="40"/>
	</Grid.RowDefinitions>

Placing Objects In The Grid

	<Rectangle Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" ... 

Grid Example 1

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="1*" MinHeight="40"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="3*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Text="UWP App Transitions" FontSize="24" Grid.ColumnSpan="3"/>

        <TextBlock Grid.Column="1" Grid.Row="2" TextWrapping="Wrap" Text="To Transition" Grid.ColumnSpan="3" />
        <ComboBox x:Name="toTransitions" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Width="275" SelectionChanged="toTransitions_SelectionChanged" Grid.ColumnSpan="3" />

        <TextBlock Grid.Column="1" Grid.Row="4" TextWrapping="Wrap" Text="From Transition" Grid.ColumnSpan="3" />
        <ComboBox x:Name="fromTransitions" Grid.Column="1" Grid.Row="5" HorizontalAlignment="Left" Width="275" SelectionChanged="fromTransitions_SelectionChanged" Grid.ColumnSpan="3" />

        <Button Content="Navigate" Grid.Column="1" Grid.Row="7" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Click="Button_Click" Grid.ColumnSpan="3" />
        <Button Content="Left" Grid.Column="1" Grid.Row="8" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Click="ButtonLeft_Click" />
        <Button Content="Popup" Grid.Column="2" Grid.Row="8" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Click="ButtonPop_Click" />
        <Button Content="Right" Grid.Column="3" Grid.Row="8" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Click="ButtonRight_Click" />
    </Grid>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *