We Keep Coding

MVVM Light RelayCommand binding not working in user control

I'm working on a WPF application which uses the MVVM Light toolkit. I'm creating a wizard and I want to show buttons for navigating to the previous step and the next step on every page. In order to avoid code duplication, I use a user control which provides the buttons.
I'm trying to bind the next button's Command property to a dependency property , which is defined in the code behind file, called NextStepCommand. The type of this property is RelayCommand. The user control's dependency property NextStepCommand should then be bound to the window's property with the exact same name NextStepCommand; of course it also is of type RelayCommand.
However, the binding from the window's property NextStepCommand to the button's property Command doesn't work. Binding the window's property NextStepCommand to an arbitrary button defined in the window's XAML file works fine; so does implementing a RelayCommand in the user control's code behind class and binding it to the next button defined in the user control. Nevertheless, the full link from the window's property to the user control's button does not work and I can't figure out a solution.
The user control's XAML code is shown below.
<UserControl DataContext="{Binding RelativeSource={RelativeSource Self}}">
<DockPanel>
<Button DockPanel.Dock="Left"
IsEnabled="{Binding Path=PreviousStepEnabled}"
Command="{Binding Path=PreviousStepCommand}">Back</Button>
<Button DockPanel.Dock="Right"
IsEnabled="{Binding Path=NextStepEnabled}"
Command="{Binding Path=NextStepCommand, Mode=OneWay}">Next</Button>
<Label/>
</DockPanel>
</UserControl>
The user control's NextStepCommand is defined the following way:
public RelayCommand NextStepCommand
{
get { return (RelayCommand)GetValue(NextStepCommandProperty); }
set { SetValue(NextStepCommandProperty, value); }
}
public static readonly DependencyProperty NextStepCommandProperty =
DependencyProperty.Register(nameof(NextStepCommand), typeof(RelayCommand), typeof(WizardStepSwitchBar), new PropertyMetadata(default(RelayCommand)));
The window's XAML is displayed below.
<MahApps:MetroWindow
xmlns:MahApps="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
DataContext="{Binding Source={StaticResource Locator}, Path=BasicSettings}">
<Grid Style="{StaticResource MainContainerMargin}">
<control:WizardStepSwitchBar Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" PreviousStepEnabled="False" NextStepCommand="{Binding Path=NextStepCommand, Mode=OneWay}"/>
</Grid>
</MahApps:MetroWindow>
The implementation of the window's NextStepCommand property is quite simple:
public RelayCommand NextStepCommand
{
get
{
return new RelayCommand(this.OnNextStep);
}
}
private void OnNextStep()
{
MessageBox.Show("It works!");
}
I tried using this answer, but didn't provide a solution to my issue. Thank you in advance for your support!

IsChecked Binding not working in MenuItem in a ContextMenu

I have an MVVM Application and want to add a ContextMenu.
I added the ContextMenu to XAML and then set the Items like this (only one item here because it doesn'T matter):
<MenuItem Header="{x:Static Monitor:MonitorResources.R0206_SaveLatestValueToDatabase}"
IsCheckable="true"
IsChecked="{Binding ElementName=root, Path=Model.SaveToDbOneChecked}"
IsEnabled="{Binding ElementName=root, Path=Model.SaveToDbOneEnabled}">
The SaveToDbOneChecked and SaveToDbOneEnabled are Properties in my Model which are implemented like this:
private bool mSaveToDbOneEnabled;
public bool SaveToDbOneChecked
{
get { return mSaveToDbOneChecked; }
set { mSaveToDbOneChecked = value; OnPropertyChanged("SaveToDbOneChecked"); }
}
I set these before the ContextMenu gets called on the SelectionChanged in the GridView the ContextMenu is in. But it won't show the Checked sign next to the text of the MenuItem although the SaveToDbOneChecked has been set to true! I don'T know where i do something wrong and hope that somebody can help me here.

A few things you have to do to make this work. First of all you cannot bind from inside a MenuItem using ElementName property since the target element is most often out of your scope.
If I understand correctly the Model is your ViewModel property, in this case all you have to do is to set it as the DataContext of the Element on which the ContextMenu is placed.
This will set the same DataContext for your MenuItem and you can bind directly to DataContext:
IsChecked="{Binding SaveToDbOneChecked, Mode=TwoWay}"

Usercontrol databinding property changed MVVM

I am working with WPF and using data binding.
I would like to make a UserControl which has a property that could be used for data binding.
Also, I want to update some other property in the UserControl if the property changed.
For example,
public class MyControl : UserControl
{
....
....
....
....
public ViewStyles CurrentView
{
get { return (ViewStyles)GetValue(CurrentViewProperty); }
set
{
SetValue(CurrentViewProperty, value);
UpdateView();
}
}
public static readonly DependencyProperty CurrentViewProperty = DependencyProperty.Register("CurrentView", typeof(ViewStyles), typeof(ComboView));
....
.....
.....
.....
}
Problems comes:
A ViewModel is used and in which, there is a property ViewStyle which binded to the CurrentView in the above.
Another control combobox is also data-binded with ViewStyle in the ViewModel.
Actually, I want to use a combobox to choose the different view of my control. How to make it possible in MVVM?
I tried the above method. However, the UI (the different ViewStyles of MyControl) didn't change. It only change when I click on it using the mouse.
Thank you.
XAML: (MyControl)
<Views:MyControl Grid.Column="1" Grid.Row="1" Height="505" HorizontalAlignment="Left" Margin="2,0,0,0" Name="comboView1" VerticalAlignment="Top" Width="983"
ViewStyle="{Binding Path=CurrentView}" BorderThickness="5" BorderBrush="Black" ItemsSource="{Binding Path=Images}"
SelectedIndex="{Binding Path=CurrentIndex}" Foreground="White"
</Views:MyControl>
XAML: (ComboBox)
<ComboBox Margin="0,3,1,0" Width="178" HorizontalAlignment="Right" Name="ViewDDBox" FontSize="13" Foreground="#FFF6F3F3" Background="#FF444444"
BorderThickness="2" Height="23" VerticalAlignment="Top" Grid.Column="1"
ItemsSource="{Binding Path=ViewTypes}" IsEnabled="True" SelectedValue="{Binding Path=CurrentView, Mode=TwoWay}">
</ComboBox>
It is supposed that the view (some UI effect) will be changed of MyControl after choosing in the Combobox. But now, it only change when I click on MyControl using mouse.

The UpdateView() in your CurrentView property setter raises a HUGE red flag! You should never have any content other than SetValue in a dependency property setter, as certain aspects of xaml call the SetValue directly instead of going through the property. Always use the coerce property callback (if you want to validate the data before it's set) or the property changed callback (if you want to act after the property is changed, as I show in the example below).
You should do this instead:
public static DependencyProperty CurrentViewProperty =
DependencyProperty.Register("CurrentView", typeof(ViewStyles), typeof(ComboView),
new FrameworkPropertyMetadata(CurrentViewPropertyChanged));
private static void CurrentViewPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MyControl mc = (MyControl)d;
mc.UpdateView();
}

Instead of binding the view, why not create a templated control and then bind the control's view to the property on your viewmodel?
You may also have to use data template triggers on your template to get the desired functionality.
Check out this article for help on template basics and this one for a more in depth discussion.

For a user control, how to set the binding of a item template item to a user property?

I have a simple user control, which is essentially just an AutoCompleteBox with some custom logic.
For a specific instance (a collection of Persons), I want it to look like this:
<sdk:AutoCompleteBox Name="myACB" ItemsSource="{Binding People}" FilterMode="StartsWith" MinimumPrefixLength="2" ValueMemberBinding={Binding LastName}>
<sdk:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding LastName}" />
</DataTemplate>
</sdk:AutoCompleteBox.ItemTemplate>
</sdk:AutoCompleteBox>
However, I want to make the data source generic and therefore the display values will be different (ValueMemberBinding and the template TextBlock text). That is why I am making a custom control so I can specify the differences with properties.
I have no problem setting the source with a user control property, but I am having difficulty with the display binding properties. Right now I have:
public static DependencyProperty DisplayMemberProperty = DependencyProperty.Register("DisplayMember", typeof(string), typeof(myAutoComplete), null);
public string DisplayMember
{
get
{ return myACB.ValueMemberPath; }
set
{
myACB.ValueMemberPath = value; // this works fine
// but how can set the text binding for the templated textblock?
}
}
I want the DisplayMember property to be the property name to display for whatever kind of custom collection (persons, cars, etc) I have bound to the AutoCompleteBox.
I don't think I can modify the datatemplate programmatically. Is there a way I can do this with binding (relative source)?

I am not sure if this works, but I think you could bind the text directly to the ValueMemberBinding property and use a converter to get the text out of it...

<TextBlock Text="{TemplateBinding DisplayMember}" />

Thank you for the suggestions.
I was unable to get a solution that I preferred, but my workaround is to just pass in a datatemplate resource as a property and that gets assigned to the autocompletebox itemtemplate.
Define a template:
<DataTemplate x:Key="myCustomDT">
<!-- whatever you want here -->
</DataTemplate>
Create the user control property for it:
public static DependencyProperty DisplayTemplateProperty = DependencyProperty.Register("DisplayTemplate", typeof(DataTemplate), typeof(myAutoComplete), null);
public DataTemplate DisplayTemplate {
get { return myACB.ItemTemplate; }
set { myACB.ItemTemplate = value; }
}
Now:
<local:myAutoComplete DisplayTemplate="{StaticResource myCustomDT}" />
Not the best method, but it will work for now.

Editable WPF ListBox

I have a ObservableCollection that's bound to a ListBox in WPF. I want the ListBox to be editable, and for the editing changes to be saved to the collection. Since WPF doesnt provide an editable listbox, I've tried creating my own by changing the ListBox.ItemTemplate.
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="EditableText" Text="{TemplateBinding Content}"/>
</DataTemplate>
</ListBox.ItemTemplate>
Changing the ItemTemplate gives me editable boxes, but any changes to the textboxes dont get saved to the ObservableCollection. Is there a way to have an editable ListBox with two way binding?

You cannot do it this way.
To achieve that kind of trick, you would need your items to be "holder classes" that expose a property you can bind your textbox to.
To understand it, imagine the following pseudo sequence of calls:
class ListBox
{
Bind(Items)
{
foreach(var item in Items)
{
DataTemplate Template = LoadTemplateForItem(item.GetType()); // this is where your template get loaded
Template.Bind(item); //this is where your template gets bound
}
}
}
Your template (the DataTemplate with the listbox) is loaded and the item (which I assume is a string in your case) gets passed in.
At this point, it only knows the string, and cannot influence anything upwards. A two-way binding cannot influence the collection because the template does not know in which context it is being used, so it cannot reach back to the original collection and modify its contents.
For that matter, this is the same thing for the TextBox. If it is not given a conainer and a property name, it has nowhere to "store back" the changes.
This basically the same as passing a string into a function call. The function cannot change which string was passed in (ignoring tricks such as by-reference argument passing).
To get back to your case, you need to build a collection of objects which expose a property containing the value that needs to be edited:
public class MyDataItem
{
string Data { get; set;}
}
Then you can bind your ListBox to a collection of those items and modifiy your datatemplate:
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="EditableText" Text="{Binding Data, Mode=TwoWay}"/>
</DataTemplate>
</ListBox.ItemTemplate>

Bind to a model property -- i.e. a property of the data object -- rather than to a view property such as Content. For example:
// model class
public class Widget : INotifyPropertyChanged
{
public string Description { ... }
}
<!-- view -->
<DataTemplate>
<TextBox Text="{Binding Description}" />
</DataTemplate>
Note this will not work if your ItemsSource is ObservableCollection (because there's no property to bind to).