I have two List<ColumnClass>. one for left side listview and another for right side list view. these listviews are in a pop up box. I am modifying the List of both the Listviews and again assigning that to the Listview's ItemsSource. But this doesn't reflect in the UI immediatly. When I close the popup and open again it reflects the changes. What am I missing?
You should replace the List<T> with ObservableCollection<T>, ObservableCollections will update your ListView whenever an Item is removed, If you are just modifing properties your ColumnClass make sure your ColumnClass implements INotifyPropertyChanged this will allow the UI to update when a property changes.
Example:
Code:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
MyColumns.Add(new ColumnClass { Name = "Column1" });
MyColumns.Add(new ColumnClass { Name = "Column2" });
MyColumns.Add(new ColumnClass { Name = "Column3" });
}
private ObservableCollection<ColumnClass> _myColumns = new ObservableCollection<ColumnClass>();
public ObservableCollection<ColumnClass> MyColumns
{
get { return _myColumns; }
set { _myColumns = value; }
}
}
xaml:
<Window x:Class="WpfApplication8.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WpfApplication8" Height="368" Width="486" Name="UI" >
<Grid>
<ListView ItemsSource="{Binding ElementName=UI, Path=MyColumns}" DisplayMemberPath="Name" />
</Grid>
</Window>
Model:
public class ColumnClass : INotifyPropertyChanged
{
private string _name;
public string Name
{
get { return _name; }
set { _name = value; NotifyPropertyChanged("Name"); }
}
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Notifies the property changed.
/// </summary>
/// <param name="property">The info.</param>
public void NotifyPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
You should change List<T> to ObservableCollection<T> or BindingList<T>.
Reason, List doesnot implement INotifyPropertyChanged.
Related
I have simplified this problem down as much as I can. Basically I am overriding the "null" value of a combobox. So that if the item selected is deleted, it reverts back to "(null)". Unfortunately the behaviour of this is wrong, I hit delete, the ObservableCollection item is removed, thus the property binding is updated and it returns the "(null)" item as expected. But the combobox appearance shows blank. Yet the value its bound to is correct... this problem can be reproduced with the code below.
To reproduce this problem you select an item, and hit remove. Notice at this point the following line is called (when you remove the selected item). So its a good place to breakpoint.
if (m_Selected == null)
{
return Items[0]; //items 0 is ItemNull
}
Also notice that I have attmpted to fix it by Forcing a property update on the DisplayMemberPath. This did not work.
MainWindow.xaml
<Window x:Class="WPFCodeDump.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>
<ComboBox ItemsSource="{Binding Items}" SelectedItem="{Binding Selected, Mode=TwoWay}" DisplayMemberPath="Name"></ComboBox>
<Button Click="ButtonBase_OnClick">Remove Selected</Button>
</StackPanel>
</Window>
MainWindowViewModel.cs
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;
namespace WPFCodeDump
{
public abstract class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
//Item class
public class Item : ViewModelBase
{
public Item(string name)
{
m_Name = name;
}
public string Name
{
get { return m_Name; }
}
private string m_Name;
public void ForcePropertyUpdate()
{
OnPropertyChanged("Name");
}
}
//Item class
public class ItemNull : Item
{
public ItemNull()
: base("(null)")
{
}
}
class MainWindowViewModel : ViewModelBase
{
public MainWindowViewModel()
{
m_Items.Add(new ItemNull());
for (int i = 0; i < 10; i++)
{
m_Items.Add(new Item("TestItem" + i));
}
Selected = null;
}
//Remove selected command
public void RemoveSelected()
{
Items.Remove(Selected);
}
//The item list
private ObservableCollection<Item> m_Items = new ObservableCollection<Item>();
public ObservableCollection<Item> Items
{
get { return m_Items; }
}
//Selected item
private Item m_Selected;
public Item Selected
{
get
{
if (m_Selected == null)
{
return Items[0]; //items 0 is ItemNull
}
return m_Selected;
}
set
{
m_Selected = value;
OnPropertyChanged();
if(m_Selected!=null) m_Selected.ForcePropertyUpdate();
}
}
}
}
MainWindow.xaml.cs
using System.Windows;
namespace WPFCodeDump
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainWindowViewModel();
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
((MainWindowViewModel) DataContext).RemoveSelected();
}
}
}
Result:
A nice binding issue you found there. But as always, it's our fault, not theirs :)
The issue(s) is(are), using DisplayMemberPath with SelectedItem.
The DisplayMemberPath doesn't give a f*** about the changed SelectedItem.
What you have to do, to resolve this issue, are two things:
First, in the RemoveSelected method, set the Selected property to null (to force an update on the binding):
public void RemoveSelected()
{
Items.Remove(Selected);
Selected = null;
}
Then, in the XAML-definition, change the bound property:
<ComboBox ItemsSource="{Binding Items}"
SelectedValue="{Binding Selected, Mode=TwoWay}"
DisplayMemberPath="Name"/>
Binding the SelectedValue property will correctly update the displayed text in the ComboBox.
I have dynamic listbox contains textbox to display list items and so I can edit listbox item. My application setting file contains string collection which I want to bind for that listbox. I also want to update that setting files on every change of listbox item, I created class which implements INotifyProprtyChanged. I have converted string collection from settings file into observable collection of custom type which has string property. I bind textbox to property of that custom class and update source property on property change. I want to update observable collection as well. and that updates my app setting file as well. Please help me on this. Any help would be really appreciated. My code:
public class WindowViewModel : INotifyPropertyChanged
{
private ObservableCollection<UrlModel> customcollection;
public ObservableCollection<UrlModel> CustomCollection
{
get { return customcollection; }
set
{
customcollection = value;
NotifyPropertyChanged("CustomCollection");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(string property)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
public WindowViewModel()
{
List<string> customlist = Properties.Settings.Default.CustomList.Cast<string>().ToList();
List<UrlModel> urllist = new List<UrlModel>();
urllist = customlist.Select(item => new UrlModel() { urlString = item }).ToList();
CustomCollection = new ObservableCollection<UrlModel>(urllist);
}
}
public class UrlModel : INotifyPropertyChanged
{
private string url;
public string urlString
{
get { return url; }
set
{
url = value;
NotifyPropertyChanged("urlString");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(string property)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
ViewModel = new WindowViewModel();
ListTwo.ItemsSource = ViewModel.CustomCollection;
}
private WindowViewModel viewModel;
public WindowViewModel ViewModel
{
get { return viewModel; }
set{
viewModel = value;
DataContext = value;
}
}
}
}
Add property changed event handler for each url when inserting into ObservableCollection
public WindowViewModel()
{
List<string> customlist = Properties.Settings.Default.CustomList.Cast<string>().ToList();
List<UrlModel> urllist = new List<UrlModel>();
urllist = customlist.Select(item => new UrlModel() { urlString = item }).ToList();
CustomCollection = new ObservableCollection<UrlModel>(urllist);
foreach(var model in CustomCollection)
{
model.PropertyChaged += SettingsUpdater; //Settings update fucntion
}
}
A naive implementation of SettingsUpdater would just update the whole list of urls in settings whenever one of them changes.
I believe you are using data template to make your listbox editable. If that is the case, while binding the text, include Text="{Binding urlString,UpdateSourceTrigger=PropertyChanged}" in the Xaml code.
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="EditableText" Text="{Binding urlString,UpdateSourceTrigger=PropertyChanged}"/>
</DataTemplate>
</ListBox.ItemTemplate>
I am trying to work out wpf with some difficulties. This ComboBox seems a very basic issue but I can't have it populated even after reading all possible similar post.
The extra difficulty I think is that the ComboBox is defined in a resource, here is the resource code:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:DiagramDesigner">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/Shared.xaml"/>
<ResourceDictionary Source="Styles/ToolBar.xaml"/>
</ResourceDictionary.MergedDictionaries>
<ToolBar x:Key="MyToolbar" Height="120">
<!--Languages-->
<GroupBox Header="Localization" Style="{StaticResource ToolbarGroup}" Margin="3">
<Grid>
<ComboBox Height="23" HorizontalAlignment="Center"
VerticalAlignment="Top" Width="120"
ItemsSource="{Binding _langListString}"
DisplayMemberPath="ValueString"
SelectedValuePath="ValueString"
SelectedValue="{Binding LangString}"
/>
</Grid>
</GroupBox>
</ToolBar>
My data object is defined as follow:
public partial class Window1 : Window
{
List<ComboBoxItemString> _langListString = new List<ComboBoxItemString>();
// Object to bind the combobox selections to.
private ViewModelString _viewModelString = new ViewModelString();
public Window1()
{
// Localization settings
_langListString.Add(new ComboBoxItemString()); _langListString[0].ValueString = "en-GB";
_langListString.Add(new ComboBoxItemString()); _langListString[1].ValueString = "fr-FR";
_langListString.Add(new ComboBoxItemString()); _langListString[2].ValueString = "en-US";
// Set the data context for this window.
DataContext = _viewModelString;
InitializeComponent();
}
And the modelview:
/// This class provides us with an object to fill a ComboBox with
/// that can be bound to string fields in the binding object.
public class ComboBoxItemString
{
public string ValueString { get; set; }
}
//______________________________________________________________________
//______________________________________________________________________
//______________________________________________________________________
/// Class used to bind the combobox selections to. Must implement
/// INotifyPropertyChanged in order to get the data binding to
/// work correctly.
public class ViewModelString : INotifyPropertyChanged
{
/// Need a void constructor in order to use as an object element
/// in the XAML.
public ViewModelString()
{
}
private string _langString = "en-GB";
/// String property used in binding examples.
public string LangString
{
get { return _langString; }
set
{
if (_langString != value)
{
_langString = value;
NotifyPropertyChanged("LangString");
}
}
}
#region INotifyPropertyChanged Members
/// Need to implement this interface in order to get data binding
/// to work properly.
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
#endregion
}
I just don't know what to try else. Is anyone has an idea of what is going on, and why the combobox stays empty?
Many thanks.
you can just bind to public properties
ItemsSource="{Binding _langListString}"
can not work because _langListString is not a public property
By my analysis the problem consist in your DataContext.
DataContext = _viewModelString;
If you give the viewModelString to the DataContext you have to have the _langListString >defined there, in order to the combobox know which item it is bound to.
This is what I would do:
Add List _langListString = new List(); to the >ModelView.
_langListString would be _viewModelString._langListString.add(Your Items) - be >carefull to instatiate the _langList when you create your _viewModelString object.
Then I think the rest would work.
Many thanks, I have the changes you've suggested but this combobox still stays empty :-(
The new modelview looks like this:
/// Class used to bind the combobox selections to. Must implement
/// INotifyPropertyChanged in order to get the data binding to
/// work correctly.
public class ViewModelString : INotifyPropertyChanged
{
public List<ComboBoxItemString> _langListString {get;set;}
/// Need a void constructor in order to use as an object element
/// in the XAML.
public ViewModelString()
{
// Localization settings
_langListString = new List<ComboBoxItemString>();
ComboBoxItemString c;
c = new ComboBoxItemString(); c.ValueString = "en-GB"; _langListString.Add(c);
c = new ComboBoxItemString(); c.ValueString = "fr-FR"; _langListString.Add(c);
c = new ComboBoxItemString(); c.ValueString = "en-US"; _langListString.Add(c);
}
private string _langString = "en-GB";
/// String property used in binding examples.
public string LangString
{
get { return _langString; }
set
{
if (_langString != value)
{
_langString = value;
NotifyPropertyChanged("LangString");
}
}
}
#region INotifyPropertyChanged Members
/// Need to implement this interface in order to get data binding
/// to work properly.
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
#endregion
}
The data object:
// Object to bind the combobox selections to.
private ViewModelString _viewModelString;
public Window1()
{
// Set the data context for this window.
_viewModelString = new ViewModelString();
DataContext = _viewModelString;
InitializeComponent();
}
And I have tried all possible combination in the combobox (_langListString, _viewModelString._langListString, _viewModelString) it just doesn't work:
<ComboBox Height="23" HorizontalAlignment="Center"
VerticalAlignment="Top" Width="120"
ItemsSource="{Binding _langListString}"
DisplayMemberPath="ValueString"
SelectedValuePath="ValueString"
SelectedValue="{Binding LangString}"
/>
I tend to think that this xaml is making things really complicated without possibility of debugging. Is anyone can help???
I have the following simple WPF-app:
<Window x:Class="TabControlOutOfRangeException.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">
<TabControl ItemsSource="{Binding ItemsSource}"
SelectedIndex="{Binding SelectedIndex, IsAsync=True}" />
</Window>
with following simple code-behind:
using System.Collections.Generic;
namespace TabControlOutOfRangeException
{
public partial class MainWindow
{
public List<string> ItemsSource { get; private set; }
public int SelectedIndex { get; set; }
public MainWindow()
{
InitializeComponent();
ItemsSource = new List<string>{"Foo", "Bar", "FooBar"};
DataContext = this;
}
}
}
When I click on the second tab ("Bar"), nothing is displayed. When I click again on any tab, I get an IndexOutOfRangeException. Setting IsAsync to False, the TabControl works.
Unfortunately, I have the requirement to query the user a "Save changes?" question when he leaves the current tab. So I wanted to set the SelectedIndex back to the old value within the set-property. Obviously this doesn't work. What am I doing wrong?
Update
I've subclassed the TabControl with the evil hack and it works for me. Here is the code of MainWindow.xaml:
<Window x:Class="TabControlOutOfRangeException.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:TabControlOutOfRangeException="clr-namespace:TabControlOutOfRangeException" Title="MainWindow" Height="350" Width="525">
<Grid>
<TabControlOutOfRangeException:PreventChangingTabsTabControl
ItemsSource="{Binding ItemsSource}"
SelectedIndex="{Binding SelectedIndex}"
CanChangeTab="{Binding CanChangeTab}" Margin="0,0,0,51" />
<CheckBox Content="CanChangeTab" IsChecked="{Binding CanChangeTab}" Margin="0,287,0,0" />
</Grid>
</Window>
And here MainWindow.xaml.cs:
using System.Collections.Generic;
using System.ComponentModel;
namespace TabControlOutOfRangeException
{
public partial class MainWindow : INotifyPropertyChanged
{
public int SelectedIndex { get; set; }
public List<string> ItemsSource { get; private set; }
public MainWindow()
{
InitializeComponent();
ItemsSource = new List<string> { "Foo", "Bar", "FooBar" };
DataContext = this;
}
private bool _canChangeTab;
public bool CanChangeTab
{
get { return _canChangeTab; }
set
{
_canChangeTab = value;
OnPropertyChanged("CanChangeTab");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string property)
{
var handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(property));
}
}
}
And finally the subclassed TabControl:
using System;
using System.Windows;
using System.Windows.Controls;
namespace TabControlOutOfRangeException
{
public class PreventChangingTabsTabControl : TabControl
{
private int _previousTab;
public PreventChangingTabsTabControl()
{
SelectionChanged += (s, e) =>
{
if (!CanChangeTab)
{
e.Handled = true;
SelectedIndex = _previousTab;
}
else
_previousTab = SelectedIndex;
};
}
public static readonly DependencyProperty CanChangeTabProperty = DependencyProperty.Register(
"CanChangeTab",
typeof(Boolean),
typeof(PreventChangingTabsTabControl)
);
public bool CanChangeTab
{
get { return (bool)GetValue(CanChangeTabProperty); }
set { SetValue(CanChangeTabProperty, value); }
}
}
}
I'd consider a redesign of that window instead of introducing a heap of new problems by just trial-and-erroring on the "IsAsync" property of the binding.
I am not sure if a tab control will allow this level of control you seek. You could try to catch the event when someone tries to change the selected item, but you would not be able to cancel it out. There is a way however, see Option 4 if you dont want to read the other suggestions.
Option 1: The custom control
I would consider writing a bit of custom code that mimics the functionality of an item container. Its easy to achieve your desired behaviour this way. Just bind a command to the buttons (or whatever control you wish the user to click on), and return CanExecute with false if there are still changes to be submitted - or ask your user whatever you want when it gets executed, and only change the content displayed (ie your custom "TabItem") if desired.
Option 2: Preventing the user by disabling the tabs
Another way would be to bind the "IsEnabled" property of each of the tabitems to a dependency property on your viewmodel, that controls which of them is available to the user. Like, you know that the first page still needs work, just disable all the other ones meanwhile. But be aware that right now you are not creating any TabItems - your content are just plain strings.
public List<TabItem> ItemsSource { get; private set; }
....
ItemsSource = new List<TabItem> { new TabItem() { Header = "Foo", Content = "Foo" }, new TabItem() { Header = "Bar", Content = "Bar" }, new TabItem() { Header = "FooBar", Content = "FooBar" } };
Since you don't want to prevent the user doing something but rather would like to ask to save the changes, i'd go for the custom control route. Still there is option 3.
Option 3: Popup window
Use a popup window and ask to save changes if the user is finished with changing whatever is on that page and clicks on the "Close" button (rather than the "Save" button that should also reside on the same page ;) )
Option 4: Check on StackOverflow
Actually i did that for you, and here is a solution another user has found for the exact same problem: WPF Tab Control Prevent Tab Change
The reason why i didnt post that up-front was that i personally wouldnt do it that way because, man do i HATE applications that do this.
Here you go.
Try actually implementing the SelectedIndex
namespace TabControlOutOfRangeException
{
public partial class MainWindow
{
public List<string> ItemsSource { get; private set; }
private int selectedIndex
public int SelectedIndex {
get { return selectedIndex; }
set { selecectedIndex = value; } }
public MainWindow()
{
InitializeComponent();
ItemsSource = new List<string>{"Foo", "Bar", "FooBar"};
DataContext = this;
}
}
}
If you want to be able to affect the TabControl the binding needs to be two-way, i.e. your code-behind needs to be able to notify the view that the property changed, for that you should implement INotifyPropertyChanged in your window, e.g.
public partial class MainWindow : INotifyPropertyChanged
private int _selectedIndex;
public int SelectedIndex
{
get { return _selectedIndex; }
set
{
if (_selectedIndex != value)
{
_selectedIndex = value;
OnPropertyChanged("SelectedIndex");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
Async bindings are usually for properties which have a long-running getter, with e.g. a database query, you should not need this here.
In case you want to to change the selectedIndex in the setter itself, then to get it updated on UI, you have to raise the property changed in an async manner like this -
public partial class MainWindow : INotifyPropertyChanged
private int _selectedIndex;
public int SelectedIndex
{
get { return _selectedIndex; }
set
{
if (_selectedIndex != value)
{
_selectedIndex = value;
OnPropertyChangedAsAsync("SelectedIndex");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
protected virtual void OnPropertyChangedAsAsync(string propertyName)
{
Dispatcher.CurrentDispatcher.BeginInvoke((Action)delegate { OnPropertyChanged(propertyName); }, DispatcherPriority.Render, null);
}
now I'm doing so Binding:
field:
private readonly RestaurantContext m_context = new RestaurantContext();
init:
m_context.Load(m_context.GetGroupQuery());
this.dataGridGroup.DataContext = m_context.Groups;
How do this in xaml ?
Juste expose your m_context, ensure that the class that encapsulate this property is set as the datacontext of your view and bind your dataGridGroup datacontext to your prperty.
For example :
public partial class Window1
{
public Window1()
{
InitializeComponent();
DataContext = new WindowViewModel();//this will set the WindowViewModel object below as the datacontext of the window
}
}
public class WindowViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void InvokePropertyChanged(PropertyChangedEventArgs e)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, e);
}
public WindowViewModel()
{
restContext = new RestaurantContext();//init 1
restContext.Load(restContext.GetGroupQuery());//init 2
InvokePropertyChanged(new PropertyChangedEventArgs("RestContext"));//notify the view th update datacontext
}
private RestaurantContext restContext;
/// <summary>
/// Gets or sets the RestContext (which will be vound to the datagrid datacontext)
/// </summary>
public RestaurantContext RestContext
{
get { return restContext; }
set
{
if (RestContext != value)
{
restContext = value;
InvokePropertyChanged(new PropertyChangedEventArgs("RestContext"));
}
}
}
}
/// <summary>
/// Whatever class
/// </summary>
public class RestaurantContext
{
public void Load(object getGroupQuery)
{
//Whatever here
}
public object GetGroupQuery()
{
//Whatever here
return new object();
}
IEnumerable Groups { get; set; }
}
XAML :
<Window x:Class="StackOverflow.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Width="100" Height="100" >
<Grid>
<DataGrid DataContex="{Binding RestContext.Groups}"></DataGrid>
</Grid>
</Window>
In your XAML:
<DataGrid x:Name="dataGridGroup" DataContext={Binding Groups} />
It will automatically bind to the Groups property of your ViewModel