UWP Community Tookit dynamic HamburgerMenuGlyphItem 레이블

Question

나는 처음 시작한 커뮤니티 툴킷을 사용하여 햄버거 메뉴를 구현했습니다. 이제 메뉴의 항목을 변경하는 기능을 추가하려고합니다. 예를 들어, OptionItem 중 하나에 로그인 상태를 표시하려고합니다. 로그인하지 않으 셨다면 로그인하고 싶다면 로그인을 원하면 로그인하십시오. 나는 표준 X를 추가하는 시도 : 바인딩을 라벨에 있지만 작동하지 않습니다

<controls:HamburgerMenuGlyphItem Label="{x:Bind Path=UserProfileViewModel.UserName}" Tag="SignIn" Glyph="Contact" /> 

사용이 정확한 햄버거 메뉴가 잘 작동 외부 TextBlock의에 같은 바인딩, 사용자 이름은 그들이 로그인하면 표시됩니다

누구나 MenuItems 내에서 바인딩을 구현하는 방법을 알고 계십니까?

Answer 1

을 mm8이 제공하는 솔루션이 실제로 작동합니다. 그러나 그 일을하기 위해 나는 여분의 노력을 기울이지 않고 초기 문제를 해결하는 방법을 발견했습니다. DataTemplate의 TextBlock 바인딩에 Mode = TwoWay (OneWay가 작동 함)를 추가하면 속성이 변경 될 때 업데이트 할 레이블을 가져 오는 문제가 해결되었습니다. 그런 다음 HamburgerMenuGlyphItem 자체의 데이터 바인딩에이 '모드'값 설정이 필요하다는 사실을 발견했습니다. 그 바인딩에 Mode를 추가하면 사용자가 로그인하여 외부 코드가 전혀 필요하지 않을 때 라벨이 업데이트되기 시작합니다.

Answer 2

누구나 MenuItems에서 바인딩을 구현하는 방법을 알고 계십니까?

HamburgerMenu의 ItemsSource를 IEnumerable로 설정하고 ItemTemplate에서 T 유형의 속성에 바인딩 할 수 있습니다.

보기 :

<Page 
x:Class="App1.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:App1" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" 
mc:Ignorable="d"> 
<Page.Resources> 
    <DataTemplate x:Name="ItemTemplate" x:DataType="local:Item"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="48" /> 
       <ColumnDefinition /> 
      </Grid.ColumnDefinitions> 
      <SymbolIcon Grid.Column="0" Symbol="{x:Bind Symbol}" /> 
      <TextBlock Grid.Column="1" Text="{x:Bind Label, Mode=TwoWay}" VerticalAlignment="Center" /> 
     </Grid> 
    </DataTemplate> 
</Page.Resources> 
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <controls:HamburgerMenu x:Name="hamburgerMenuControl" 
          ItemsSource="{Binding Items}" 
          SelectedItem="{Binding SelectedItem, Mode=TwoWay}" 
          ItemTemplate="{StaticResource ItemTemplate}" 
          ItemClick="hamburgerMenuControl_ItemClick"> 
     <ContentControl Content="{Binding SelectedItem.Content}" /> 
    </controls:HamburgerMenu> 
</Grid> 
</Page> 

---

public sealed partial class MainPage : Page 
{ 
    public MainPage() 
    { 
     this.InitializeComponent(); 
     this.DataContext = new ViewModel(); 
    } 

    private void hamburgerMenuControl_ItemClick(object sender, ItemClickEventArgs e) 
    { 
     //workaround to set the SelectedItem property of the view model when a new item is selected 
     (DataContext as ViewModel).SelectedItem = e.ClickedItem as Item; 
    } 
} 

보기 모델 :

public class ViewModel : INotifyPropertyChanged 
{ 
    public ViewModel() 
    { 
     Items.Add(new Item() { Label = "1", Symbol = Symbol.Bullets, Content = "1..." }); 
     Items.Add(new Item() { Label = "2", Symbol = Symbol.Bullets, Content = "2..." }); 
     Items.Add(new Item() { Label = "3", Symbol = Symbol.Bullets, Content = "3..." }); 
     SelectedItem = Items[0]; 
    } 

    public IList<Item> Items { get; } = new List<Item>(); 

    private Item _selectedItem; 
    public Item SelectedItem 
    { 
     get { return _selectedItem; } 
     set { _selectedItem = value; NotifyPropertyChanged(); } 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 
    private void NotifyPropertyChanged([CallerMemberName] string propertyName = "") => 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 
} 

모델 :

public class Item : INotifyPropertyChanged 
{ 
    private string _label; 
    public string Label 
    { 
     get { return _label; } 
     set { _label = value; NotifyPropertyChanged(); } 
    } 

    public Symbol Symbol { get; set; } 
    public object Content { get; set; } 

    public event PropertyChangedEventHandler PropertyChanged; 
    private void NotifyPropertyChanged([CallerMemberName] string propertyName = "") => 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 
} 

모델의 Label 속성을 사용자 이름 또는 옵션 메뉴에 표시 할 항목으로 설정하십시오. 이것은 데이터가 권장 MVVM 디자인 패턴을 사용하여 HamburgerMenu를 바인딩하는 방법입니다.

당신이보기의 XAML 마크 업에 직접 HamburgerMenuGlyphItems을 정의하는 경우에는 같은 뷰의 코드 숨김에서 프로그래밍 방식으로 바인딩을 설정 한 바인딩 할 수 있습니다 : 그래서

<controls:HamburgerMenuGlyphItem x:Name="item" /> 

---

public MainPage() 
    { 
     this.InitializeComponent(); 

     BindingOperations.SetBinding(item, HamburgerMenuGlyphItem.LabelProperty, 
      new Binding() { Path = new PropertyPath(nameof(Username)), Source = this }); 
    } 

    public string Username { get; } = "username..."; 
}