如何从视图模型 (WPF) 引用 UI 元素
本文关键字：引用 UI 元素 WPF 视图 模型 | 更新日期: 2023-09-27 18:33:39
这对
你们来说可能很简单，但我刚刚开始在 WPF 中，而且我的头脑总是从 Winforms 的角度思考，而且一直都是错误的。
无论如何，这是我的情况。 我的观点中有如下标签：
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>
标签
<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}}" />
我正在尝试在我的视图模型中调用此标签，但不确定如何调用。
我在视图模型中有以下方法，计划根据如下所示的条件使用标签显示一些消息。
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);
}
}
}
老实说，我不知道视图将如何理解绑定。
一种标准的方法是在视图模型中有一个布尔属性，如"IsImageValid"。然后在 XAML 中，使用布尔值到可见性转换器 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}}"
......... />
请先阅读这篇文章。
如果要在标签中显示一些文本，则必须执行以下步骤：
- 将属性添加到视图模型
- 在您的视图模型中实现 INotifyPropertyChanged 并在属性更改时引发事件
- 在您的视图中，将数据上下文设置为您的视图模型实例
-
在 xaml 中创建到属性的绑定
仅此而已;)
您不必从 ViewModel 查看视图，这是 MVVM 模式背后的基本原则。View 知道 VM，而 VM 不知道 View。相反，您可以按照@JeffN825建议进行操作，至少我也建议您这样做。
将以下内容添加到用户控件属性：
xmlns:VM="clr-namespace:<ProjectName>.ViewModels" //this place throws exception,what is <ProjectName> ?
若要将数据上下文分配给用户控件，请使用以下代码（如果尚未分配数据上下文）：
<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);
}
}