问UWP CommandBar -内容是完全独立的上下文吗？
EN

Stack Overflow用户

提问于 2015-12-20 09:03:09

回答 3查看 2.3K关注 0票数 0

一段时间以来，我一直试图以自己的方式实现微软的汉堡包模式。

最后的结果如下：

包含当前页面和汉堡菜单的AppShell (菜单总是可见的)
在Appshell中，有两行的网格:一个48 In的高度，一个启动的高度。
在第一行中，添加了命令栏(全局)和汉堡包按钮(设置为48 In宽和高的自定义样式的切换按钮，中间是汉堡火锅)。
在第二行中，SplitView在窗格上有一个ListBox，在内容中有一个框架。

这样就可以控制内容，同时显示全局菜单和命令栏。在框架的导航事件上，我更新CommandBar以从框架的内容属性(我使用带有这些属性的自定义页面控件)和CommandBar的内容(现在是一个具有绑定的单个TextBlock )中提取主命令和辅助命令。

但是，我想将ToggleButton移动到CommandBar中。它工作得很好，除非绑定(IsChecked of ToggleButton绑定到IsPaneOpen of SplitView)不起作用。我使用常规的ElementName目标，并且不喜欢使用ViewModel属性。

CommandBar.Content是否使用不同的上下文？或者为什么ElementName引用不起作用？

uwp

hamburger-menu

commandbar

回答 3

Stack Overflow用户

发布于 2015-12-26 10:17:36

这对我来说很管用：

<Page
    x:Class="StackOverflowTests.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="48"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <CommandBar>
            <CommandBar.Content>
                <AppBarToggleButton Icon="Globe" IsChecked="{Binding ElementName=SplitView,Path=IsPaneOpen,Mode=TwoWay}"/>
            </CommandBar.Content>
        </CommandBar>
        <SplitView Grid.Row="1" Name="SplitView" IsPaneOpen="{x:Bind Appbarbutton.IsChecked.Value,Mode=OneWay}">
            <SplitView.Pane>
                <ListBox>
                    <ListBoxItem>Foo</ListBoxItem>
                    <ListBoxItem>Bar</ListBoxItem>
                </ListBox>
            </SplitView.Pane>
            <SplitView.Content>
                <TextBlock>stuff here</TextBlock>
            </SplitView.Content>
        </SplitView>
    </Grid>
    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.Content>
                <AppBarToggleButton Name="Appbarbutton" Icon="Home" />
            </CommandBar.Content>
        </CommandBar>
    </Page.BottomAppBar>
</Page>

票数 0

Stack Overflow用户

发布于 2015-12-31 12:01:07

唯一能够绑定到AppBarToggleButton的方法是在代码后面设置DataContext。

XAML：

<Page.BottomAppBar>
  <CommandBar x:Name="CommandBar">
    <AppBarToggleButton x:Name="Button" IsChecked="{Binding IsPaneOpen, Mode=TwoWay}" Icon="Home" Label="Button"/>
  </CommandBar>
</Page.BottomAppBar>

代码背后：

protected override void OnNavigatedTo(NavigationEventArgs e)
{
  base.OnNavigatedTo(e);
  Button.DataContext = SplitView;
}

票数 0

Stack Overflow用户

发布于 2016-09-20 21:46:57

您有绑定DataContext:示例：

<Page.BottomAppBar >
    <CommandBar x:Name="commandBar" DataContext="{Binding}">
        <CommandBar.Content>
            <StackPanel Margin="0,0">
                <ListView ItemsSource="{Binding Confirmation.AvailableValues}" ItemContainerStyle="{StaticResource ListViewItemBase}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Button Content="{Binding Value.DisplayName}" Command="{Binding DataContext.Confirm, ElementName=commandBar}" CommandParameter="{Binding Value}" HorizontalAlignment="Center"></Button>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <Line Margin="5" X1="0" X2="1000" Y1="0" Y2="0" HorizontalAlignment="Stretch" Height="2"  Stroke="#888888"   StrokeThickness="1" ></Line>
            </StackPanel>
        </CommandBar.Content>
    </CommandBar>

</Page.BottomAppBar>