MahApps Metro HamburgerMenu绑定无法工作

Question

我不太确定这是否是询问的最佳位置，但我想试一试。

我正在尝试使用MahApps Metro UI Toolkit将汉堡菜单实现到我的应用程序中，在我制作的测试窗口中运行得很好。所以我开始移动到一个使用视图模型的主窗口。

问题是，HamburgerMenu内部的任何绑定都无法工作，但在HamburgerMenu控件之外可以正常工作。

[示例视图：

这张图片展示了我制作的测试窗口样板，以显示示例。标题和两个文本框都绑定到"MyTitle"。正如您所看到的，汉堡菜单内的那个不起作用。

我已经尝试将ViewModel绑定到HamburgerMenu控件，但没有成功。我想它必须绑定到HamburgerMenu ControlTemplate中的"TheContentGrid"或"TheContent"控件，但这些控件无法从代码后台访问。

XAML：

<Controls:MetroWindow
        ..
        Title="{Binding MyTitle}"
        ..>
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type Controls:HamburgerMenuGlyphItem}">
                <Grid Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="0" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe MDL2 Assets" Text="{Binding Glyph}" />
                    <TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Text="{Binding Label}" />
                </Grid>
            </DataTemplate>
        </Grid.Resources>

        <TextBox Text="{Binding MyTitle}" HorizontalAlignment="Right" />

        <Controls:HamburgerMenu Margin="0 30 0 0"
            SelectedIndex="0"
            x:Name="HamburgerMenuControl"
            ItemTemplate="{StaticResource MenuItemTemplate}"
            OptionsItemTemplate="{StaticResource MenuItemTemplate}"
            ItemClick="HamburgerMenuControl_OnItemClick"
            OptionsItemClick="HamburgerMenuControl_OnItemClick"
            DisplayMode="CompactOverlay">
            <!--  Items  -->
            <Controls:HamburgerMenu.ItemsSource>
                <Controls:HamburgerMenuItemCollection>
                    <Controls:HamburgerMenuGlyphItem Glyph="&#xE80F;" Label="Home">
                        <Controls:HamburgerMenuGlyphItem.Tag>
                            <Grid>
                                <TextBox Text="{Binding MyTitle}" HorizontalAlignment="Center" VerticalAlignment="Top"/>

                                <TextBlock Text="Home View" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Grid>
                        </Controls:HamburgerMenuGlyphItem.Tag>
                    </Controls:HamburgerMenuGlyphItem>
                </Controls:HamburgerMenuItemCollection>
            </Controls:HamburgerMenu.ItemsSource>

            <!--  Content  -->
            <Controls:HamburgerMenu.ContentTemplate>
                <DataTemplate DataType="{x:Type Controls:HamburgerMenuItem}">
                    <Grid x:Name="TheContentGrid">
                        <ContentControl x:Name="TheContent" Content="{Binding Tag}" />
                    </Grid>
                </DataTemplate>
            </Controls:HamburgerMenu.ContentTemplate>
        </Controls:HamburgerMenu>
    </Grid>
</Controls:MetroWindow>

代码后置与视图模型

public partial class WindowTest : MetroWindow
{
    public WindowTest()
    {
        InitializeComponent();

        DataContext = new TestViewModel();
    }

    private void HamburgerMenuControl_OnItemClick(object sender, ItemClickEventArgs e)
    {
        HamburgerMenuControl.Content = e.ClickedItem;
        HamburgerMenuControl.IsPaneOpen = false;
    }
}

public class TestViewModel : BindableBase
{

    private string myTitle;
    public string MyTitle
    {
        get { return myTitle; }
        set { SetProperty(ref myTitle, value); }
    }

    public TestViewModel()
    {
        MyTitle = "Title from VM";
    }
}

请让我知道是否需要更多信息。

- remiX

---

ItemsSource通常绑定到模型或视图模型的集合。你放进去的东西绝对不是正确的做法。 - user1228

很遗憾没有关于如何做这个的教程，WPF汉堡菜单的文档非常糟糕。 - Meme Machine

Answer 1

也许我的回答对你来说有点晚，但可能会帮助其他人。我刚刚遇到了这个问题，可以通过这个answer中描述的解决方案来解决。

因为HamburgerMenuGlyphItem不会成为可视或逻辑树的一部分，所以没有绑定祖先用于DataContext。也就是说，您的绑定没有源可供绑定。

在资源中创建一个辅助对象实例，并使用StaticResource将绑定的源明确设置为它：

<Controls:MetroWindow.Resources>
    <local:BindingProxy x:Key="Proxy" Data="{Binding}" />
</Controls:MetroWindow.Resources>
...
    <Controls:HamburgerMenuGlyphItem.Tag>
        <Grid>
            <TextBox Text="{Binding Data.MyTitle, Source={StaticResource Proxy}}" />
        </Grid>
    </Controls:HamburgerMenuGlyphItem.Tag>

这是辅助对象的代码（source）：

public class BindingProxy : Freezable
{ 
    protected override Freezable CreateInstanceCore()
    {
        return new BindingProxy();
    }

    public object Data
    {
        get { return (object)GetValue(DataProperty); }
        set { SetValue(DataProperty, value); }
    }

    public static readonly DependencyProperty DataProperty =
        DependencyProperty.Register("Data", typeof(object), typeof(BindingProxy), new UIPropertyMetadata(null));
}

- Ron

Answer 2

你应该通过实现INotifyPropertyChanged接口来解决你的问题。

public class TestViewModel : BindableBase, INotifyPropertyChanged
{
    public void SetPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new     PropertyChangedEventArgs(propertyName));
    }
    public event PropertyChangedEventHandler PropertyChanged;
    private string myTitle;
    public string MyTitle
    {
        get { return myTitle; }
        set { 
              SetProperty(ref myTitle, value); 
              SetPropertyChanged("MyTitle");
            }
    }

    public TestViewModel()
    {
        MyTitle = "Title from VM";
    }
}

问题在于您没有通知用户界面(Textbox)第一个文本框的Text属性已更改。由于UI是在视图模型(ViewModel)之前初始化的，因此您会看到空的文本框。

- Daniele Sartori