新命令栏模板工作室

Question

如何将 CommandBar 放在桌面的顶部和移动设备的底部？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，您可以在网格中包含三行，只需使用 AdaptiveTrigger 的宽度更改 CommandBar 的 Grid.Row 值应用

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

更新

为了重申我在上一条评论中所说的话，您不再需要使用 "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，CommandBar 将位于底部。否则，它将在顶部。

新命令栏模板工作室

Nuevo estudio de plantilla CommandBar

app.xaml

uwp