Very simple issue here. I have some checkboxes with their IsChecked bindings set to properties in my viewmodel.The binding mode is twoway. However, when they are checked, the viewmodel property isnt updated. I found a post about setting the clickmode of the checkbox and I have tried all the options:Hover, Press and Release. None of these fix the issue.
Is your property a nullable bool like the CheckBox.IsChecked?
Otherwise verify all that is needed for the MVVM pattern to work: your property is public with a getter and a setter, implementing INotifyPropertyChanged, etc.
Are the other properties binding properly? Your DataContext may be wrong...
Try this:
<Window x:Class="WpfTestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" >
<StackPanel>
<CheckBox Width="250" Height="30" IsChecked="{Binding Path=IsTrue, Mode=TwoWay}" />
<TextBlock Text="{Binding Path=IsTrue}" />
</StackPanel>
</Window>
Create ViewModel:
public class MainWindowViewModel :INotifyPropertyChanged
{
private bool _isTrue;
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChange(string propertyName)
{
if(PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
public bool IsTrue
{
get { return _isTrue; }
set
{
_isTrue = value;
OnPropertyChange("IsTrue");
}
}
}
Bind to View Model in MainWindow.cs code behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainWindowViewModel();
}
}
Related
I'l start by letting a picture do some talking.
So you see, I want to create a WPF user control that supports binding to a parent window's DataContext. The user control is simply a Button and a ListBox with a custom ItemTemplate to present things with a Label and a Remove Button.
The Add button should call an ICommand on the main view model to interact with the user in selecting a new thing (instance of IThing). The Remove buttons in the ListBoxItem in the user control should similarly call an ICommand on the main view model to request the related thing's removal. For that to work, the Remove button would have to send some identifying information to the view model about the thing requesting to be removed. So there are 2 types of Command that should be bindable to this control. Something like AddThingCommand() and RemoveThingCommand(IThing thing).
I got the functionality working using Click events, but that feels hacky, producing a bunch of code behind the XAML, and rubs against the rest of the pristine MVVM implementation. I really want to use Commands and MVVM normally.
There's enough code involved to get a basic demo working, I am holding off on posting the whole thing to reduce confusion. What is working that makes me feel like I'm so close is the DataTemplate for the ListBox binds the Label correctly, and when the parent window adds items to the collection, they show up.
<Label Content="{Binding Path=DisplayName}" />
While that displays the IThing correctly, the Remove button right next to it does nothing when I click it.
<Button Command="{Binding Path=RemoveItemCommand, RelativeSource={RelativeSource AncestorType={x:Type userControlCommands:ItemManager }}}">
This isn't terribly unexpected since the specific item isn't provided, but the Add button doesn't have to specify anything, and it also fails to call the command.
<Button Command="{Binding Path=AddItemCommand, RelativeSource={RelativeSource AncestorType={x:Type userControlCommands:ItemManager }}}">
So what I need is the "basic" fix for the Add button, so that it calls the parent window's command to add a thing, and the more complex fix for the Remove button, so that it also calls the parent command but also passes along its bound thing.
Many thanks for any insights,
This is trivial, and made so by treating your UserControl like what it is--a control (that just happens to be made up from other controls). What does that mean? It means you should place DependencyProperties on your UC to which your ViewModel can bind, like any other control. Buttons expose a Command property, TextBoxes expose a Text property, etc. You need to expose, on the surface of your UserControl, everything you need for it to do its job.
Let's take a trivial (thrown together in under two minutes) example. I'll leave out the ICommand implementation.
First, our Window
<Window x:Class="UCsAndICommands.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:t="clr-namespace:UCsAndICommands"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<t:ViewModel />
</Window.DataContext>
<t:ItemsEditor Items="{Binding Items}"
AddItem="{Binding AddItem}"
RemoveItem="{Binding RemoveItem}" />
</Window>
Notice we have our Items editor, which exposes properties for everything it needs--the list of items it is editing, a command to add a new item, and a command to remove an item.
Next, the UserControl
<UserControl x:Class="UCsAndICommands.ItemsEditor"
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:t="clr-namespace:UCsAndICommands"
x:Name="root">
<UserControl.Resources>
<DataTemplate DataType="{x:Type t:Item}">
<StackPanel Orientation="Horizontal">
<Button Command="{Binding RemoveItem, ElementName=root}"
CommandParameter="{Binding}">Remove</Button>
<TextBox Text="{Binding Name}" Width="100"/>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<StackPanel>
<Button Command="{Binding AddItem, ElementName=root}">Add</Button>
<ItemsControl ItemsSource="{Binding Items, ElementName=root}" />
</StackPanel>
</UserControl>
We bind our controls to the DPs defined on the surface of the UC. Please, don't do any nonsense like DataContext=this; as this anti-pattern breaks more complex UC implementations.
Here's the definitions of these properties on the UC
public partial class ItemsEditor : UserControl
{
#region Items
public static readonly DependencyProperty ItemsProperty =
DependencyProperty.Register(
"Items",
typeof(IEnumerable<Item>),
typeof(ItemsEditor),
new UIPropertyMetadata(null));
public IEnumerable<Item> Items
{
get { return (IEnumerable<Item>)GetValue(ItemsProperty); }
set { SetValue(ItemsProperty, value); }
}
#endregion
#region AddItem
public static readonly DependencyProperty AddItemProperty =
DependencyProperty.Register(
"AddItem",
typeof(ICommand),
typeof(ItemsEditor),
new UIPropertyMetadata(null));
public ICommand AddItem
{
get { return (ICommand)GetValue(AddItemProperty); }
set { SetValue(AddItemProperty, value); }
}
#endregion
#region RemoveItem
public static readonly DependencyProperty RemoveItemProperty =
DependencyProperty.Register(
"RemoveItem",
typeof(ICommand),
typeof(ItemsEditor),
new UIPropertyMetadata(null));
public ICommand RemoveItem
{
get { return (ICommand)GetValue(RemoveItemProperty); }
set { SetValue(RemoveItemProperty, value); }
}
#endregion
public ItemsEditor()
{
InitializeComponent();
}
}
Just DPs on the surface of the UC. No biggie. And our ViewModel is similarly simple
public class ViewModel
{
public ObservableCollection<Item> Items { get; private set; }
public ICommand AddItem { get; private set; }
public ICommand RemoveItem { get; private set; }
public ViewModel()
{
Items = new ObservableCollection<Item>();
AddItem = new DelegatedCommand<object>(
o => true, o => Items.Add(new Item()));
RemoveItem = new DelegatedCommand<Item>(
i => true, i => Items.Remove(i));
}
}
You are editing three different collections, so you may want to expose more ICommands to make it clear which you are adding/removing. Or you could cheap out and use the CommandParameter to figure it out.
Refer the below code.
UserControl.XAML
<Grid>
<ListBox ItemsSource="{Binding Things}" x:Name="lst">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ThingName}" Margin="3"/>
<Button Content="Remove" Margin="3" Command="{Binding ElementName=lst, Path=DataContext.RemoveCommand}" CommandParameter="{Binding}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Window.Xaml
<Window x:Class="MultiBind_Learning.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MultiBind_Learning"
Title="Window1" Height="300" Width="300">
<StackPanel Orientation="Horizontal">
<Button Content="Add" Width="50" Height="25" Command="{Binding AddCommnd }"/>
<local:UserControl2/>
</StackPanel>
Window.xaml.cs
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
this.DataContext = new ThingViewModel();
}
}
ThingViewModel.cs
class ThingViewModel
{
private ObservableCollection<Thing> things = new ObservableCollection<Thing>();
public ObservableCollection<Thing> Things
{
get { return things; }
set { things = value; }
}
public ICommand AddCommnd { get; set; }
public ICommand RemoveCommand { get; set; }
public ThingViewModel()
{
for (int i = 0; i < 10; i++)
{
things.Add(new Thing() { ThingName="Thing" +i});
}
AddCommnd = new BaseCommand(Add);
RemoveCommand = new BaseCommand(Remove);
}
void Add(object obj)
{
things.Add(new Thing() {ThingName="Added New" });
}
void Remove(object obj)
{
things.Remove((Thing)obj);
}
}
Thing.cs
class Thing :INotifyPropertyChanged
{
private string thingName;
public string ThingName
{
get { return thingName; }
set { thingName = value; OnPropertyChanged("ThingName"); }
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}
}
BaseCommand.cs
public class BaseCommand : ICommand
{
private Predicate<object> _canExecute;
private Action<object> _method;
public event EventHandler CanExecuteChanged;
public BaseCommand(Action<object> method)
{
_method = method;
}
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
_method.Invoke(parameter);
}
}
Instead of Base command you can try RelayCommand from MVVMLight or DelegateCommand from PRISM libraries.
By default, your user control will inherit the DataContext of its container. So the ViewModel class that your window uses can be bound to directly by the user control, using the Binding notation in XAML. There's no need to specify DependentProperties or RoutedEvents, just bind to the command properties as normal.
Simple question, but I dons see solution. Or may be dont understand how Bind method works.
The goal is two way binding between ViewModel and DataContext properties.
public MainWindow()
{
InitializeComponent();
this.Bind(this, v => v.DataContext, v => v.ViewModel);
}
public static readonly DependencyProperty ViewModelProperty = DependencyProperty.Register(
"ViewModel", typeof (string), typeof (MainWindow));
public string ViewModel
{
get { return (string) GetValue(ViewModelProperty); }
set { SetValue(ViewModelProperty, value); }
}
when I set ViewModel property, I get InvalidCastException "System.String" to "WpfApplication1.MainWindow".
But xaml binding works perfectly.
<MainWindow
DataContext="{Binding RelativeSource={RelativeSource Self}, Path=ViewModel, Mode=TwoWay}" ...
full xaml.cs/xaml code is here http://pastebin.com/iCKeNS7R
Where I wrong ?
update:
this code:
this.WhenAnyValue(v => v.ViewModel).BindTo(this, v => v.DataContext);
this.WhenAnyValue(v => v.DataContext).BindTo(this, v => v.ViewModel);
also works as expected
update 2
Question: Does this.Bind(viewModelParam, ...) ignore viewModelParam argument ??
example^ http://pastebin.com/e2aPaGNc
I bind to _otherViewModel, but when type text into textBox, ViewModel.StrProp changed, not _otherViewModel.
Does anybody know, how this.Bind work ??
Bind doesn't work between ViewModel and DataContext because the types don't match (i.e. I could set DataContext to '4' and now it can't assign that to ViewModel).
However, if you are using ReactiveUI bindings, you don't need DataContext at all, you should just use RxUI bindings everywhere. Please ignore the other answers on this thread that tell you how to do things the wrong way.
you can just bind the ViewModel via XAML:
<Window x:Class="YourNameSpace.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewModel="clr-namespace:YourNameSpace"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ViewModel:MainViewModel x:Key="MainViewModel"/>
</Window.Resources>
<Grid>
<TextBox Text="{Binding YourProperty, Mode=TwoWay, Source={StaticResource MainViewModel}, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</Window>
your viewmodel should implement INotifyPropertyChanged.
public class MainViewModel : INotifyPropertyChanged
{
private string _yourProperty;
public string YourProperty
{
get { return _yourProperty; }
set { _yourProperty = value; OnPropertyChanged("YourProperty"); }
}
public MainViewModel()
{
_yourProperty = "Some string";
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged = delegate { };
protected void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
}
I have a base abstract viewmodel containing 2 static models. In a usercontrol, I bind to both. Only the one binding (language) resolves and updates when the underlying static model changes. The binding to Employee does not update the fields. I have tested that the Employee setter is called and indeed it is. The getter however does not get called after the value changes. Any guidance will be appreciated.
Base Viewmodel:
namespace POC.Windows
{
public abstract class ViewModel : ObservableObject, IDataErrorInfo
{
private static int _languageId;
private static Languages _language;
private static Employee _employee;
public Employee Employee
{
get { return _employee; }
set
{
_employee = value;
NotifyPropertyChanged();
}
}
public int LanguageId
{
get{return _languageId;}
set{
if (_languageId != value)
{
_languageId = value;
LoadLanguage(); //Async populate Language model
NotifyPropertyChanged();
}
}
}
public Languages Language
{
get
{
if (_language == null)
{
_language = new Languages();
_languageId = -1;
LoadLanguage();
}
return _language;
}
set
{
_language = value;
NotifyPropertyChanged();
}
}
//Async Loading functions here - omitted
}
}
UserControl View:
<UserControl x:Class="POC.DesktopClient.UserControls.EmployeeDetails"
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:viewModels="clr-namespace:POC.DesktopClient.ViewModels"
mc:Ignorable="d"
d:DataContext="{d:DesignInstance viewModels:EmployeeDetailsViewModel}">
<UserControl.Resources>
<viewModels:EmployeeDetailsViewModel x:Key="EmployeeDetailsViewModel"/>
</UserControl.Resources>
<Grid>
<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
<TextBlock VerticalAlignment="Top" Margin="10"
Text="{Binding Path=Language.FirstName}"
Foreground="DarkBlue" FontWeight="Bold" FontSize="20">
</TextBlock>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1">
<TextBlock VerticalAlignment="Top" Margin="10"
Text="{Binding Path=Employee.FirstName}"
Foreground="DarkBlue" FontWeight="Bold" FontSize="20">
</TextBlock>
</StackPanel>
</Grid>
haven't touched the usercontrol's xaml.cs and EmployeeDetailsViewModel is empty:
public class EmployeeDetailsViewModel : ViewModel
{
}
---EDIT---
Observable Object:
namespace POC.Windows
{
public class ObservableObject : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Additional information:
The Usercontrol is hosted in the MainWindow.xaml.
In MainWindow.xaml.cs a datacontext is defined as a MainViewModel (that also is blank and inherits from ViewModel).
The static Employee model is bound to a listbox's selectedItem property.
The listbox is in a separate usercontrol also on the MainWindow.
Ths listbox's viewmodel is also blank and inherits from the base viewmodel. Its xaml.cs is blank, datacontext is set in Xaml, same as the details usercontrol.
LanguageID is bound to a combobox selectedValue on the MainWindow.
So in a nutshell, when I change the language in the combobox, the usercontrol's labels bound to language updates correctly. When I select an employee in the listbox, usercontrol's labels bound to Employee remains blank.
The task: implement the simplest Dependency Property ever, which can be used in xaml like that:
<uc:MyUserControl1 MyTextProperty="{Binding Text}"/>
I think that this answer is quite close. For better readability i copy all my code here (mostly from that answer above).
<UserControl x:Class="Test.UserControls.MyUserControl1"
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"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
<!-- Text is being bound to outward representative property;
Note the DataContext of the UserControl -->
<TextBox Text="{Binding MyTextProperty}"/>
</Grid>
</UserControl>
and
public partial class MyUserControl1 : UserControl
{
// The dependency property which will be accessible on the UserControl
public static readonly DependencyProperty MyTextPropertyProperty =
DependencyProperty.Register("MyTextProperty", typeof(string), typeof(MyUserControl1), new UIPropertyMetadata(String.Empty));
public string MyTextProperty
{
get { return (string)GetValue(MyTextPropertyProperty); }
set { SetValue(MyTextPropertyProperty, value); }
}
public MyUserControl1()
{
InitializeComponent();
}
}
And this is my MainWindow.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:uc="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<StackPanel Orientation="Vertical">
<uc:MyUserControl1 MyTextProperty="my text goes here"/>
<Button Click="ButtonBase_OnClick" Content="click"/>
</StackPanel>
</Window>
So far, everything works. However, i find this quite not usefull. What i'd need is
<uc:MyUserControl1 MyTextProperty="{Binding Text}"/>
and being able to change this by setting a DataContext (as you usually do in MVVM)
So i replace the line as above and add my code behind as follows:
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
Text = "Initial Text";
DataContext = this;
}
private string _Text;
public string Text
{
get { return _Text; }
set
{
if (value != _Text)
{
_Text = value;
NotifyPropertyChanged("Text");
}
}
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
Text = "clicked";
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}
Neither the "initial Text" nor the "clicked" is displayed... ever. So my question is how to implement a dept. property correctly to be used with
<uc:MyUserControl1 MyTextProperty="{Binding Text}"/>
The Text property is located on the DataContext of the MainWindow not of the UserControl.
So change this line <uc:MyUserControl1 MyTextProperty="{Binding Text}"/> into this:
<uc:MyUserControl1 MyTextProperty="{Binding Text, ElementName=MyMainWindow}"/>
Which will tell the Binding that you're talking about the Text element located in you MainWindow. Of course, since in this example I used ElementName, you're going to want to name your window MyMainWindow...
So add this to your MainWindow:
<Window Name="MyMainWindow" ..... />
If you rather not name your window, you can use the RelativeSource FindAncestor binding like this:
<wpfApplication6:MyUserControl1 MyTextProperty="{Binding Text, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"/>
In both ways, you are asking to find the property named 'Text' in the DataContext of the window.
I am trying to use Command and CommandParameter binding with Buttons in a WPF application. I have this exact same code working just fine in Silverlight so I am wondering what I have done wrong!
I have a combo box and a button, where the command parameter is bound to the combobox SelectedItem:
<Window x:Class="WPFCommandBindingProblem.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel Orientation="Horizontal">
<ComboBox x:Name="combo" VerticalAlignment="Top" />
<Button Content="Do Something" Command="{Binding Path=TestCommand}"
CommandParameter="{Binding Path=SelectedItem, ElementName=combo}"
VerticalAlignment="Top"/>
</StackPanel>
</Window>
The code behind is as follows:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
combo.ItemsSource = new List<string>(){
"One", "Two", "Three", "Four", "Five"
};
this.DataContext = this;
}
public TestCommand TestCommand
{
get
{
return new TestCommand();
}
}
}
public class TestCommand : ICommand
{
public bool CanExecute(object parameter)
{
return parameter is string && (string)parameter != "Two";
}
public void Execute(object parameter)
{
MessageBox.Show(parameter as string);
}
public event EventHandler CanExecuteChanged;
}
With my Silverlight application, as the SelectedItem of the combobox changes, the CommandParameter binding causes the CanExecute method for my command to be re-evaluated with the currently selected item and the button enabled state is updated accordingly.
With WPF, for some reason, the CanExecute method is only invoked when the binding is created when the XAML is parsed.
Any ideas?
You need to tell WPF that CanExecute can change - you can do this automatically in your TestCommand class like this:
public event EventHandler CanExecuteChanged
{
add{CommandManager.RequerySuggested += value;}
remove{CommandManager.RequerySuggested -= value;}
}
WPF will then ask CanExecute everytime a property changes in the view.