2017-09-09 121 views
8

Caliburn.Micro (kolay veri bağlama ve malzeme için) ve MahApps.Metro (tasarım için) kullanarak bir uygulama yapıyorum.C# wpf caliburn.Micro MahApps HamburgerMenu.ContentTemplate veri bağlama çalışmıyor

MahApps adlı HamburgerMenu olan bir 'MainView' Görünüm adı oluşturdum. Benim sorun veri bağlama HamburgerMenu.ContentTemplate etiketi altında çalışıyor

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

ve ilgili görünüm modeli kodudur:

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

    } 
} 

ben menü öğesi tıkladığımda HamburgerMenu.ContentTemplate altında çerçevede Görünüm değiştirmek istiyorum. Sistem Durumu görünümü gibi SystemStatusView ve Gelen Kutusu görünümü Gelen Kutusu görünümüdür.

HamburgerMenu.ContentTemplate kullanmıyorsam kodum düzgün çalışıyor (çerçevedeki görünümü değiştiriyor ve Başlık etiketini de değiştiriyor). Ama HamburgerMenu ile çalışmak için HamburgerMenu.ContentTemplate kullanmak istiyorum.

Teşekkürler!

+1

** Neyin çalışmadığı hakkında daha spesifik olmanız gerekir **. ContentTemplate'i kullandığınızda hangi davranışı görüyorsunuz? Kodunuzu elimden geldiğince çoğaltdım ve bir menü öğesini tıkladığımda çerçeve beklenen görünüm modeline gider. –

cevap

2

HamburgerMenu.ContentTemplate'u kullanmıyorsanız iyi çalışıyor ancak yaptığınız zaman çalışmayı durdurursa, sorun muhtemelen varsayılan şablonu bir denetimin tüm işlevlerini desteklemeyen bir şekilde üzerine yazmanızdır.

Varsayılan HamburgerMenu.ContentTemplate'u almak için Blend'i kullanmanızı öneririm, sonra çok fazla değişiklik yapmadan sadece gereksinimlerinize göre düzenleyin (şablon olarak kullanılan denetimlerin adlarının çok önemli bir anlamı olabileceğini unutmayın, bu nedenle Ne düzenlediğinize dikkat edin).

Kontrol şablonunuzu almak için Blend'i nasıl kullanacağınızı bilmiyorsanız, burada documentation of Telerik controls'da açıklanan basit bir öğretici (endişelenmeyin, tüm denetimler için aynı şekilde çalışır). Sadece bir HamburgerMenu.ContentTemplate kopyasını yaratmanız, uygulamanıza yapıştırmanız ve devam etmeniz (düzenleme) yapmanız yeterlidir.