Создание адаптивного макета с помощью RelativePanel

Question

Создание адаптивного макета с помощью RelativePanel

Привет, я хочу, чтобы когда зрение было меньше 720, например, у телефона, я хотел бы, чтобы сетка 2 была ниже сетки 1. Я пробовал через ее панель и адаптивный триггер, как это:

  <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>

Но это не работает. Спасибо

0

xaml uwp

Источник

user3839076 19 окт '15 в 21:48

2 ответа

Решение

Я нашел решение без относительной панели, если кто-то заботится:

<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="text.(Grid.ColumnSpan)" Value="2" />
                    <Setter Target="text1.(Grid.ColumnSpan)" Value="2" />
                    <Setter Target="text2.(Grid.ColumnSpan)" Value="2" />
                    <Setter Target="text1.(Grid.Row)" Value="1" />
                    <Setter Target="text1.(Grid.Column)" Value="0" />
                    <Setter Target="text2.(Grid.Row)" Value="2" />
                    <Setter Target="text2.(Grid.Column)" Value="0" />
                </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="WideView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="860" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="text.(Grid.ColumnSpan)" Value="1" />
                        <Setter Target="text1.(Grid.Row)" Value="0" />
                        <Setter Target="text1.(Grid.Column)" Value="1" />
                        <Setter Target="text2.(Grid.Row)" Value="1" />
                        <Setter Target="text2.(Grid.Column)" Value="1" />
                </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
    <TextBox x:Name="text" PlaceholderText="NOME" />
    <TextBlock x:Name="text1" Grid.Row="0" Grid.Column="1" Text="Note"></TextBlock>
    <TextBox x:Name="text2" Grid.Row="1" Grid.Column="1" PlaceholderText="AGGIUNGI NOTA" ></TextBox>
</Grid>

0

Источник

user3839076 20 окт '15 в 10:36

Другие вопросы по тегам xaml uwp

user5254458 20 окт '15 в 01:35 2015-10-20 01:35 · Accepted Answer · 2015-10-20 01:35

Есть две вещи, которые нужно исправить:

1) Чтобы VisualState работал, поместите VisualStateManager под первым дочерним элементом корневой Grid:

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

</Grid>

2) Вам не нужно добавлять столбцы, просто поместите две сетки под 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>