2016-10-27 2 views
0

ParentViewModelにはReactiveListChildViewModelsが含まれています。私はそれをListViewにバインドして、ChildViewsと表示したいと思います。 ChildViewLabelにいくつかのテキストを結合し、状態の列挙型に基づいてImageリソース設定:シンプルなコンテナChildViewModelsビューモデルのReactiveListをビューモデルのビューを含むListViewにバインドする方法

public class ParentViewModel : ReactiveObject 
{ 
    public ReactiveList<ChildViewModel> Children { get; } 
     = new ReactiveList<ChildViewModel>(); 
} 

ChildViewModel.csため

ParentViewModel.csをいくつかのテキストとStatusを持っています

public class ChildViewModel : ReactiveObject 
{ 
    public string SomeText { get; set; } 

    public enum Status 
    { 
     Unknown, 
     Known 
    } 

    public Status CurrentStatus { get; set; } = Status.Unknown; 
} 

親ビューxデータテンプレートにChildViewを使用してListViewをラップするamlUserControlを使用します。私はDataTemplateViewModel="{Binding}"を必ず追加しました。

<UserControl x:Class="MyProject.UI.ParentView" 
     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:vm="clr-namespace:MyProject.View_Models" 
     xmlns:ui="clr-namespace:MyProject.UI"> 
    <ListView x:Name="ChildList" BorderThickness="0"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
      <!--I have also tried the following line, didn't work --> 
      <!--<DataTemplate DataType="{x:Type vm:ChildViewModel}">--> 
       <ui:ChildView ViewModel="{Binding}"/> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 
</UserControl> 

ParentView.xaml.csはそのParentViewModelのための依存関係プロパティを作成し、ビューモデルのChildrenたchildList ListViewコントロール

Image
public partial class ParentView : UserControl, IViewFor<ParentViewModel> 
{ 
    public static readonly DependencyProperty ViewModelProperty 
     = DependencyProperty.Register(
      "ViewModel", 
      typeof(ParentViewModel), 
      typeof(ParentView)); 

    object IViewFor.ViewModel 
    { 
     get { return ViewModel; } 
     set { ViewModel = (ParentViewModel)value; } 
    } 

    public ParentViewModel ViewModel 
    { 
     get { return (ParentViewModel)GetValue(ViewModelProperty); } 
     set 
     { 
      SetValue(ViewModelProperty, value); 
      BindToViewModel(value); 
     } 
    } 

    private void BindToViewModel(ParentViewModel viewModel) 
    { 
     this.OneWayBind(viewModel, vm => vm.Children, v => v.ChildList.ItemsSource); 
    } 
} 

ChildView.xamlシンプルUserControlへと結合し、 a Label

<UserControl x:Class="MyProject.UI.ChildView" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <StackPanel Orientation="Horizontal"> 
     <Image Name="StatusIcon" Margin="2" /> 
     <Label Name="DisplayName" /> 
    </StackPanel> 
</UserControl> 

public partial class ChildView : UserControl, IViewFor<ChildViewModel> 
{ 
    public static readonly DependencyProperty ViewModelProperty 
     = DependencyProperty.Register(
      "ViewModel", 
      typeof(ChildViewModel), 
      typeof(ChildView)); 

    public ChildView() 
    { 
     InitializeComponent(); 
    } 

    object IViewFor.ViewModel 
    { 
     get { return ViewModel; } 
     set { ViewModel = (ChildViewModel)value; } 
    } 

    public ChildViewModel ViewModel 
    { 
     get { return (ChildViewModel)GetValue(ViewModelProperty); } 
     set 
     { 
      SetValue(ViewModelProperty, value); 
      BindToViewModel(value); 
     } 
    } 

    private void BindToViewModel(ChildViewModel viewModel) 
    { 
     viewModel 
      .WhenAnyValue(vm => vm.CurrentStatus) 
      .Subscribe(status => 
      { 
       // set StatusIcon's image based on status 
      }); 

     this.Bind(viewModel, vm => vm.DisplayName, v => v.SomeText); 
    } 
} 

画像データをChildViewModelをバインドし、設定

ChildView.xaml.cs私はViewModelにプロパティがヒットかどうかを確認するためにChildViewにブレークポイントを設定しているが、彼らは決してしません。 ChildViewModelsParentVieWModel.Childrenに追加すると、ChildViewが作成されますが、正しくバインドされません。 ChildrenCollectionChangedイベントを購読して手作業でバインディングを設定することができましたが、これを適切なXAML/ReactiveUIの方法で行いたいと思います。私は何が欠けていますか?

答えて

0

私はあなたのChildViewModelであなたのプロパティを完全に設定して、ChildViewが購読できるViewModelの変更を引き起こす必要があると思います。 ViewModels documentationを参照してください。

string someText ; 
public string SomeText { 
    get { return someText; } 
    set { this.RaiseAndSetIfChanged(ref someText , value); } 
} 

Status currentStatus; 
public Status CurrentStatus { 
    get { return currentStatus; } 
    set { this.RaiseAndSetIfChanged(ref currentStatus, value); } 
} 

またはいずれか一方または両方が読み取り専用の場合。

readonly ObservableAsPropertyHelper<string> someText; 
public string SomeText{ 
    get { return someText.Value; } 
} 

readonly ObservableAsPropertyHelper<Status> currentStatus; 
public Status CurrentStatus{ 
    get { return currentStatus.Value; } 
} 
+0

これは素晴らしい動作です!あなたのご意見ありがとうございます。 –

関連する問題