UWP_几种自带的布局面板

1. RelativePanel

通过三种方式确定元素的位置

1. 与面板对其方式,默认是在左上方AlignLeftWithPanel

 <Rectangle x:Name="blue" Width="100" Height="100" RelativePanel.AlignLeftWithPanel="True" Fill="Blue"></Rectangle>

2. 相对于另一个同级元素的位置RightOf

<Rectangle x:Name="yellow" Width="100" Height="50" RelativePanel.RightOf="blue" Fill="yellow"></Rectangle>

3. 相对于同级元素的对齐方式AlignLeftWith

<Rectangle Width="200" Height="100" RelativePanel.AlignLeftWith="blue" RelativePanel.Below="blue" Fill="Red"></Rectangle> 

完整代码

<RelativePanel BorderThickness="5" BorderBrush="Red">
    <Rectangle x:Name="blue" Width="100" Height="100" RelativePanel.AlignLeftWithPanel="True" Fill="Blue"></Rectangle>
    <Rectangle x:Name="yellow" Width="100" Height="50" RelativePanel.RightOf="blue" Fill="yellow" RelativePanel.AlignVerticalCenterWith="blue"></Rectangle>
    <Rectangle Width="200" Height="100" RelativePanel.AlignLeftWith="blue" RelativePanel.Below="blue" Fill="Red"></Rectangle> 
</RelativePanel>

2. StackPanel垂直或横向布局(简单)

1. 垂直布局

<StackPanel>
    <Rectangle Fill="Red" Height="44" Width="33" HorizontalAlignment="Left"/>
    <Rectangle Fill="Blue" Height="44"/>
    <Rectangle Fill="Green" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</StackPanel>

2. 横向布局

<StackPanel Orientation="Horizontal">
    <Rectangle Fill="Red" Width="33" HorizontalAlignment="Left"/>
    <Rectangle Fill="Blue" Width="33" />
    <Rectangle Fill="Green"  Width="33"/>
    <Rectangle Fill="Orange"  Width="33"/>
</StackPanel>

3. Grid网格布局-简单实用

通过RowDefinitions和ColumnDefinition来确定多少行和列Height和Width确定没行或列所占的等分，默认为*
其中的auto能够当屏幕发生大小变换时更具其他元素所占的等份自动适应
元素的位置通过Grid.Column和Grid.Row指定
Grid.ColumnSpan可以指定这个元素跨越几行

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="44"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red" Width="44"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>

4. VariableSizedWrapGrid网格样式布局面板

Orientation指定元素的添加方向，默认为向下
MaximumRowsOrColumns指定最大行或列，超过它就往下一行或列添加元素
ItemHeight和ItemWidth指定么个单元格占据的大小
VariableSizedWrapGrid.RowSpan来指定元素占据几个单元格子

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Orange" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

5. Canvas画布，不支持响应式布局，只有当你用动画或什么的时候使用

如果Canvas不指定大小那么就是全屏包裹
Canvas.Left来指定元素的位置
Canvas.ZIndex越大越在其他元素上面绘制，可以动态通过代码修改

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red" Height="44" Width="44" Canvas.ZIndex="100"/>
    <Rectangle Fill="Blue" Height="44" Width="44" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Height="44" Width="44" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Orange" Height="44" Width="44" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>

6. 做一个案例

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="5*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Background="#2f5cb6">
            <Image Margin="20" Source="Assets/1.png"/>
        </Border>
        <Border Grid.Column ="1" Background="#1f3d7a">
            <StackPanel Grid.Column="1" Margin="40,0,0,0" VerticalAlignment="Center">
                <TextBlock Foreground="White" FontSize="25" Text="Today - 64° F"/>
                <TextBlock Foreground="White" FontSize="25" Text="Partially Cloudy"/>
                <TextBlock Foreground="White" FontSize="25" Text="Precipitation: 25%"/>
            </StackPanel>
        </Border>
        <Border Grid.Row="1" Grid.ColumnSpan="2" Background="#152951">
            <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal"
            HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Foreground="White" FontSize="25" Text="High: 66°" Margin="0,0,20,0"/>
                <TextBlock Foreground="White" FontSize="25" Text="Low: 43°" Margin="0,0,20,0"/>
                <TextBlock Foreground="White" FontSize="25" Text="Feels like: 63°"/>
            </StackPanel>
        </Border>

    </Grid>

SplitView窗格类

Overlay
在打开之前隐藏窗格。 在打开时，窗格覆盖内容区域。
Inline
窗格始终可见，并且不会覆盖内容区域。 窗格和内容区域划分可用的屏幕空间。
CompactOverlay
在此模式下始终可以看见狭窄的部分窗格，宽度恰好足以显示图标。 默认关闭窗格宽度为 48px，可以使用 CompactPaneLength 进行修改。 如果打开窗格，将覆盖内容区域。
CompactInline
在此模式下始终可以看见狭窄的部分窗格，宽度恰好足以显示图标。 默认关闭窗格宽度为 48px，可以使用 CompactPaneLength 进行修改。 如果打开窗格，将减少用于内容的空间，从而会将内容挤出去。

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="296">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>//可以用于左边显示图，右边显示描述内容等操作