UWP CommandBar - 内容是完全独立的上下文？答案

【问题标题】：UWP CommandBar - Content is completely separate context?UWP CommandBar - 内容是完全独立的上下文？
【发布时间】：2015-12-20 17:03:09
【问题描述】：

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

最终结果如下：

AppShell 用于包含当前页面和汉堡菜单（菜单始终可见）
在 Appshell 中，网格有两行：一列高度为 48 像素，一列高度为一开始。
在第一行中，添加了命令栏（全局）和汉堡按钮（具有自定义样式的切换按钮，宽高 48 像素，汉堡字体图标位于中心）
在第二行，SplitView 在窗格上有一个 ListBox，在内容中有一个框架。

这样可以控制内容，同时显示全局菜单和命令栏。在 Frame 的 Navigated 事件中，我更新 CommandBar 以从 Frame 的 Content 属性（我使用具有这些属性的自定义页面控件）和 CommandBar 的内容（现在是带绑定的单个 TextBlock）。

但是，我想将 ToggleButton 移到 CommandBar 中。它工作得很好，除了绑定（ToggleButton 的 IsChecked 绑定到 SplitView 的 IsPaneOpen）不起作用。我使用常规的 ElementName 定位，并且不希望使用 ViewModel 属性。

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

【问题讨论】：

你使用x:Bind 吗？您是否正确设置了Mode 属性？
我使用普通的Binding，而不是x:Bind。模式设置正确（TwoWay），但就像属性更改永远不会触发一样。如果我从 CommandBar 中复制粘贴 ToggleButton 的确切代码，它可以正常工作。如果在命令栏的内容内，它将停止工作。
您是否尝试过反转绑定？我的意思是：不要在 ToggleButton 上使用双向绑定，而是使用像 IsPaneOpen="{Binding IsChecked, ElementName=Toggle}" 这样的单向绑定
是的，我做了，结果相似。这就像CommandBar内容中的控件不存在一样。不过有趣的是 - 我将 TextBlock 的 Text 绑定到 Frame 的 Content 的 Title 属性（我使用自定义的 Page 控件），这样就可以了。

标签： c# uwp hamburger-menu commandbar

【解决方案1】：

我能够绑定到 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;
}

【讨论】：

【解决方案2】：

这对我有用：

<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>

【讨论】：

是的，这行得通，但它有点违背了内置命令栏的目的。如果您在页面中使用 CommandBar ()，则绑定不起作用。
如果您阅读了这个问题，那正是他所要求的，CommandBar in Grid
@TomShane 我添加了另一个示例来展示，这在没有DataContext 设置的页面底部/顶部 AppBar 中也是可能的

【解决方案3】：

您已绑定 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>

【讨论】：