使用 RelativePanel 构建自适应布局 [英] Building adaptive layout with RelativePanel

问题描述

你好我希望当视野小于720例如手机时，我希望网格2低于网格1.我尝试通过它的面板和自适应触发器如下:

hello I want that when the vision is less than 720 such as a phone, I would like the grid 2 went below the grid 1. I tried through its panel and adaptive trigger like this:

  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <RelativePanel >
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="NarrowView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Grid2.(RelativePanel.Below)" Value="Grid1"/>
                        <Setter Target="Grid1.(RelativePanel.Above)" Value="Grid2"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="WideView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Grid2.(RelativePanel.RightOf)" Value="Grid1"/>
                        <Setter Target="Grid1.(RelativePanel.LeftOf)" Value="Grid2"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0" x:Name="Grid1" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
                <TextBox Grid.Row="0" FontSize="20" PlaceholderText="NOME" Style="{StaticResource ResourceKey=TextBoxStyle}"/>
            </Grid>
            <Grid Grid.Column="1" x:Name="Grid2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" FontSize="17" Text="Note" Foreground="#222222" Margin="20,15" ></TextBlock>
                <TextBox Grid.Row="2" MaxLength="0" FontSize="17" Height="500" PlaceholderText="AGGIUNGI NOTA" Style="{StaticResource ResourceKey=TextBoxStyle}"></TextBox>
            </Grid>
        </Grid>
    </RelativePanel>
</Grid>

但它不起作用.谢谢

推荐答案

您需要解决两件事:

1) 要使 VisualState 工作，请将 VisualStateManager 放在根 Grid 的第一个子项下:

1) To make VisualState works, place the VisualStateManager under the first child of root Grid:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
......
        </VisualStateManager.VisualStateGroups>
......

</Grid>

2)你不需要添加Columns，只需将你的两个Grids放在RelativePanel下:

2) You don't need to add Columns, just place your two Grids under RelativePanel:

<RelativePanel>
            <Grid x:Name="Grid1">
                ......
            </Grid>
            <Grid x:Name="Grid2">
                ......
            </Grid>
        </RelativePanel>

完成的xaml代码:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="NarrowView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Grid2.(RelativePanel.Below)" Value="Grid1"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="WideView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Grid2.(RelativePanel.RightOf)" Value="Grid1"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <RelativePanel>
            <Grid x:Name="Grid1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBox Grid.Row="0" FontSize="20" PlaceholderText="NOME" />
            </Grid>
            <Grid x:Name="Grid2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" FontSize="17" Text="Note" Foreground="#222222" Margin="20,15" ></TextBlock>
                <TextBox Grid.Row="2" MaxLength="0" FontSize="17" Height="500" PlaceholderText="AGGIUNGI NOTA" ></TextBox>
            </Grid>
        </RelativePanel>
    </Grid>

这篇关于使用 RelativePanel 构建自适应布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！