Question

我正在尝试使用MahApps.Metro HamburgerMenu控件创建一个简单的应用。到目前为止，我已经按照示例中的说明设置了我的主窗口：

<Controls:MetroWindow x:Class="HamburgerDemo.MainWindow"
        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"
        xmlns:local="clr-namespace:HamburgerDemo"
        xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Controls:MetroWindow.Resources>
        <DataTemplate x:Key="HamburgerMenuItem" DataType="{x:Type Controls:HamburgerMenuGlyphItem}">
            <Grid Height="48">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="48" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <TextBlock Margin="12"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Text="{Binding Glyph}" />
                <TextBlock Grid.Column="1"
                           VerticalAlignment="Center"
                           FontSize="16"
                           Text="{Binding Label}" />
            </Grid>
        </DataTemplate>
    </Controls:MetroWindow.Resources>
    <Grid>
        <Controls:HamburgerMenu ItemTemplate="{StaticResource HamburgerMenuItem}">
            <Controls:HamburgerMenu.ItemsSource>
                <Controls:HamburgerMenuItemCollection>
                    <Controls:HamburgerMenuGlyphItem Glyph="1" Label="Page 1"/>
                    <Controls:HamburgerMenuGlyphItem Glyph="2" Label="Page 2"/>
                </Controls:HamburgerMenuItemCollection>
            </Controls:HamburgerMenu.ItemsSource>
        </Controls:HamburgerMenu>
    </Grid>
</Controls:MetroWindow>

我希望每个菜单按钮都链接到特定的Page，点击时会加载到Frame，但我无法弄清楚如何执行此操作。

我注意到HamburgerMenuGlyphItem确实有一个属性TargetPageType，我想这可能是关键，但我不知道如何使用它。

如果有更好的方法使用此控件或不同的设计模式加载内容，我很乐意听到它们。

Answer 1

如果我理解你的话，我在代码隐藏中这样做了。如果不是你想告诉我的意思！

<强> MainWindow.xaml

<Window x:Class="Stackoverflow.MainWindow"
        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"
        xmlns:local="clr-namespace:Stackoverflow"
        mc:Ignorable="d"
        xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
        Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <DataTemplate x:Key="HamburgerMenuItem" DataType="{x:Type Controls:HamburgerMenuGlyphItem}">
      <Grid Height="48">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="48" />
          <ColumnDefinition />
          <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Margin="12"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Text="{Binding Glyph}" />
        <TextBlock Grid.Column="1"
                           VerticalAlignment="Center"
                           FontSize="16"
                           Text="{Binding Label}" />
        <Button Grid.Column="2" Click="Button_Click" Tag="{Binding Tag}">Go</Button>
      </Grid>
    </DataTemplate>
  </Window.Resources>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Controls:HamburgerMenu ItemTemplate="{StaticResource HamburgerMenuItem}">
      <Controls:HamburgerMenu.ItemsSource>
        <Controls:HamburgerMenuItemCollection>
          <Controls:HamburgerMenuGlyphItem Glyph="1" Label="Page 1" Tag="Page1.xaml"/>
          <Controls:HamburgerMenuGlyphItem Glyph="2" Label="Page 2" Tag="Page2.xaml"/>
        </Controls:HamburgerMenuItemCollection>
      </Controls:HamburgerMenu.ItemsSource>
    </Controls:HamburgerMenu>

    <Frame x:Name="_TheFrame" Grid.Column="2"/>
  </Grid>
</Window>

MainWindow.xaml.cs （代码隐藏）

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        string targetView = ((Button)sender).Tag.ToString();
        _TheFrame.Source = new Uri(targetView, UriKind.Relative);
    }
}

<强>的Page1.xaml

<Page x:Class="Stackoverflow.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Stackoverflow"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="Page1">
  <Grid>
    <TextBlock Text="PAGE 1" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
  </Grid>
</Page>

<强> Page2.xaml

<Page x:Class="Stackoverflow.Page2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Stackoverflow"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="Page2">
  <Grid>
    <TextBlock Text="PAGE 2" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
  </Grid>
</Page>

Answer 2

我在另一个回答，以便更容易阅读。

另一种方法是使用MVVM。为此，我想出了这个。如果它适合你，你想要一些解释告诉我。我现在有点懒，所以我也使用Prism框架来获取DelegateCommand和PropertyChanged基础对象。

<强> MainWindow.xaml

<Controls:MetroWindow x:Class="Stackoverflow.MainWindow"
        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"
        xmlns:local="clr-namespace:Stackoverflow"
        mc:Ignorable="d"
        BorderThickness="2"
        BorderBrush="DarkGray"
        xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
        Title="MainWindow" Height="350" Width="525">
  <Window.DataContext>
    <local:MainWindowViewModel/>
  </Window.DataContext>
  <Window.Resources>
    <DataTemplate x:Key="HamburgerMenuItem" DataType="{x:Type Controls:HamburgerMenuGlyphItem}">
      <Grid Height="48">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="48" />
          <ColumnDefinition />
          <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Margin="12"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Text="{Binding Glyph}" />
        <TextBlock Grid.Column="1"
                           VerticalAlignment="Center"
                           FontSize="16"
                           Text="{Binding Label}" />
        <Button Grid.Column="2" 
                Command="{Binding DataContext.NavigateCommand, RelativeSource={RelativeSource AncestorType=Controls:MetroWindow}}" 
          CommandParameter="{Binding Tag}">Go</Button>
      </Grid>
    </DataTemplate>
  </Window.Resources>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Controls:HamburgerMenu ItemTemplate="{StaticResource HamburgerMenuItem}">
      <Controls:HamburgerMenu.ItemsSource>
        <Controls:HamburgerMenuItemCollection>
          <Controls:HamburgerMenuGlyphItem Glyph="1" Label="Page 1" Tag="Page1.xaml"/>
          <Controls:HamburgerMenuGlyphItem Glyph="2" Label="Page 2" Tag="Page2.xaml"/>
        </Controls:HamburgerMenuItemCollection>
      </Controls:HamburgerMenu.ItemsSource>
    </Controls:HamburgerMenu>

    <Frame Grid.Column="2" Source="{Binding FrameSource}"/>
  </Grid>
</Controls:MetroWindow>

<强> MainWindowViewModel.cs

using Microsoft.Practices.Prism.Commands;
using Microsoft.Practices.Prism.Mvvm;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace Stackoverflow
{
    public class MainWindowViewModel : BindableBase
    {
        private string _FrameSource;

        public MainWindowViewModel()
        {
            NavigateCommand = new DelegateCommand<string>(OnNavigateCommandExecute);
        }

        public string FrameSource
        {
            get { return _FrameSource; }
            set { SetProperty(ref _FrameSource, value); }
        }

        public ICommand NavigateCommand { get; private set; }

        private void OnNavigateCommandExecute(string frameSource)
        {
            FrameSource = frameSource;
        }
    }
}

如何将框架加载到HamburgerMenu中？

2 个答案: