C# wpf caliburn.Micro MahApps HamburgerMenu.ContentTemplate 数据绑定(bind)不起作用

Question

我正在使用 Caliburn.Micro(用于简单的数据绑定(bind)和其他东西)和 MahApps.Metro(用于设计)制作应用程序。

我创建了一个名称为“MainView”的 View ，其中包含 MahApps 的 HamburgerMenu。 我的问题是数据绑定(bind)在 HamburgerMenu.ContentTemplate 标签下工作正常

这是我的 HamburgerMenu.ContentTemplate xaml。

<Page x:Class="Sample.Views.MainView"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:cal="http://www.caliburnproject.org"
      xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
      xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
      xmlns:utils="clr-namespace:Omni.WindowsClient.Utils"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="clr-namespace:Omni.WindowsClient.Views"
      mc:Ignorable="d"
      d:DesignHeight="300"
      d:DesignWidth="600">

    <Page.Resources>
        <DataTemplate x:Key="HamburgerMenuItem"
                      DataType="{x:Type mah:HamburgerMenuItem}">
            <Grid Height="48">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="48" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Image Margin="12"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Source="{Binding Glyph}"
                       Stretch="UniformToFill" />
                <TextBlock Grid.Column="1"
                           VerticalAlignment="Center"
                           FontSize="16"
                           Foreground="White"
                           Text="{Binding Label}" />
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid>

        <mah:HamburgerMenu x:Name="HamburgerMenuControl"
                           SelectedIndex="0"
                           ItemTemplate="{StaticResource HamburgerMenuItem}"
                           OptionsItemTemplate="{StaticResource HamburgerMenuItem}"
                           IsPaneOpen="True"
                           DisplayMode="CompactInline"
                           cal:Message.Attach="[Event ItemClick] = [Action ShowDetails(HamburgerMenuControl.SelectedItem)]"
                           DataContext="{Binding RelativeSource={RelativeSource self}}">
            <mah:HamburgerMenu.ItemsSource>
                <mah:HamburgerMenuItemCollection>
                    <mah:HamburgerMenuItem Label="System Status">
                        <mah:HamburgerMenuItem.Tag>
                            <iconPacks:PackIconFontAwesome Width="22"
                                                           Height="22"
                                                           HorizontalAlignment="Center"
                                                           VerticalAlignment="Center"
                                                           Kind="Tasks" />
                        </mah:HamburgerMenuItem.Tag>
                    </mah:HamburgerMenuItem>
                    <mah:HamburgerMenuItem Label="Inbox">
                        <mah:HamburgerMenuItem.Tag>
                            <iconPacks:PackIconFontAwesome Width="22"
                                                           Height="22"
                                                           HorizontalAlignment="Center"
                                                           VerticalAlignment="Center"
                                                           Kind="Inbox" />
                        </mah:HamburgerMenuItem.Tag>
                    </mah:HamburgerMenuItem>
                        <mah:HamburgerMenuItem.Tag>
                            <iconPacks:PackIconFontAwesome Width="22"
                                                           Height="22"
                                                           HorizontalAlignment="Center"
                                                           VerticalAlignment="Center"
                                                           Kind="Certificate" />
                        </mah:HamburgerMenuItem.Tag>
                    </mah:HamburgerMenuItem>
                </mah:HamburgerMenuItemCollection>
            </mah:HamburgerMenu.ItemsSource>

            <mah:HamburgerMenu.ContentTemplate>
                <DataTemplate DataType="{x:Type mah:HamburgerMenuItem}">
                    <Grid utils:GridUtils.RowDefinitions="48,*">
                        <!--cal:Action.TargetWithoutContext="{Binding ElementName=HamburgerMenuControl, Path=DataContext}"-->
                        <Border Grid.Row="0"
                                Background="{DynamicResource MahApps.Metro.HamburgerMenu.PaneBackgroundBrush}">
                            <TextBlock x:Name="Header"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       FontSize="24"
                                       Foreground="White" />
                            <!--Text="{Binding Path=Header, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"-->
                        </Border>
                        <Frame Grid.Row="1"
                               cal:Message.Attach="RegisterFrame($source)"
                               DataContext="{x:Null}"
                               NavigationUIVisibility="Hidden" />
                    </Grid>
                </DataTemplate>
            </mah:HamburgerMenu.ContentTemplate>

        </mah:HamburgerMenu>

    </Grid>
</Page>

相应的 View 模型代码是:

using Caliburn.Micro;
using MahApps.Metro.Controls;
using System.Windows.Controls;

namespace Sample.ViewModels
{
    public class MainViewModel : Screen
    {
        private readonly SimpleContainer _container;
        private INavigationService _navigationService;
        private string _header;

        public string HeaderTitle
        {
            get { return _header; }
            set
            {
                _header = value;
                NotifyOfPropertyChange();
            }
        }

        public MainViewModel(SimpleContainer container)
        {
            this._container = container;
            DisplayName = "Main";
        }

        public void RegisterFrame(Frame frame)
        {
            _navigationService = new FrameAdapter(frame);
            _container.Instance(_navigationService);
            _navigationService.NavigateToViewModel(typeof(SystemStatusViewModel));
            HeaderTitle = "System Status";
        }

        public void ShowDetails(HamburgerMenuItem menuItem)
        {
            switch (menuItem.Label)
            {
                case "System Status":
                    _navigationService.NavigateToViewModel(typeof(SystemStatusViewModel));
                    HeaderTitle = "System Status";
                    break;
                case "Inbox":
                    _navigationService.NavigateToViewModel(typeof(InboxViewModel));
                    HeaderTitle = "Inbox";
                    break;
                default:
                    break;
            }
        }

    }
}

当我单击菜单项时，我想在 HamburgerMenu.ContentTemplate 下的框架中更改 View 。 像系统状态 View 是 SystemStatusView 收件箱 View 是 InboxView。

如果我不使用 HamburgerMenu.ContentTemplate，我的代码工作正常(它更改框架中的 View 并更改页眉标签)。但我想使用 HamburgerMenu.ContentTemplate 来处理 HamburgerMenu。

谢谢!

Answer 1

如果您不使用 HamburgerMenu.ContentTemplate 时工作正常，但在您使用时停止工作，则问题可能出在您以不支持所有方式覆盖默认模板的方式控件的功能。

我建议您使用 Blend 来获取默认的 HamburgerMenu.ContentTemplate，然后根据您的需要对其进行编辑，不要做太多更改(请记住用作模板的控件名称可能具有重要意义，因此请小心编辑内容)。

如果您不知道如何使用 Blend 来获取控件的模板，这里有一个简单的教程，描述在 documentation of Telerik controls 中。 (别担心，它对所有控件都一样)。您只需创建一个 HamburgerMenu.ContentTemplate 的副本，将其粘贴到您的应用程序中，就可以开始了(编辑)。