We Keep Coding

c# mvvm databind for multiple click events not working

i have made an picross application in c# als my secund c# application.
i am trying to keep it mvvm. but have a little problem with this.
i have an array of rectangles en when someone clicks 1 of theses rectangles the status of this one needs to be changed(color change).
i have managed to do this in a non mvvm way but really want to make is mvvm.
so the code.
first the xaml code.
<Window x:Class="View.CreatePuzzle"
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:View"
xmlns:controls="clr-namespace:View.Controls"
mc:Ignorable="d"
Title="CreatePuzzle" Height="450" Width="800">
<Window.Resources>
<VisualBrush x:Key="myBrush">
<VisualBrush.Visual>
<Grid>
<Rectangle Fill="Red"/>
<Image Source="Images/backgroundmain.jpg"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Window.Resources>
<Grid Background="{StaticResource myBrush}" RenderTransformOrigin="0.508,0.819" Height="450" Margin="10,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="600"/>
</Grid.ColumnDefinitions>
<StackPanel>
<TextBlock Grid.Column="0" Text="your name" />
<TextBox Grid.Column="0" Text="{Binding Author}" />
<TextBlock Grid.Column="0" Text="width" />
<controls:numberinput x:Name="widthfield" Grid.Column="1" Value="{Binding puzzlewidth}">
</controls:numberinput>
<TextBlock Grid.Column="0" Text="height" />
<controls:numberinput x:Name="heightfield" Grid.Column="0" Value="{Binding puzzleheight}">
</controls:numberinput>
<Button Grid.Column="0" Height="25" Content="generate puzzle"
Command="{Binding Path=generatefield}"/>
</StackPanel>
<controls:PiCrossControl HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" x:Name="picrossControl" ColumnConstraints="{Binding ColumnConstraints}" RowConstraints="{Binding RowRonstraints }" Grid="{Binding Grid}" >
<controls:PiCrossControl.SquareTemplate>
<DataTemplate >
<Rectangle Width="32" Height="32" Stroke="Black" MouseRightButtonDown="Rectangle_MouseRightButtonDown" MouseWheel="Rectangle_MouseWheel">
<Rectangle.InputBindings>
<MouseBinding Gesture="LeftClick" Command="{Binding Path=Rectangle_MouseLeftButtonDown}"/>
</Rectangle.InputBindings>
<Rectangle.Fill>
<Binding Path="Contents.Value" UpdateSourceTrigger="PropertyChanged">
<Binding.Converter>
<local:SquareConverter Empty="White" Filled="Black" Unknown="green" />
</Binding.Converter>
</Binding>
</Rectangle.Fill>
</Rectangle>
</DataTemplate>
</controls:PiCrossControl.SquareTemplate>
</controls:PiCrossControl>
<Button Grid.ColumnSpan="2" Height="50" Content="create puzzle"
Command="{Binding Path=createpuzzle}" Margin="0,340,0,0"/>
</Grid>
here is one of the methodes is want to take out of the xaml.cs
private void Rectangle_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
Rectangle rectangle = (Rectangle)sender;
IPlayablePuzzleSquare square = (IPlayablePuzzleSquare)rectangle.DataContext;
square.Contents.Value = Square.EMPTY;
}
and the view model methode i wanna use to replace it with:
public void Rectangle_MouseLeftButtonDown(object sender )
{
Debug.WriteLine("leftmousevent in vm");
}
so when i run this code i get te following error for every rectangle :
System.Windows.Data Error: 40 : BindingExpression path error: 'Rectangle_MouseLeftButtonDown' property not found on 'object' ''PlayablePuzzleSquare' (HashCode=36468595)'. BindingExpression:Path=Rectangle_MouseLeftButtonDown; DataItem='PlayablePuzzleSquare' (HashCode=36468595); target element is 'MouseBinding' (HashCode=10961125); target property is 'Command' (type 'ICommand')
i hope someone can help me.
note i am pretty new to c# but have more java experience.
thanks in advance
jef uytterhoeven

As you said; Rectangle_MouseLeftButtonDown is an event handler.
Without seeing your view-model it's hard to fix this, but, you should use the same structure as you do in the Command binding for your button:
Command="{Binding Path=generatefield}"
So, look for generatefield in your view model and duplicate and adjust it to replace the event handler.

Since you do not wish code behind, you have to remove your Mouse left button click event handler from xaml.cs.
Instead you can make use of System.Windows.Interactivity.dll .
Add this reference to your project first. Then add following code in xaml . (Example)
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown" >
<i:InvokeCommandAction Command="{Binding MouseLeftButtonDownClick}" >
</i:InvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Rectangle>
As you can see in the example, my event is bound to command,which is in the View model . If you are not familiarize with EventToCommand binding , you can learn more from following link
WPF Binding UI events to commands in ViewModel
After this, you have to implement ICommand in your viewmodel . (Example)
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public ICommand MouseLeftButtonDownClick { get; }
public ViewModel()
{
MouseLeftButtonDownClick = new RelayCommand(OnMouseLeftButtonClick);
}
private void OnMouseLeftButtonClick(object obj)
{
//Your logic on left button click
}
public void OnPropertyChanged(string PropName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropName));
}
}
I have used RelayCommand class in my viewmodel, which is nothing but ICommand implementation . If you are not familiarize with ICommand , you can learn more from following link
ICommand MVVM implementation

WPF- How to hide a dropdown menu after click

I have a SplitButton in my WPF window, which is borrowed from Xceed's Extended WPF Toolkit. Its dropdown content is consisted of some RadioButtons. Something like:
<Window x:Class="WpfTest.Test3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:tk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
Title="Test3" Height="300" Width="300">
<Grid Height="25" Width="150">
<tk:SplitButton Content="Default Command">
<tk:SplitButton.DropDownContent>
<StackPanel>
<RadioButton Content="Default Command" GroupName="variations" Margin="5" IsChecked="True"/>
<RadioButton Content="Alternate Command 1" GroupName="variations" Margin="5"/>
<RadioButton Content="Alternate Command 2" GroupName="variations" Margin="5"/>
</StackPanel>
</tk:SplitButton.DropDownContent>
</tk:SplitButton>
</Grid>
</Window>
which generates something like this:
The problem is, when I click on each of the RadioButtons the dropdown menu doesn't dissappear. I did some googling and realized that I should handle the Click event for each RadioButton. But I don't know how to hide the dropdown menu in that event handler. As a side-note, it seems a MenuItem has the property of StaysOpenOnClick, but there is no such thing for other controls.
Although doing this programmatically would suffice, but is there an MVVM way for this?

Add Checked event on your radio button and use SplitoButton.IsOpen=false;. Follow this code.
Xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:tk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
Title="MainWindow" Height="350" Width="525">
<Grid>
<tk:SplitButton Name="SplitButton" Content="Default Command">
<tk:SplitButton.DropDownContent>
<StackPanel>
<RadioButton Checked="rb_Checked" Content="Default Command" GroupName="variations" Margin="5" IsChecked="True"/>
<RadioButton Checked="rb_Checked" Content="Alternate Command 1" GroupName="variations" Margin="5"/>
<RadioButton Checked="rb_Checked" Content="Alternate Command 2" GroupName="variations" Margin="5"/>
</StackPanel>
</tk:SplitButton.DropDownContent>
</tk:SplitButton>
</Grid>
</Window>
.cs
private void rb_Checked(object sender, RoutedEventArgs e)
{
SplitButton.IsOpen = false;
}

Binding to Usercontrol Datacontext instead of SelectedItems datacontext

I have a listbox, where a grid with textboxes shows the listboxs currently selecteditems data. (Code below)
The problem is that i want a delete button inside this grid, however the command it uses lies in the Usercontrols DataContext. How do I make the button recieve the command binding inside the UserControls Datacontext?
Following code lies inside a grid where the visual trees root is a UserControl.
<ListBox Name="list" ItemTemplate="{StaticResource listTemplate}" ItemsSource="{Binding listCollection, UpdateSourceTrigger=PropertyChanged}">
</ListBox>
<Grid DataContext="{Binding ElementName=list, Path=SelectedItem}" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Margin="7">Name:</TextBlock>
<TextBox Margin="5" Grid.Column="1" Text="{Binding Path=Name}"></TextBox>
<Button Grid.Row="1" Command="{Binding DeleteSelectedItemCommand}">Delete Selected Item</Button>
</Grid>

You need to change DataContext, provide same Name for UserControl and then
Command="{Binding ElementName=Name, Path=DeleteSelectedItemCommand}"

You mean you want to fire the button's command on your UserControls DataContext IE your vm?
Then you need this binding;
<Button Grid.Row="1" Command="{Binding Path=DeleteSelectedItemCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type YourControl}}}">Delete Selected Item</Button>
Basicly this just traverse up your xaml tree and fetch datacontext from the control called YourControl. You could set UserControl here. The cool thing about this kind of binding is that you may track back the datacontext of any items up the chain :)
This document is still very handy for bindings that are a bit tricky :)
Cheers,
Stian

The trick was to wire up the DataContext using Stians reference.
<Button
DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType {x:Type UserControl}}, Path=DataContext}"
Command="{Binding Path=DeleteSelectedItemCommand}">
</Button>

How to add controls dynamically to a UserControl through user's XAML?

I want to create a user control that contains a TextBlock and a StackPanel that will allow the user to add his/her own controls to the user control dynamically in XAML.
Here is the sample XAML for my UserControl:
<UserControl x:Class="A1UserControlLibrary.UserControlStackPanel"
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"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="300">
<StackPanel>
<TextBlock Text="I want the user to be able to add any number of controls to the StackPanel below this TextBlock."
FontFamily="Arial" FontSize="12" FontWeight="DemiBold" Margin="5,10,5,10" TextWrapping="Wrap"/>
<StackPanel>
<!-- I want the user to be able to add any number of controls here -->
</StackPanel>
</StackPanel>
</UserControl>
I would like the user to be able to embed this user control in their XAML and add their own controls to the stack panel of the user control:
<uc:A1UserControl_StackPanel x:Name="MyUserControl_Test" Margin="10" Height="100">
<Button Name="MyButton1" Content="Click" Height="30" Width="50"/>
<Button Name="MyButton2" Content="Click" Height="30" Width="50"/>
<Button Name="MyButton3" Content="Click" Height="30" Width="50"/>
</uc:A1UserControl_StackPanel>
Doing this using the above XAML does not work. Any ideas?

You can do that, although not quite like your example. You need two things. The first is to declare a DependencyProperty of type UIElement, of which all controls extend:
public static DependencyProperty InnerContentProperty = DependencyProperty.Register("InnerContent", typeof(UIElement), typeof(YourControl));
public UIElement InnerContent
{
get { return (UIElement)GetValue(InnerContentProperty); }
set { SetValue(InnerContentProperty, value); }
}
The second is to declare a ContentControl in the XAML where you want the content to appear:
<StackPanel>
<TextBlock Text="I want the user to be able to add any number of controls to the StackPanel below this TextBlock."
FontFamily="Arial" FontSize="12" FontWeight="DemiBold" Margin="5,10,5,10" TextWrapping="Wrap"/>
<StackPanel>
<ContentControl Content="{Binding InnerContent, RelativeSource={RelativeSource AncestorType={x:Type YourXmlNamspacePrefix:ContentView}}}" />
</StackPanel>
</StackPanel>
In my opinion, if you use StackPanels, you could find that your content does not get displayed correctly... I'd advise you to use Grids for layout purposes for all but the simplest layout tasks.
Now the one difference to your example is in how you would use your control. The InnerContent property is of type UIElement, which means that it can hold one UIElement. This means that you need to use a container element to display more than one item, but it has the same end result:
<YourXmlNamspacePrefix:YourControl>
<YourXmlNamspacePrefix:YourControl.InnerContent>
<StackPanel x:Name="MyUserControl_Test" Margin="10" Height="100">
<Button Content="Click" Height="30" Width="50"/>
<Button Content="Click" Height="30" Width="50"/>
<Button Content="Click" Height="30" Width="50"/>
</StackPanel>
</YourXmlNamspacePrefix:YourControl.InnerContent>
</YourXmlNamspacePrefix:YourControl>
And the result:
UPDATE >>>
For the record, I know exactly what you want to do. You, it seems, do not understand what I am saying, so I'll try to explain it one last time for you. Add a Button with the Tag property set as I've already shown you:
<Button Tag="MyButton1" Content="Click" Click="ButtonClick" />
Now add a Click handler:
private void ButtonClick(object sender, RoutedEventArgs e)
{
Button button = (Button)sender;
if (button.Tag = "MyButton1") DoSomething();
}
That's all there is to it.

MVVM - Access command from different class in XAML

In my project I have a TitleView and GameView. When the program launches, TitleView is displayed. The user clicks a button and GameView is displayed. I am using MVVM Light which includes MainViewModel which has commands to switch to the desired views:
From MainViewModel.cs
GameViewCommand = new RelayCommand(() => ExecuteGameViewCommand());
private void ExecuteGameViewCommand()
{
CurrentViewModel = MainViewModel._gameViewModel;
}
In TitleView.xaml, I need to access this command and I don't know how. I am very much a novice when it comes to XAML.
From TitleView.xaml
<UserControl x:Class="AoW.Views.TitleView"
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:vm="clr-namespace:AoW.ViewModels"
mc:Ignorable="d"
d:DesignWidth="1020"
d:DesignHeight="740"
Width="1020"
Height="740">
<Button Content="New Game"
//This needs to bind to GameViewCommand in MainViewModel.cs
Command="{Binding GameViewCommand}"
Grid.Column="1"
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
If I put the following line into TitleView.xaml...
DataContext="{Binding Main, Source={StaticResource Locator}}"
... I can access GameViewCommand, but I can't access any local commands.
What can I do to gain access to GameViewCommand while maintaining control of local commands?
If providing additional code would be helpful, please let me know.

I've fixed the problem. All I had to was this:
<Button Content="New Game"
Command="{Binding GameViewCommand}"
DataContext="{Binding Main, Source={StaticResource Locator}}"
Grid.Column="1"
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
<Button Content="Say Hello"
Command="{Binding SayHelloCommand}"
Grid.Column="2"
Grid.Row="2"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
Turns out it was a very easy fix.