2017-09-09 20 views
8

Tôi đang tạo một ứng dụng bằng cách sử dụng Caliburn.Micro (để liên kết dữ liệu dễ dàng và các công cụ) và MahApps.Metro (để thiết kế).C# wpf caliburn.Micro MahApps HamburgerMenu.ContentTemplate ràng buộc dữ liệu không hoạt động

Tôi đã tạo tên Chế độ xem 'MainView' có HamburgerMenu của MahApps. Vấn đề của tôi là ràng buộc dữ liệu đang hoạt động tốt dưới HamburgerMenu.ContentTemplate thẻ

Đây là HamburgerMenu.ContentTemplate xaml của tôi.

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

và tương ứng xem mã mô hình là:

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

    } 
} 

Tôi muốn thay đổi Xem trong khung dưới HamburgerMenu.ContentTemplate khi tôi nhấp vào mục menu. Giống như chế độ xem Trạng thái hệ thống là SystemStatusView và chế độ xem Hộp thư đến là InboxView.

Mã của tôi hoạt động tốt (nó cũng thay đổi chế độ xem trong khung và thay đổi nhãn Tiêu đề) nếu tôi không sử dụng HamburgerMenu.ContentTemplate. Nhưng tôi muốn sử dụng HamburgerMenu.ContentTemplate để làm việc với HamburgerMenu.

Cảm ơn!

+1

Bạn cần cụ thể hơn về ** những gì không hoạt động **. Bạn đang nhìn thấy hành vi nào khi sử dụng 'ContentTemplate'? Tôi đã sao chép mã của bạn tốt nhất có thể và khi tôi nhấp vào một mục trình đơn, khung sẽ điều hướng đến kiểu xem dự kiến. –

Trả lời

2

Nếu nó hoạt động tốt nếu bạn không sử dụng HamburgerMenu.ContentTemplate, nhưng ngừng hoạt động khi bạn làm, vấn đề có thể là do bạn ghi đè mẫu mặc định theo cách không hỗ trợ tất cả các chức năng của điều khiển.

Tôi khuyên bạn nên sử dụng Blend để có được mặc định HamburgerMenu.ContentTemplate, sau đó chỉ cần chỉnh sửa theo nhu cầu của bạn mà không thay đổi quá nhiều (lưu ý rằng tên của các điều khiển được sử dụng làm mẫu có thể có ý nghĩa quan trọng. cẩn thận những gì bạn đang chỉnh sửa).

Nếu bạn không biết cách sử dụng Blend để lấy mẫu kiểm soát, dưới đây là hướng dẫn đơn giản được mô tả trong documentation of Telerik controls (đừng lo lắng, nó hoạt động tương tự cho tất cả các điều khiển). Bạn chỉ cần tạo bản sao của một HamburgerMenu.ContentTemplate, dán nó vào ứng dụng của bạn và bạn tốt để đi (chỉnh sửa).

Các vấn đề liên quan