ViewModel（WPF）からUI要素を参照する方法は？

Question

これは皆さんにとっては簡単かもしれませんが、WPFで始まったばかりで、常に私の心はWinformsの観点から考えており、常に間違っています。

とにかくここに私の状況です。私は私の見解モデルでこのラベルを呼び出すしようとしているが、方法がわからないのです

<Label Name="IsImageValid" Content="Image Created" Margin="0,7,-1,0" Style="{StaticResource LabelField}" 
        Grid.ColumnSpan="2" Grid.Row="15" Width="90" Height="28" Grid.RowSpan="2" 
        Grid.Column="1" IsEnabled="True" 
        Visibility="{Binding IsImageValid,Converter={StaticResource BooleanToVisibilityConverter}}" /> 

UserControl 

<UserControl.Resources> 

    <Converters:BooleanToVisibilityConverter x:Key="visibilityConverter"></Converters:BooleanToVisibilityConverter> 

    <!-- Error Handling --> 
    <Converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /> 

    <Converters:ErrorConverter x:Key="errorConverter"/> 
    <ControlTemplate x:Key="ErrorTemplate"> 
     <Border BorderBrush="Red" BorderThickness="2"> 
      <AdornedElementPlaceholder /> 
     </Border> 
    </ControlTemplate> 
    <Style x:Key="textBoxInError" TargetType="{x:Type TextBox}"> 
     <Style.Triggers> 
      <Trigger Property="Validation.HasError" Value="true"> 
       <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors), Converter={StaticResource errorConverter}}"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
    <Style x:Key="comboBoxInError" TargetType="{x:Type ComboBox}"> 
     <Style.Triggers> 
      <Trigger Property="Validation.HasError" Value="true"> 
       <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors), Converter={StaticResource errorConverter}}"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</UserControl.Resources> 

レーベル：私は以下のように私の見解でラベルを持っています。

次のような条件に基づいてメッセージを表示するために、ラベルを使用して、ビューモデルで次のメソッドを使用しています。

ViewModel 

public class MetadataViewModel : NotificationObject, IMetadataViewModel 
{ 
    #region :: Properties :: 

    private IEventAggregator eventAggregator; 
    private IImageResizerService imageResizer; 

    private string headerInfo; 
    public string HeaderInfo 
    { 
     get 
     { 
      return headerInfo; 
     } 
     set 
     { 
      if (this.headerInfo != value) 
      { 
       this.headerInfo = value; 
       this.RaisePropertyChanged(() => this.HeaderInfo); 
      } 
     } 
    } 

    public ICommand SaveCommand 
    { 
     get; 
     private set; 
    } 

    public ICommand CloseCommand 
    { 
     get; 
     private set; 
    } 

    public ICommand DeleteCommand 
    { 
     get; 
     private set; 
    } 

    public ICommand SubmitCommand 
    { 
     get; 
     private set; 
    } 

    public ICommand UnSubmitCommand 
    { 
     get; 
     private set; 
    } 

    public ICommand LocationSearchCommand 
    { 
     get; 
     private set; 
    } 

    public ICommand SubjectSearchCommand 
    { 
     get; 
     private set; 
    } 

    public ICommand RemoveLocationCommand 
    { 
     get; 
     private set; 
    } 

    public ICommand RemoveSubjectCommand 
    { 
     get; 
     private set; 
    } 

    private StoryItem selectedStory; 
    public StoryItem SelectedStory 
    { 
     get 
     { 
      return this.selectedStory; 
     } 
     set 
     { 
      if (this.selectedStory != value) 
      { 
       this.selectedStory = value; 
       this.RaisePropertyChanged(() => this.SelectedStory); 

       // raise dependencies 
       this.RaisePropertyChanged(() => this.CanSave); 
       this.RaisePropertyChanged(() => this.CanUnSubmit); 
       this.RaisePropertyChanged(() => this.CanDelete); 

      } 
     } 
    } 


    public List<Program> ProgramList 
    { 
     get; 
     private set; 
    } 

    public List<Genre> GenreList 
    { 
     get; 
     private set; 
    } 

    public List<Copyright> CopyrightList 
    { 
     get; 
     private set; 
    } 

    public bool CanSave 
    { 
     get 
     { 
      bool canSave = false; 

      if (this.SelectedStory.IsLockAvailable) 
      { 
       if (!this.SelectedStory.Submitted) 
       { 
        canSave = true; 
       } 
      } 

      return canSave; 
     } 
    } 

    public bool CanDelete 
    { 
     get 
     { 
      bool canDelete = false; 

      if (this.SelectedStory.IsLockAvailable) 
      { 
       if (!this.SelectedStory.Submitted) 
       { 
        canDelete = true; 
       } 
      } 

      return canDelete; 
     } 
    } 



    public bool CanUnSubmit 
    { 
     get 
     { 
      bool canUnSubmit = false; 

      if (this.SelectedStory.IsLockAvailable) 
      { 
       if (this.SelectedStory.Submitted) 
       { 
        canUnSubmit = true; 
       } 
      } 

      return canUnSubmit; 
     } 
    } 

    #endregion 

    #region :: Contructor :: 

    [ImportingConstructor] 
    public MetadataViewModel(
      IMetadataController metadataController, 
      IGatewayService gateway, 
      INavigationService navigator, 
      IImageResizerService imageResizer, 
      IEventAggregator eventAggregator 
     ) 
    { 
     this.eventAggregator = eventAggregator; 
     this.imageResizer = imageResizer; 

     // populate drop-down lists 
     this.ProgramList = gateway.GetPrograms(true); 
     this.GenreList = gateway.GetGenres(); 
     this.CopyrightList = gateway.GetCopyrights(); 

     // add dummy values so the user can de-select 
     this.ProgramList.Add(new Program()); 
     this.GenreList.Add(new Genre()); 
     this.CopyrightList.Add(new Copyright()); 

     // commands 
     this.SaveCommand = metadataController.SaveCommand; 
     this.CloseCommand = metadataController.CloseCommand; 
     this.DeleteCommand = metadataController.DeleteCommand; 
     this.SubmitCommand = metadataController.SubmitCommand; 
     this.UnSubmitCommand = metadataController.UnSubmitCommand; 



     this.LocationSearchCommand = new DelegateCommand<string>(this.LocationSearch); 
     this.SubjectSearchCommand = new DelegateCommand<string>(this.SubjectSearch); 
     this.RemoveLocationCommand = new DelegateCommand<Topic>(this.RemoveLocation); 
     this.RemoveSubjectCommand = new DelegateCommand<Topic>(this.RemoveSubject); 

     // events 
     this.eventAggregator.GetEvent<StorySelectedEvent>().Subscribe(OnStorySelected, ThreadOption.UIThread); 
     this.eventAggregator.GetEvent<AddLocationEvent>().Subscribe(OnAddLocation, ThreadOption.UIThread); 
     this.eventAggregator.GetEvent<AddSubjectEvent>().Subscribe(OnAddSubject, ThreadOption.UIThread); 
     this.eventAggregator.GetEvent<CommandCompletedEvent>().Subscribe(OnCommandCompleted, ThreadOption.UIThread); 
     this.eventAggregator.GetEvent<ImageResizeCompletedEvent>().Subscribe(OnImageResizeCompleted, ThreadOption.UIThread); 

     this.Initialize(); 
    } 

    #endregion 

    private void OnStorySelected(StoryItem selectedStory) 
    { 
     if (this.selectedStory != null) 
     { 
      this.Initialize(); 

      // override the initialized values 
      this.SelectedStory = selectedStory; 
      this.SelectedStory.HaveChanged = false; 
      this.HeaderInfo = "Edit"; 
     } 
    } 

    public void OnAddLocation(Topic topic) 
    { 
     if (topic != null) 
     { 
      if (!this.SelectedStory.Locations.Contains(topic)) 
      { 
       this.SelectedStory.Locations.Add(topic); 
       this.RaisePropertyChanged(() => this.SelectedStory.Locations); 
      } 
     } 
    } 

    public void OnAddSubject(Topic topic) 
    { 
     if (topic != null) 
     { 
      if (!this.SelectedStory.Subjects.Contains(topic)) 
      { 
       this.SelectedStory.Subjects.Add(topic); 
       this.RaisePropertyChanged(() => this.SelectedStory.Subjects); 
      } 
     } 
    } 

    private void OnCommandCompleted(string commandType) 
    { 
     if (commandType == CommandTypes.MetadataEntry) 
     { 
      this.Initialize(); 
     } 
    } 

    private void OnImageResizeCompleted(bool isSuccessful) 
    { 
     IsImageValid = false; 
     if (isSuccessful) 
     { 

      this.SelectedStory.KeyframeImages = true; 
      IsImageValid = true; 
     } 
     else 
     { 
      this.SelectedStory.KeyframeImages = false; 
      IsImageValid=false; 
     } 
    } 

    private void Initialize() 
    { 
     this.SelectedStory = new StoryItem(); 
     this.HeaderInfo = "Create"; 
    } 

    private void LocationSearch(object topicType) 
    { 
     this.eventAggregator.GetEvent<LocationSearchEvent>().Publish(null); 
    } 

    private void SubjectSearch(object topicType) 
    { 
     this.eventAggregator.GetEvent<SubjectSearchEvent>().Publish(null); 
    } 

    private void RemoveLocation(Topic selected) 
    { 
     if (selected != null) 
     { 
      // remove the primary too 
      if (this.SelectedStory.PrimaryLocation != null) 
      { 
       if (string.Equals(this.SelectedStory.PrimaryLocation.FullName, selected.FullName, StringComparison.InvariantCultureIgnoreCase)) 
       { 
        this.SelectedStory.PrimaryLocation = new Topic(); 
       } 
      } 

      bool isSuccessful = this.SelectedStory.Locations.Remove(selected); 
      if (isSuccessful) 
      { 
       this.RaisePropertyChanged(() => this.SelectedStory.Locations); 
      } 
     } 
    } 

    private void RemoveSubject(Topic selected) 
    { 
     if (selected != null) 
     { 
      // remove the primary too 
      if (this.SelectedStory.PrimarySubject != null) 
      { 
       if (string.Equals(this.SelectedStory.PrimarySubject.FullName, selected.FullName, StringComparison.InvariantCultureIgnoreCase)) 
       { 
        this.SelectedStory.PrimarySubject = new Topic(); 
       } 
      } 

      bool isSuccessful = this.SelectedStory.Subjects.Remove(selected); 
      if (isSuccessful) 
      { 
       this.RaisePropertyChanged(() => this.SelectedStory.Subjects); 
      } 
     } 
    } 
} 

     private booly _isImageValid; 

     public bool IsImageValid 
     { 
     get 
     { 
      return _isImageValid; 
     } 
     set 
     { 
      _isImageValid = value; 
      this.RaisePropertyChanged(() => this.IsImageValid); 
     } 
    } 
} 

正に、私はどのようにビューがバインディングを理解するのか分かりません。

Answer 1

標準的なアプローチは、あなたのViewModelで「IsImageValid」のようなブール型プロパティを持つことである...そして、あなたのXAMLで、BooleanToVisibilityConverter http://msdn.microsoft.com/en-us/library/system.windows.controls.booleantovisibilityconverter.aspx

<UserControl.Resources> 
    <BooleanToVisibilityConverter 
     x:Key="BooleanToVisibilityConverter" /> 
</UserControl.Resources> 
Then use it in one or more bindings like this: 

<Label Visibility="{Binding IsImageValid, 
     Converter={StaticResource BooleanToVisibilityConverter}}" 
    ......... /> 

Answer 2

と、そのプロパティに、ラベルのVisibilityプロパティをバインドViewModelからViewを見る必要はありませんが、MVVMパターンの基本原理です。ビューはVMについて知っていますが、VMはビューについては認識しません。代わりに、あなたは@ JeffN825として提案することができます、少なくとも私もこれをお勧めしたいと思います。

Answer 3

最初に投稿するのはthisです。

あなたがしたいが、あなたのラベルにいくつかのテキストを表示する場合は、あなたは、次の手順を実行する必要があります。

• があなたのViewModelにをINotifyPropertyChangedの実装し、イベントを発生させ、あなたのViewModel
• にプロパティを追加プロパティの変更が
• の場合、DataContextをViewmodelインスタンスに設定します。

• あなたの財産にXAMLでをバインド

thatsのすべての作成;）

Answer 4

は、ユーザーコントロールのプロパティに以下を追加します。割り当てるため

xmlns:VM="clr-namespace:<ProjectName>.ViewModels" //this place throws exception,what is <ProjectName> ? 

をDataContextが割り当てられていない場合、UserControlのDataContextは次のコードを使用します。

<UserControl.DataContext>  //where to add this part ? 
    <VM:MyViewModel> 
</UserControl.DataContext> 

バインド次のようにラベルの可視性：

Visibility="{Binding IsImageValid}" //this is done 

VMが実装する必要が継承されているから、あなたのViewModelやViewModelBaseがINotifyPropertyChangedのインタフェース：

namespace MyApp.ViewModels   //this i have to do it at xaml.cs file or suppose to be in viewmodel ? 
{ 
    public class MyViewModel : INotifyPropertyChanged 
    {... 
    ... 
    } 
} 

VMのデータメンバーとプロパティを次のように宣言します。

private System.Windows.Visibility _isImageValid; //add this code in my viewmodel 

public System.Windows.Visibility IsImageValid 
{ 
    get 
    { 
     return _isImageValid; 
    } 
    set 
    { 
     _isImageValid = value; 
     this.RaisePropertyChanged(() => this.IsImageValid); 
    } 
}