How to use a trigger to affect related grid elements? - wpf

Question

As an exercise in WPF I am dabbling with a Sudoku-like grid.
Consider the following (simplified) example
XAML
<Window x:Class="SO_WPF_Question_Sample.MainWindow"
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:SO_WPF_Question_Sample"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style x:Key="MouseOverStyle" TargetType="{x:Type Label}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<!-- I want something to happen here -->
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<ItemsControl ItemsSource="{Binding Path=Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1,1,1,1">
<Label Content="{Binding}"
Style="{StaticResource MouseOverStyle}"
/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Window>
Code-behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainWindowViewModel();
}
}
Viewmodel
public class MainWindowViewModel // INotifyPropertyChanged omitted for simplicity
{
public MainWindowViewModel()
{
PopulateElements(4);
}
public IEnumerable<Cell> Items { get; set; }
private void PopulateElements(int size)
{
int div = (int)Math.Sqrt(size);
IList<Cell> items = new List<Cell>();
for (int i = 0; i < size; i++)
{
for (int j = 0; j < size; j++)
{
items.Add(new Cell()
{
X = i,
Y = j,
Z = j / div + div * (i / div)
});
}
}
Items = items;
}
}
POCO class
public class Cell
{
public int X { get; set; }
public int Y { get; set; }
public int Z { get; set; }
public override string ToString()
{
return "Row: " + X + " Col: " + Y + " Box: " + Z;
}
}
The only interesting bit: whenever I hover over a grid element, it turns red.
What I want: whenever I hover over a grid element, I want to highlight all 'sibling' cells as well. I.e. the ones where X, Y and Z are equal to those of the active cell.
I don't know how to achieve that, but I can think about some strategies.
Active strategy:
Upon the Trigger, somehow fire some method (something like a Command?) (or something else?), have that parse all Cells in the grid, if they are siblings, set some property on them, and define a Style to respond to a DataTrigger.
Passive strategy:
Upon the trigger, set some ViewModel property that triggers an event that the Cells subscribe to (INotifyPropertChanged springs to mind), have an event handler in Cell set a property and again have a Style with a DataTrigger. I can see this work in my mind but there is a coupling issue with this approach. Also, how would I convey the info about the grid element being hovered over?
While researching this I came across EventTrigger and Interaction but those seem to be primarily geared to animations. There is probably a better/simpler approach to this. I have the feeling I am overthinking this.
I would appreciate advice nudging me to an approach on how to tackle this and if possible why that approach would be favorable.
Update it turns out that what my question really boiled down to was how to call a Command (with a CommandParameter) using EventTrigger. There are a lot of answers on SO on this one, a lot of them involving MVVM Light. I solved it by using Microsoft.Xaml.Behaviors.Wpf and can now see how MVVM Light might have been the better/easier way to go.

Answer 1

From experience alone I'm biased towards something along the lines of the first proposed solution.
Add the following namespaces to the xaml:
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="http://www.galasoft.ch/mvvmlight"
And then use EventToCommand:
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<cmd:EventToCommand Command="{Binding HoverCellCommand}" PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
In the view model you'd have something like...
public RelayCommand<MouseEventArgs> HoverCellCommand {get; private set;}
HoverCellCommand = new RelayCommand<MouseEventArgs>(p =>
{
//find cell siblings, etc...
});

Answer 2

For future reference for myself, this is how I did it without using MVVM Light. Instead, I installed the Microsoft.Xaml.Behaviors.Wpf NuGet package to get the Behaviors stuff (known as Interactivity in Blend)
First the basic stuff: create a command:
public class ChangeSiblingColorCommand : ICommand
{
private readonly Action<Cell> _action;
#pragma warning disable CS0067 // The event is never used
public event EventHandler CanExecuteChanged;
#pragma warning restore CS0067 // The event is never used
public ChangeSiblingColorCommand(Action<Cell> action)
{
_action = action;
}
public bool CanExecute(object parameter)
{
return (parameter is Cell c);
}
public void Execute(object parameter)
{
_action((Cell)parameter);
}
}
Then include the command in the viewmodel so it can be bound to:
public MainWindowViewModel()
{
this.ChangeSiblingColorCommand = new ChangeSiblingColorCommand(HighlightSiblings);
}
public ICommand ChangeSiblingColorCommand { get; private set; }
private void HighlightSiblings(Cell cell)
{
var siblings = cell.Siblings(Items);
foreach (Cell c in siblings)
{
c.IsSiblingHighlighted = !c.IsSiblingHighlighted;
}
}
Finally, hook the command up in the view using the following rather scary XAML:
<ItemsControl ItemsSource="{Binding Path=Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Label Style="{StaticResource MouseOverStyle}" Content="{Binding Mode=OneWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<i:InvokeCommandAction Command="{Binding RelativeSource={RelativeSource AncestorType=UniformGrid,
Mode=FindAncestor},
Path=DataContext.ChangeSiblingColorCommand }"
CommandParameter="{Binding}"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<i:InvokeCommandAction Command="{Binding RelativeSource={RelativeSource AncestorType=UniformGrid,
Mode=FindAncestor},
Path=DataContext.ChangeSiblingColorCommand }"
CommandParameter="{Binding}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Label>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Be sure to include this reference in the view:
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"