2017-09-09 35 views
8

私はCaliburn.Micro(簡単なデータバインディングやもの用)とMahApps.Metro(設計用)を使用してアプリケーションを作成しています。C#wpf caliburn.Micro MahApps HamburgerMenu.ContentTemplateデータバインディングが機能しません。

私はMahAppsのHamburgerMenuを持つビュー名 'MainView'を作成しました。 私の問題は、データバインディングが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下のフレームに表示を変更したいです。 Like System StatusビューはSystemStatusView で、InboxビューはInboxViewです。

HamburgerMenu.ContentTemplateを使用しないと、コードが正常に動作しています(フレーム内のビューが変更され、ヘッダーラベルも変更されます)。しかし、HamburgerMenuで作業するにはHamburgerMenu.ContentTemplateを使用します。

ありがとうございます!

+1

あなたは**動作していないものについてより具体的にする必要があります**。 'ContentTemplate'を使用すると、どのような動作が見られますか?できるだけコードを再現しました。メニュー項目をクリックすると、フレームが予想されるビューモデルに移動します。 –

答えて

2

HamburgerMenu.ContentTemplateを使用しないと正常に動作しても機能しなくなる場合は、コントロールのすべての機能をサポートしていない方法でデフォルトテンプレートを上書きしている可能性があります。

Blendを使用してデフォルトのHamburgerMenu.ContentTemplateを取得してから、必要に応じて編集してください(テンプレートとして使用されるコントロールの名前は重要な意味を持つことに注意してください)。あなたが編集しているものに注意してください)。

コントロールのテンプレートを取得するためにBlendを使用する方法がわからない場合は、documentation of Telerik controlsで説明されている簡単なチュートリアルがあります(これはすべてのコントロールで同じです)。 HamburgerMenu.ContentTemplateのコピーを作成してアプリケーションに貼り付けるだけでよいのですが、編集(編集)するのがいいです。