Nuevo estudio de plantilla CommandBar

Question

如何将命令栏放在桌面顶部和移动设备底部？enter code hereenter code here

<Grid.RowDefinitions>
<RowDefinition x:Name="TitleRow" Height="48"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
`enter code here`   <TextBlock
x:Name="TitlePage"
x:Uid="Main_Title"
FontSize="{StaticResource FontSizeMedium}" Foreground="{StaticResource RedBrush}" FontWeight="SemiLight" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" VerticalAlignment="Center"
Margin="0,0,12,7"/>
`enter code here`   <CommandBar x:Name="Topbar" Margin="0,0,12,7"  HorizontalAlignment="Right"  Background="White" Visibility="Collapsed"  >
<CommandBar.PrimaryCommands>
<AppBarButton  x:Name="AddButton" Icon="Accept" x:Uid="Aceptar"  Foreground="{StaticResource RedBrush}" Click="AddButton_Click"/>
</CommandBar.PrimaryCommands>
</CommandBar>

Answer 1

由于你已经在使用 VisualStates，因此您可以在 Grid 中拥有三行，只需使用应用的宽度AdaptiveTrigger更改CommandBar的Grid.Row值即可。

下面是下面运行时示例代码的视频。

更新

为了重申我在上一条评论中所说的内容，您不再需要使用"Page.AppBar"属性。事实上，您不想使用它，因为 Grid 的VisualStateManager无法更改页面级别属性。

相反，您可以执行我在下面显示的操作(这是一个完整的，有效的示例(：

<Grid x:Name="ContentArea"
Margin="{StaticResource MediumLeftRightMargin}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<CommandBar x:Name="MyAppBar"
Grid.Row="0" />
<Grid Grid.Row="1" Background="DarkGray">
<TextBlock Text="This is where your page content would go" 
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
<!--  Adaptive triggers  -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="640" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MyAppBar.(Grid.Row)"
Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MyAppBar.(Grid.Row)"
Value="2" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>

当应用程序在移动设备上时，屏幕宽度将小于 640epx，命令栏将位于底部。否则，它将位于顶部。