We Keep Coding

WPF how to bind value to TextBox correclty with MVVM pattern

I am currently experimenting with WPF. I created a demo project using the Windows Template Studio for Visual Studio.
Now I want to add a textbox that should be saved automatically by the MVVM pattern. I added the following XAML to my settings page.
<TextBlock
Style="{StaticResource BodyTextStyle}"
Text="Default Page" />
<TextBox Text="{Binding DefaultPage}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<i:InvokeCommandAction Command="{Binding SetDefaultPageCommand}" CommandParameter="{Binding DefaultPage}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
In SettingsViewModel I added the following lines:
private readonly IDefaultPageService _defaultPageService;
private string _defaultPage;
public ICommand SetDefaultPageCommand => _setDefaultPageCommand ?? (_setDefaultPageCommand = new RelayCommand<string>(OnSetDefaultPage));
public string DefaultPage
{
get { return _defaultPage; }
set { Set(ref _defaultPage , value); }
}
private void OnSetDefaultPage(string defaultPage)
{
_defaultPageService.SetDefaultPage(defaultPage);
}
The service to save is implemented as:
public class DefaultPageService : IDefaultPageService
{
public DefaultPageService()
{
}
public void InitializeDefaultPage()
{
var theme = GetDefaultPage();
SetDefaultPage(theme);
}
public void SetDefaultPage(string defaultPage)
{
App.Current.Properties["DefaultPage"] = defaultPage.ToString();
}
public string GetDefaultPage()
{
if (App.Current.Properties.Contains("DefaultPage"))
{
var defaultPage = App.Current.Properties["DefaultPage"].ToString();
return defaultPage;
}
return "https://google.com";
}
}
Saving my new string works but unfortunately, my command is being called before the actual bound property has changed its value. I tried a bunch of different TextBox events already, such as KeyUp and KeyDown. The only event I found that works are LayoutUpdated but this one is being fired over and over again by the GUI, so I'm pretty sure there is a better way.
Does anybody know how I can fix this?

Add binding option
UpdateSourceTrigger=PropertyChanged
<TextBox Text="{Binding DefaultPage, UpdateSourceTrigger=PropertyChanged}"/>
And setter
You can getting value when textBox value changed.
class ViewModel
{
private string _defaultPage;
public string DefaultPage
{
get { return _DefaultPage; }
set { _DefaultPage = value; OpPropertyChanged(); DefaultPageChanged(value); }
}
private void DefaultPageChanged(string v)
{
// Service some...
}
}

The default behavior of the TextBox binding is to update the binding after the TextBox loses focus, so that is why your bound property only changes AFTER a user types and then performs any action to lost focus on the TextBox. You obviously can't use the TextChanged event because it will fire on every keystroke.
The best way to preserve your MVVM and rely on the bounding property to change first, is to get rid of your EventTrigger and your ICommand altogether, and simply take advantage of when your DefaultPage setter gets called.
In your SettingsViewModel:
private readonly IDefaultPageService _defaultPageService;
private string _defaultPage;
public string DefaultPage
{
get { return _defaultPage; }
set { Set(ref _defaultPage , value); OnSetDefaultPage(_defaultPage); }
}
private void OnSetDefaultPage(string defaultPage)
{
_defaultPageService.SetDefaultPage(defaultPage);
}

WPF TreeView CheckBox Binding - How to populate ViewModel with checked boxes

I'm slightly confused about how to set up a CheckBox with a binding that ensures that my ViewModel is populated with all the checked fields. I have provided some of the code and a description at the bottom.
My Xaml file let's call it TreeView.xaml:
<TreeView x:Name="availableColumnsTreeView"
ItemsSource="{Binding Path=TreeFieldData, Mode=OneWay, Converter={StaticResource SortingConverter}, ConverterParameter='DisplayName.Text'}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate x:Uid="HierarchicalDataTemplate_1" ItemsSource="{Binding Path=Children, Mode=OneWay, Converter={StaticResource SortingConverter}, ConverterParameter='DisplayName.Text'}">
<CheckBox VerticalAlignment="Center" IsChecked="{Binding IsSelected, Mode=TwoWay}">
<TextBlock x:Uid="TextBlock_1" Text="{Binding DisplayName.Text, Mode=OneWay}" />
</CheckBox>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
The "code behind" TreeView.xaml.cs
public partial class MultipleColumnsSelectorView : UserControl
{
public MultipleColumnsSelectorView()
{
InitializeComponent();
}
private MultipleColumnsSelectorVM Model
{
get { return DataContext as MultipleColumnsSelectorVM; }
}
}
The ViewModel (tried to include only the relevant stuff) MultipleColumnsSelectorVM:
public partial class MultipleColumnsSelectorVM : ViewModel, IMultipleColumnsSelectorVM
{
public ReadOnlyCollection<TreeFieldData> TreeFieldData
{
get { return GetValue(Properties.TreeFieldData); }
set { SetValue(Properties.TreeFieldData, value); }
}
public List<TreeFieldData> SelectedFields
{
get { return GetValue(Properties.SelectedFields); }
set { SetValue(Properties.SelectedFields, value); }
}
private void AddFields()
{
//Logic which loops over SelectedFields and when done calls a delegate which passes
//the result to another class. This works, implementation hidden
}
The model TreeFieldData:
public class TreeFieldData : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public IEnumerable<TreeFieldData> Children { get; private set; }
private bool _isSelected;
public bool IsSelected
{
get { return _isSelected; }
set
{
_isSelected = value;
if (PropertyChanged != null)
PropertyChanged.Invoke(this, new PropertyChangedEventArgs("IsSelected"));
}
}
}
The Problem:
The behaviour that I want is when the user checks a checkbox, it should set the IsSelected property of TreeField (it does that right now) but then I want to go back to the ViewModel and make sure that this specific TreeField is added to SelectedFields. I don't really understand what the PropertyChangedEvent.Invoke does and who will receive that event? How can I make sure that SelectedFields gets populated so when AddFields() is invoked it has all the TreeField data instances which were checked?

You could iterate through the TreeFieldData objects in the TreeFieldData collection and hook up an event handler to their PropertyChanged event and then add/remove the selected/unselected items from the SelectedFields collection, e.g.:
public MultipleColumnsSelectorVM()
{
Initialize();
//do this after you have populated the TreeFieldData collection
foreach (TreeFieldData data in TreeFieldData)
{
data.PropertyChanged += OnPropertyChanged;
}
}
private void OnPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName == "IsSelected")
{
TreeFieldData data = sender as TreeFieldData;
if (data.IsSelected && !SelectedFields.Contains(data))
SelectedFields.Add(data);
else if (!data.IsSelected && SelectedFields.Contains(data))
SelectedFields.Remove(data);
}
}

The subscriber of the PropertyChanged event is the view, so that if you change IsSelected programmatically the view knows it needs to update.
To insert the selected TreeField into your list you would add this code to your setter.
Also, you could define the following function which makes the notification much easier if you have many properties:
private void NotifyPropertyChange([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
The CallerMemberName attribute instructs the compiler to automatically insert the name of the property calling the method. The ? after PropertyChanged is a shorthand to your comparison to not null.
The setter of IsSelected can then be changed to
set
{
_isSelected = value;
if (value) { viewModel.SelectedFields.Add(this); }
else { viewModel.SelectedFields.Remove(this); }
NotifyPropertyChange();
}
Of course you would need to provide the TreeFieldData with the ViewModel instance, e.g. in the constructor.
I don't know if SelectedFields is bounded/shown in your view. If yes and you want the changes made to the list to be shown, you should change List to ObservableCollection.

WPF textblock binding in XAML

I'm updating some existing WPF code and my application has a number of textblocks defined like this:
<TextBlock x:Name="textBlockPropertyA"><Run Text="{Binding PropertyA}"/></TextBlock>
In this case, "PropertyA" is a property of my business class object defined like this:
public class MyBusinessObject : INotifyPropertyChanged
{
private void OnPropertyChanged(PropertyChangedEventArgs e)
{
if (PropertyChanged != null)
{
PropertyChanged(this, e);
}
}
private string _propertyA;
public string PropertyA
{
get { return _propertyA; }
set
{
if (_propertyA == value)
{
return;
}
_propertyA = value;
OnPropertyChanged(new PropertyChangedEventArgs("PropertyA"));
}
}
// my business object also contains another object like this
public SomeOtherObject ObjectA = new SomeOtherObject();
public MyBusinessObject()
{
// constructor
}
}
Now I have a TextBlock that I need to bind to one of the properties of ObjectA which, as you can see, is an object in MyBusinessObject. In code, I'd refer to this as:
MyBusinessObject.ObjectA.PropertyNameHere
Unlike my other bindings, "PropertyNameHere" isn't a direct property of MyBusinessObject but rather a property on ObjectA. I'm not sure how to reference this in a XAML textblock binding. Can anyone tell me how I'd do this? Thanks!

Before <Run Text="{Binding ObjectA.PropertyNameHere}" /> will work you have to make ObjectA itself a property because binding will only work with properties not fields.
// my business object also contains another object like this
public SomeOtherObject ObjectA { get; set; }
public MyBusinessObject()
{
// constructor
ObjectA = new SomeOtherObject();
}

You can simply type this:
<TextBlock Text="{Binding ObjectA.PropertyNameHere"/>
You may want to implement INotifyPropertyChanged within your ObjectA class, as changing properties of the class will not be picked up by the PropertyChanged methods in your MyBusinessObject class.

Try to instantiate ObjectA in the same way as you are doing for PropertyA (Ie. as a property, with a public getter / setter, and calling OnPropertyChanged), then your XAML can be :
<TextBlock Text="{Binding ObjectA.PropertyNameHere}" />

You can do a same as you do for PropertyA like follows,
OnPropertyChanged(new PropertyChangedEventArgs("ObjectA"));
on Designer XAML,
<TextBlock x:Name="ObjectAProperty" Text="{Binding ObjectA.PropertyNameHere}" />

Try this:
In code:
public MyBusinessObject Instance { get; set; }
Instance = new MyBusinessObject();
In XAML:
<TextBlock Text="{Binding Instance.PropertyNameHere" />

How to get checked checkbox content in windows phone app?

I am developing windows phone app .In app,I want to put multiple check box.I able to put multiple check box.But when i checked on check box i want getting its content(check box content).For that i am use checked event and also click event but i cant get result as i want.My xaml code is as below:
<ListBox Name="hobbylist" ItemsSource="{Binding}" Margin="0,0,10,10" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Name="hobbycheck" Content="{Binding Path=Title}"
IsChecked="{Binding IsSelected}" ClickMode="Release"
Click="CheckBox_Click" ></CheckBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Please help me ...

I think you are using the Checkbox not correctly according to its purpose.
Checkbox should represent a state (e.g. yes/no) regarding a subject. Still, you just have to use the Checked event when the checkbox gets checked and Unchecked otherwise.
So in the Checked event, get the content you wish.
Edit
You have to maintain this with the MVVM pattern somehow. For that, there are plenty of examples in the internet, I am sure you can handle that.
Instead of having Click="CheckBox_Click", use the Check event :
private void CheckBox_Checked (Object sender, EventArgs e)
{
var currentCheckBoxItem = sender as CheckBox;
if (currentCheckBoxItem.IsChecked == true)
{
//you manipulation here...
}
}
Still. this might just not work, because you haven't provided enough details of your matter.
Edit 2 A little of MVVM...
First, make a Hobby model class, with a single string property (you might change your mind later to add more properties, Idk) :
public class Hobby : INotifyPropertyChanged
{
private string _name;
public string Name
{
get
{
return _name;
}
set
{
_name = value;
OnPropertyChanged();
}
}
private bool _isSelected;
public bool IsSelected
{
get
{
return _isSelected;
}
set
{
_isSelected = value;
OnPropertyChanged();
}
}
//You can add some multiple properties here (***)
public Hobby (string hobbyName, bool isSelected)
{
Name = hobbyName;
IsSelected = isSelected;
}
//INotifiyPropertyChanged interface member implementation ...
}
(* ) For example, a short description and then bind it on the View. The major advantage of this MVVM pattern is logic separation, so if something has to change, the separation of each component makes it easier.
Second, create a ViewModel class (you should implement INotifyPropertyChanged interface) :
public class HobbiesViewModel : INotifyPropertyChanged
{
private ObservableCollection<Hobby> _hobbies;
public ObservableCollection<Hobby> HobbiesCollection
{
get
{
return _hobbies;
}
set
{
_hobbies = value;
OnPropertyChanged();
}
}
//Constructor
public HobbiesViewModel
{
HobbiesCollection = new ObservableCollection<Hobby>();
}
//INotifyPropertyChanged interface member implementation ...
}
Third, create an instance of the ViewModel (the ObservableCollection). Use this quick help out : In the App.xaml.cs, create a static object and use it through the app as you need it :
public partial class App
{
//This already exists in your app's code, but I've written it to
//make an idea where to write the Hobbies object
public static PhoneApplicationFrame RootFrame { get; private set; }
public static HobbiesViewModel Hobbies;
//Again, the already existing constructor
public App()
{
...
Hobbies = new HobbiesViewModel();
}
Now, you almost have it all set; You have the Model, you have the ViewModel, all that's left is to create the connection with the View. This can be easily done through binding. The ViewModel represents the DataContext of your control (in your case the LongListSelector, so in that View's (Page's) constructor, write the following statement :
yourListControlName.DataContext = App.Hobbies;
Now the binding is the only thing left. This is done in XAML code. I won't put a whole chunk of XAML code here, cause you know best how your control looks like. Still, judging by the short sample you provided, there a few adjustments only :
The items source of the list XAML control will be bound to the ObservableCollection object name of the ViewModel representing the control's DataContext. A bit fuzzy, huh? To be clearer, in this case, you need to write ItemsSource="{Binding HobbiesCollection}", the ObservableCollection. Also, in the template, you should have that CheckBox which is bound on your Model's properties :
<DataTemplate>
<StackPanel Orientation="Horizontal"> //StackPanel is kinda useless if you have
//only one child control in it. But I wrote
//according to your code.
<Checkbox Content="{Binding Name}" IsChecked="{Binding IsSelected, Mode=TwoWay}"/>
</StackPanel>
</DataTemplate>
Now, here things are a bit unclear to me. Why would you use the Checkbox? I've thought of the next possible scenario : You come with some string of your hobbies through deserialization of the Json Data. To add them to the ViewModel, you need only :
App.Hobbies.HobbiesCollection.Add(new Hobby("firstHobbyFromJson", true));
App.Hobbies.HobbiesCollection.Add(new Hobby("secondHobbyFromJson", true));
This would make all hobbies already selected in the View. I guess, you would add some other hobbies, the user doesn't have which are not selected and could add them now :
App.Hobbies.HobbiesCollection.Add(new Hobby("aNewHobby", false));
App.Hobbies.HobbiesCollection.Add(new Hobby("anotherNewHobby", false));
At this point, the user has all its previous hobbies in the list and as well some new hobbies you provided him. After his selection is done, if you need to serialize the Json with only the selected hobbies, you could get like this :
var userHobbies = App.Hobbies.HobbiesCollection.Where(h => h.IsSelected);
or with a foreach and get only those hobby objects which have the IsSelected property as true.
Good luck!

I found a Simpler solution.
My Model
You need to use two variables otherwise you may get an 'stackoverflowexception'
public class ModelObj
{
public int position { set; get; }
public bool isChecked
{
get { return IsChecked; }
set { IsChecked = value; }
}
public bool IsChecked;
}
Code to be added in xaml:
isChecked in xaml sets the ListView Checkbox
Mode=TwoWay updates the isChecked boolean value of the model class
<CheckBox IsChecked="{Binding isChecked , Mode=TwoWay}" Checked="checkBox_Checked" >
c# Code that handles the event
private void checkBox_Checked(object sender, RoutedEventArgs e)
{
foreach (ModelObj obj in listItem)
{
if (obj.isChecked == true)
{
int selectedPosition = obj.position;
}
}
}

Binding a property of an object of a class inside another doesn't work

I have an strange problem with binding in WPF.
There is a simple sample of what i'm doing:
public class Project
{
private string _title;
public string Title
{
get { return _title; }
set
{
_title= value;
RaisePropertyChanged("Title");
}
}
}
public class People
{
private string _name;
public string Name
{
get { return _name; }
set
{
_name= value
RaisePropertyChanged("Name");
}
}
private Project _project;
public Project Project
{
get { return _project; }
set
{
_project= value;
RaisePropertyChanged("Project");
}
}
}
Now I bound a grid to an instance of People in the view and it can bind controls to Project and Name of People class, but I really can't understand why I can not bind to Project.Title.
I write my XAML code like this:
<TextBox Text="{Binding Name}"/>
<Combobox .... SelectedItem="{Binding Project}"/>
<TextBox Text="{Binding Project.Title}"/>
The first two controls above get bounded correctly but the last TextBox doesn't. I have no idea why it can access to Project but not Project.Title? It's an another weird thing I've already seen in WPF!

Perhaps your combo box selection is not setting the selected value without using Mode=TwoWay:
<Combobox .... SelectedItem="{Binding Project, Mode=TwoWay}"/>
Once the Project is set, the property is set, the Title will show.

Try "Path=Project.Title".
Worked for me in a same case.

if your DataContext is an instance of your Person object it should work. you can check your bindings at runtime with Snoop (http://snoopwpf.codeplex.com/) btw. give it a try :)
you can also do
<TextBox DataContext="{Binding Project, Mode=OneWay}" Text="{Binding Title}"/>

Thank you everyone,but the problem wasn't what i thought.Actually i used PropertyChanged.Fody to inject INotifyPropertyChanged into properties,but it seems it doesn't do what i expected.I implemented INotifyPropertyChanged myself and it works fine now.