3

私のアプリでは、アプリの上部に複数の AppBarButtons を持つ CommandBar を使用しています。ウィンドウのサイズを変更すると、ウィンドウの幅全体に収まらない場合は、AppBarButtons が CommandBar.SecondaryButtons に移動するようになります。例として、デフォルトの天気アプリでは、このような効果があります。

次に、特定のデバイス ファミリで、Page.BottomAppBar 内の CommandBar のように、上部の CommandBar から下部の CommandBar に切り替えたいと考えています。xaml に 2 つの CommandBars を設定し、条件に一致するものを表示する必要があるかどうか、またはより良い方法があるかどうかはわかりません。私は VisualStates で可能な限り多くのことをしたいと思っていますが、これを達成する方法がわかりません。

これらは 2 つの質問であることはわかっていますが、どちらも CommandBar を指しています。

よろしくお願いします

4

2 に答える 2

4

例として、デフォルトの天気アプリでは、このような効果があります。

を使用VisualStateManagerして、コントロールの表示状態と表示状態間の遷移のロジックを管理し、 のVisibilityプロパティを使用しAppBarButtonて表示または非表示にすることができます。

例えば：

AppBarButtonに 2 つ、 にCommandBar.PrimaryCommands2つ追加AppBarButtonしCommandBar.SecondaryCommandsます。ウィンドウの幅が 720 未満の場合、 inのVisibilityプロパティをに設定します。ウィンドウの幅が 720 より大きい場合、または 720 に相当する場合は、 inのプロパティをに設定します。AppBarButtonCommandBar.PrimaryCommandsCollapsedVisibilityAppBarButtonCommandBar.SecondaryCommandsCollapsed

XAML コード:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="PrimaryHome.Visibility" Value="Collapsed"/>
                    <Setter Target="PrimaryAdd.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="SecondHome.Visibility" Value="Collapsed"/>
                    <Setter Target="SecondAdd.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>
<Page.TopAppBar>
    <CommandBar x:Name="TopCommands" >
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="PrimaryHome" Icon="Home" Label="Home"/>
            <AppBarButton Name="PrimaryAdd" Icon="Add" Label="Add"  />
        </CommandBar.PrimaryCommands>
        <CommandBar.SecondaryCommands>
            <AppBarButton Name="SecondHome" Icon="Home" Label="Home" />
            <AppBarButton Name="SecondAdd" Icon="Add" Label="Add" />
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.TopAppBar>

次に、特定のデバイス ファミリで、Page.BottomAppBar 内の CommandBar のように、上部の CommandBar から下部の CommandBar に切り替えたいと考えています。

Page.TopAppBarとPage.BottomAppBarを XAML に追加できます。また、ページに表示VisualStateManagerするものを管理するために使用します。CommandBar

例えば：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TopCommands.Visibility" Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="BottonCommands.Visibility" Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>
<Page.TopAppBar>
    <CommandBar x:Name="TopCommands" Visibility="Collapsed" >
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="PrimaryHome" Icon="Home" Label="Home"/>
            <AppBarButton Name="PrimaryAdd" Icon="Add" Label="Add"  />
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.TopAppBar>
<Page.BottomAppBar>
    <CommandBar x:Name="BottonCommands" Visibility="Collapsed">
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="BottonPrimaryHome" Icon="Home" Label="Home"/>
            <AppBarButton Name="BottonPrimaryAdd" Icon="Add" Label="Add"  />
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>
于 2016-05-09T08:32:52.173 に答える
3

最初の質問: のPrimaryとSecondaryのセクションでボタンを設定できますCommandBar。次にVisualStates、アプリの幅に応じてそれらの可視性を切り替えるために使用します。SizeChangedまたは、ページのイベントを使用して完全にコードで実行できます。

2番目の質問、次のようなものを作成しましょう

<Page>
    <Grid>
<!-- row definition here -->
<!-- Row 1 -->
<!-- Row 2 -->

<!-- Content -->
<Grid Grid.Row="0"/>

<!-- app bar -->
<CommandBar Grid.Row="1"/>
    </Grid>
</Page>

質問 1 と同様に、添付プロパティGrid.Rowを目的の数値に変更します。VisualStates

于 2016-05-09T07:26:35.820 に答える