MVVM WPF:根据ViewModel中的名称更改项的属性

Question

假设我在XAMl页面中定义了12个矩形，如下所示：

<Rectangle x:Name="C" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="226" Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="69"/>
<Rectangle x:Name="D" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="226" Margin="78,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="69"/>
<Rectangle x:Name="E" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="226" Margin="146,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="69"/>
<Rectangle x:Name="F" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="226" Margin="214,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="69"/>
<Rectangle x:Name="G" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="226" Margin="281,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="69"/>
<Rectangle x:Name="A" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="226" Margin="347,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="69"/>
<Rectangle x:Name="B" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="226" Margin="414,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="69"/>
<Rectangle x:Name="CSh" Fill="Black" HorizontalAlignment="Left" Height="121" Margin="47,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="63"/>
<Rectangle x:Name="DSh" Fill="Black" HorizontalAlignment="Left" Height="121" Margin="115,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="62"/>
<Rectangle x:Name="FSh" Fill="Black" HorizontalAlignment="Left" Height="121" Margin="249,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="63"/>
<Rectangle x:Name="GSh" Fill="Black" HorizontalAlignment="Left" Height="121" Margin="317,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="63"/>
<Rectangle x:Name="ASh" Fill="Black" HorizontalAlignment="Left" Height="121" Margin="385,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="63"/>

如何在不使用CodeBehind的情况下更改ViewModel中特定矩形的颜色？

示例：如果我按键盘上的键"A"，则xaml页面中名为"A"的元素必须用绿色着色，如果我按下键盘上的"B"，则xaml上名为"B"的元素则必须用绿色，依此类推。

我已经对绑定的工作原理有了一些基本的了解，但我找不到任何解决方案，有人能为我指明正确的方向吗？

Answer 1

首先你需要将其添加到你的xaml代码中

<Rectangle x:Name="C" Fill="{Binding Color}" HorizontalAlignment="Left" Height="226" Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="69"/>

接下来你需要创建ViewModel

publuc MyViewModel() :INotifyPropertyChanged
{
Brush _color;
Brush Color{get{return _color;} set{_color = value; OnPropertyChanged("Color")}}
public MyViewModel()
{
Color = Brushes.Green;
}
}

最后添加到窗口的xaml.cs类中

DataContext = new DERDashboardUserControlViewModel();

您可以在矩形周围添加按钮，并创建将绑定到视图模型中的方法的命令。以下是如何在ViewModel 中将WPF按钮绑定到命令的链接

Answer 2

这是Window:的行为

using System.Windows;
using System.Windows.Interactivity;
using System.Windows.Media;
using System.Windows.Shapes;
public class ListenKeyBehavior : Behavior<Window>
{
public Brush KeyBgBrush { get; set; }
private Brush _originalBgBrush;
protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.PreviewKeyDown += AssociatedObject_PreviewKeyDown;
AssociatedObject.PreviewKeyUp += AssociatedObject_PreviewKeyUp;
}
private void AssociatedObject_PreviewKeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
var foundEl = GetChildByName(AssociatedObject, e.Key.ToString().ToLower()) as Shape;
if (foundEl != null && KeyBgBrush != null && _originalBgBrush==null)
{
_originalBgBrush = foundEl.Fill;
foundEl.Fill = KeyBgBrush;
}
}
private void AssociatedObject_PreviewKeyUp(object sender, System.Windows.Input.KeyEventArgs e)
{
var foundEl = GetChildByName(AssociatedObject, e.Key.ToString().ToLower()) as Shape;
if (foundEl != null && _originalBgBrush != null)
{
foundEl.Fill = _originalBgBrush;
_originalBgBrush = null;
}
}
protected override void OnDetaching()
{
AssociatedObject.PreviewKeyDown -= AssociatedObject_PreviewKeyDown;
AssociatedObject.PreviewKeyUp -= AssociatedObject_PreviewKeyUp;
base.OnDetaching();
}
public static object GetChildByName(DependencyObject depObj, string searchedName) 
{
if (depObj == null)
{
return null;
}
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
var child = VisualTreeHelper.GetChild(depObj, i);
if (child is FrameworkElement childFrmWrkEl && childFrmWrkEl.Name.ToLower()==searchedName)
{
return child;
}
var result = GetChildByName(child, searchedName);
if (result != null)
{
return result;
}
}
return null;
}
}

将此行为应用于Window:

<Window ..... xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">
<i:Interaction.Behaviors>
<local:ListenKeyBehavior KeyBgBrush="Green" />
</i:Interaction.Behaviors>
.....
</Window>