CommandBar新模板工作室

Question

我想把CommandBar放在桌面和移動的頂部在新的模板UWP Ppero的底部，當這在臺式機上不會退出COOMND欄並且移動不會離開上部的Commndbar enter code here enter 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，你可以在你的網格三行只是改變CommandBar的Grid.Row值與AdaptiveTrigger使用應用程序的寬度。

Here is a video of the example code below at run-time。

UPDATE

再次重申我在我的最後陳述意見，您不再需要使用「Page.AppBar」屬性。事實上，你不想使用它，因爲你的網格的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寬，命令欄將在底部。否則，它將位於頂部。