UWP--响应式UI设计

设置windows窗口
在Visual Blend中XAML代码编辑单击右键查看代码，在主函数中插入：

        ApplicationView.PreferredLaunchViewSize = new Size(1000, 700);
        ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

设置windows窗口最小值
在主函数中插入：

 ApplicationView.GetForCurrentView().SetPreferredMinSize(new Size(430, 100));

响应式UI设计：
效果如图：

XAML代码如下：

<Page
    x:Class="RelativePanel.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RelativePanel"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Width="1915">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState >
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="431" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState >
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="RelativeNavigation.(RelativePanel.AlignTopWithPanel)" Value="False"></Setter>
                        <Setter Target="RelativeNavigation.(RelativePanel.AlignRightWithPanel)" Value="True"></Setter>
                        <Setter Target="ButtonHome.(RelativePanel.AlignTopWithPanel)" Value="False"></Setter>
                        <Setter Target="ButtonHome.(RelativePanel.AlignLeftWithPanel)" Value="True"></Setter>
                        <Setter Target="ButtonMessage.(RelativePanel.Below)" Value=""></Setter>
                        <Setter Target="ButtonMessage.(RelativePanel.RightOf)" Value="ButtonHome"></Setter>
                        <Setter Target="ButtonAdd.(RelativePanel.Below)" Value=""></Setter>
                        <Setter Target="ButtonAdd.(RelativePanel.RightOf)" Value="ButtonMessage"></Setter>
                        <Setter Target="ButtonFind.(RelativePanel.Below)" Value=""></Setter>
                        <Setter Target="ButtonFind.(RelativePanel.RightOf)" Value="ButtonAdd"></Setter>
                        <Setter Target="ButtonMe.(RelativePanel.Below)" Value=""></Setter>
                        <Setter Target="ButtonMe.(RelativePanel.RightOf)" Value="ButtonFind"></Setter>
                        <Setter Target="GridContent.(RelativePanel.AlignBottomWithPanel)" Value="False"></Setter>
                        <Setter Target="GridContent.(RelativePanel.AlignLeftWithPanel)" Value="True"></Setter>
                        <Setter Target="GridContent.(RelativePanel.AlignBottomWith)" Value="RelativeNavigation"></Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <RelativePanel x:Name="RelativeNavigation" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignTopWithPanel="True" Background="LightGray">
                <Button x:Name="ButtonHome" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="30" Content="&#xE10F;" RelativePanel.AlignTopWithPanel="True" HorizontalAlignment="Left" Height="86" VerticalAlignment="Center" Width="86"/>
                <Button x:Name="ButtonMessage" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="30" Content="&#xE119;" RelativePanel.Below="ButtonHome" HorizontalAlignment="Center" Height="87" VerticalAlignment="Center" Width="86"/>
                <Button x:Name="ButtonFind" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="30" Content="&#xE11A;" RelativePanel.Below="ButtonMessage" HorizontalAlignment="Center" Height="86" VerticalAlignment="Center" Width="86" Margin="0,0,0,0"/>
                <Button x:Name="ButtonMe" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="30" Content="&#xE13D;" RelativePanel.Below="ButtonFind" HorizontalAlignment="Center" Height="86" VerticalAlignment="Center" Width="86"/>
                <Button x:Name="ButtonAdd" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="30" Content="&#xE710;" Background="Orange" RelativePanel.Below="ButtonMe" HorizontalAlignment="Center" Height="86" VerticalAlignment="Center" Width="86" Margin="0,0,0,0"/>
            </RelativePanel>
            <Grid x:Name="GridContent" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignTopWithPanel="True" RelativePanel.RightOf="RelativeNavigation" >
                <TextBlock Text="内容" Foreground="LightGray" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
            </Grid>
        </RelativePanel>

    </Grid>
</Page>