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

时间:2017-09-09 18:35:16

标签: c# wpf xaml caliburn.micro mahapps.metro

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

我创建了一个名为'MainView'的视图,其中包含HamburgerMenu个MahApps。 我的问题是数据绑定在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>

和各自的视图模型代码是:

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下的查看框架。 与System Status视图一样,SystemStatusView也是如此 和收件箱视图是InboxView。

如果我不使用HamburgerMenu.ContentTemplate,我的代码工作正常(它会更改框架中的视图并更改标题标签)。但我想使用HamburgerMenu.ContentTemplate来处理HamburgerMenu

谢谢!

1 个答案:

答案 0 :(得分:2)

如果你没有使用HamburgerMenu.ContentTemplate它可以正常工作,但是当你这样做时停止工作,问题可能在于你以不支持控件所有功能的方式覆盖默认模板。

我建议您使用Blend来获取默认的HamburgerMenu.ContentTemplate,然后根据需要进行编辑,而不要进行太多更改(请记住,用作模板的控件名称可能具有至关重要的意义,所以要小心你在编辑什么。)

如果您不知道如何使用Blend来获取控件的模板,请参阅documentation of Telerik controls中描述的简单教程(不用担心,它对所有控件都有效)。您只需要创建HamburgerMenu.ContentTemplate的副本,将其粘贴到您的应用程序中,就可以进行(编辑)。