[英]x:Bind ViewModel RelayCommand to a command inside DataTemplate
[英]Bind a WPF RelayCommand from DataTemplate to a Button inside a UserControl
我搜索了很长时间以使用RelayCommands
解决此问题,但找不到类似的解决方案。
问题是我有一个UserControl
,在这个UserConrol
中是一个按钮(代码末尾的btcNotKnown ):
<UserControl x:Class = "Vokabelizer.Views.viewLearnSpeak"
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:local = "clr-namespace:Vokabelizer.Views"
xmlns:conv = "clr-namespace:Vokabelizer.Global.Converter"
xmlns:ccont = "clr-namespace:Vokabelizer.Controls;assembly=Vokabelizer.Controls"
mc:Ignorable = "d"
d:DesignHeight = "300"
d:DesignWidth = "800"
Height = "300"
x:Name = "root">
<UserControl.Resources>
...
</UserControl.Resources>
<Grid Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0">
<Grid.RowDefinitions>
...
</Grid.RowDefinitions>
<!-- The question to answer -->
<Border Grid.Column = "0"
Grid.Row = "0"
Padding = "5"
HorizontalAlignment = "Stretch"
VerticalAlignment = "Stretch">
<TextBlock Text = "{Binding Path=LessonNative}"
Style = "{StaticResource UIText}"/>
</Border>
<!-- Validation content -->
<Border Grid.Column = "0"
Grid.Row = "1"
Padding = "5">
<ToggleButton x:Name = "QnAToggle"
Command = "{Binding Path=cmdValidateOK}"
IsThreeState = "False">
<ToggleButton.Style>
<Style TargetType="ToggleButton" BasedOn="{StaticResource ValidateToggle}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content">
<Setter.Value>
<TextBlock Text = "?"
Style = "{StaticResource UIText}" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content">
<Setter.Value>
<TextBlock Text = "{Binding Path=LessonForeign}"
Style = "{StaticResource UIText}" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</Border>
<!-- Result Evaluation buttons -->
<Border Grid.Column = "0"
Grid.Row = "2">
<Grid>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<ccont:vokButton x:Name = "btcNotKnown"
Command = "{Binding Command, ElementName=root}"
Grid.Column = "0"
Grid.Row = "0"
Content = "Not Known"
Corner = "5"
Style = "{StaticResource ValidateNotKnown}"
Visibility = "{Binding ElementName=QnAToggle, Path=IsChecked, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter=hidden}" />
</Grid>
</Border>
</Grid>
在UserControl
后面的代码中,我定义了一个DependencyProperty
来公开来自UserControl
的命令,因此绑定到UserControls
xaml 中的按钮:
public partial class viewLearnSpeak : UserControl
{
public viewLearnSpeak()
{
InitializeComponent();
}
#region DepProp: Command
public static readonly DependencyProperty CommandProperty = DependencyProperty.Register("Command", typeof(ICommand), typeof(viewLearnSpeak), new PropertyMetadata(null));
public ICommand Command
{
get => (ICommand)GetValue(CommandProperty);
set => SetValue(CommandProperty, value);
}
#endregion
}
此 Usercontrol 现在在 DataTemplate 内的 Window 中使用,这就是问题开始的地方:
<DataTemplate DataType="{x:Type vm:vmLearnSpeak}">
<local:viewLearnSpeak Command="{Binding cmdVMNotKnown, ElementName=root}" />
</DataTemplate>
Window(View)绑定到 ViewModel(vmSession),它应该承载命令代码,因此对于DataTemplate
使用的任何 CustomControl,有效的Customcontrol
可以将其命令绑定到 vmSession ViewModel 中的操作(所有当点击它们托管的特定按钮时, CustomControls
将执行相同的操作)。
后面代码中的命令定义:
#region Command: Not Known
private ICommand _cmdVMNotKnown;
public ICommand cmdVMNotKnown
{
get
{
if (_cmdVMNotKnown == null)
{
_cmdVMNotKnown = new RelayCommand(
param => this.doVMNotKnown(),
param => { return true; }
);
}
return _cmdVMNotKnown;
}
}
protected void doVMNotKnown()
{
}
#endregion
不幸的是,我只能通过这种方式使绑定工作,而关于如何将按钮命令绑定到不绑定到 UserControl 后面的 Viewmodel,而是绑定到以 MVVM 方式托管 Usercontrols ViewModel 的 Viewmodel 而无需依靠委托或其他处理程序...
这是完整的 window XAML(使用 DataTemplate 的 ContentControl 在最后):
<Window x:Class = "Vokabelizer.Views.wndSession"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local = "clr-namespace:Vokabelizer.Views"
xmlns:res = "clr-namespace:Vokabelizer.Resources"
xmlns:vm = "clr-namespace:Vokabelizer.ViewModels"
mc:Ignorable = "d"
Title = "{x:Static res:Strings.wndLearnTitle}"
Height = "410"
Width = "800"
ResizeMode = "NoResize"
x:Name = "root">
<Window.DataContext>
<vm:vmSession />
</Window.DataContext>
<Window.Resources>
<DataTemplate DataType="{x:Type vm:vmLearnSpeak}">
<local:viewLearnSpeak Command="{Binding cmdVMNotKnown, ElementName=root}" />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:vmLearnWrite}">
<local:viewLearnWrite />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:vmLearnListen}">
<local:viewLearnListen />
</DataTemplate>
</Window.Resources>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "*" />
<ColumnDefinition Width = "Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height = "50" />
<RowDefinition Height = "300" />
</Grid.RowDefinitions>
<!-- Title description -->
<TextBlock x:Name="txtModeDescription" Text="{Binding LearnTitle}"
HorizontalAlignment="Left" VerticalAlignment="Center"
Grid.Column="0" Grid.ColumnSpan="1"
Grid.Row="0" Grid.RowSpan="1"
Margin="0, 0, 30, 0" Foreground="DarkGray"
FontWeight="Bold" FontSize="18" FontFamily="Arial Black" />
<!-- Progress Slider -->
<Slider x:Name="sliderProgress"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Grid.Column="1" Grid.ColumnSpan="1"
Grid.Row="0" Grid.RowSpan="1"
Minimum="0" Maximum="11" />
<!-- Title status -->
<TextBlock x:Name="txtBatchAdvancement" Text="{Binding LearnProgressBatch}"
HorizontalAlignment = "Right" VerticalAlignment = "Center"
Grid.Column = "3" Grid.ColumnSpan = "1"
Grid.Row = "0" Grid.RowSpan = "1"
Margin = "10, 0, 0, 0"/>
<Border Grid.Row = "1"
Grid.Column = "0"
HorizontalAlignment = "Center"
VerticalAlignment = "Center"
Padding = "0">
<Image Source = "Demo.png"
Height = "300"
Width = "300"
HorizontalAlignment = "Center"
VerticalAlignment = "Center" />
</Border>
<ContentControl Content = "{Binding learningViewModel}"
Grid.Row = "1" Grid.RowSpan="1"
Grid.Column = "1" Grid.ColumnSpan="2"
Height = "300"
Margin = "20, 0, 20, 0"/>
</Grid>
这里是 Window ViewModel 中为 DataTemplate 公开 UserControl ViewModel 的部分:
private ILearnVM _learningViewModel;
/// <summary>
/// The Learning Provider View Model
/// </summary>
public ILearnVM learningViewModel
{
get => this._learningViewModel;
private set
{
this._learningViewModel = value;
this.OnPropertyChanged(nameof(this.learningViewModel));
}
}
好吧,我必须非常感谢@ΩmegaMan 和其他请求一些代码才能工作的人。
我构建了一个小型玩具项目,它确实有助于调试问题。
我改变了什么? 实际上这很简单,在 DataTemplate 内部,我只需要使用指向 Window 的相对源并使用 DataContext 引用到 Window ViewModel 的命令属性(在 Window Datacontext 中引用)。
我最终改变了:
<Window.Resources>
<DataTemplate DataType="{x:Type vm:vmLearnSpeak}">
<local:viewLearnSpeak Command="{Binding cmdVMNotKnown, ElementName=root}" />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:vmLearnWrite}">
<local:viewLearnWrite />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:vmLearnListen}">
<local:viewLearnListen />
</DataTemplate>
</Window.Resources>
到:
<Window.Resources>
<DataTemplate DataType="{x:Type vm:vmLearnSpeak}">
<local:viewLearnSpeak Command="{Binding DataContext.cmdVMNotKnown, RelativeSource={RelativeSource AncestorType=local:wndSession}}" />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:vmLearnWrite}">
<local:viewLearnWrite />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:vmLearnListen}">
<local:viewLearnListen />
</DataTemplate>
</Window.Resources>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.