WPF ListBox selected item, stays selected while loosing focus - wpf

I have a parent ListBox which is made of two listboxes, and a child listbox, so 3 listboxes in total. The Item source for the first two are just two separate collections, these collections contain inner collection which then become an item source for the third listbox. If I select second item then the child listbox is populated again, if I go to the second parent listbox and chose something then the child listbox is populated. The problem is that if at this point I go back to the first listbox, and try to select an item that was previously selected, nothing happens, while im expecting it to populate the child listbox again.
Hopefully this makes sense, here is the XAML:
<Window x:Class="ExampleForStackOverFlow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="350" Height="350">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<TextBlock Text="Parents" FontSize="20" FontWeight="Bold" Background="LightBlue"/>
<TextBlock Text="First Listbox" FontSize="16" FontWeight="Bold" Background="LightBlue"/>
<ListBox ItemsSource="{Binding Parents1}" SelectedItem="{Binding SelectedParent}" BorderThickness="0">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Text="Second Listbox" FontSize="16" FontWeight="Bold" Background="LightBlue"/>
<ListBox ItemsSource="{Binding Parents2}" SelectedItem="{Binding SelectedParent2}" BorderThickness="0">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Children" FontSize="16" FontWeight="Bold" Background="LightBlue"/>
<ListBox ItemsSource="{Binding Children}" BorderThickness="0">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
This is the ViewModel
using System.Collections.ObjectModel;
namespace ExampleForStackOverFlow
{
public class MainWindowViewModel : NotifyPropertyChanged
{
public MainWindowViewModel()
{
Parents1 = new ObservableCollection<Parent>();
Parents2 = new ObservableCollection<Parent>();
foreach (var parent in ParentCollection.GetParents())
{
if (parent.Name == "Parent 1" || parent.Name == "Parent 2")
{
Parents1.Add(parent);
}
else
{
Parents2.Add(parent);
}
}
Children = new ObservableCollection<Child>();
}
public ObservableCollection<Parent> Parents1 { get; set; }
public ObservableCollection<Parent> Parents2 { get; set; }
private ObservableCollection<Child> children;
public ObservableCollection<Child> Children
{
get { return children; }
set
{
children = value;
OnPropertyChanged("Children");
}
}
private Parent selectedParent;
public Parent SelectedParent
{
get { return selectedParent; }
set
{
selectedParent = value;
Children = SelectedParent.Children;
OnPropertyChanged("SelectedParent");
}
}
private Parent selectedParent2;
public Parent SelectedParent2
{
get { return selectedParent2; }
set
{
selectedParent2 = value;
Children = SelectedParent2.Children;
OnPropertyChanged("SelectedParent2");
}
}
}
public class Parent : NotifyPropertyChanged
{
private string name;
public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChanged("Name");
}
}
private ObservableCollection<Child> childres;
public ObservableCollection<Child> Children
{
get { return childres; }
set
{
childres = value;
OnPropertyChanged("Children");
}
}
}
public class Child : NotifyPropertyChanged
{
private string name;
public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChanged("Name");
}
}
}
}

The value for selected did not change so it is not going to fire the set
If you set it to null then a re-select will be a new value
private Parent selectedParent;
public Parent SelectedParent
{
get { return selectedParent; }
set
{
selectedParent2 = null;
selectedParent = value;
Children = SelectedParent.Children;
OnPropertyChanged("SelectedParent");
OnPropertyChanged("SelectedParent2"); // you may not need this
}
}
private Parent selectedParent2;
public Parent SelectedParent2
{
get { return selectedParent2; }
set
{
selectedParent = null;
selectedParent2 = value;
Children = SelectedParent2.Children;
OnPropertyChanged("SelectedParent"); // you may not need this
OnPropertyChanged("SelectedParent2");
}
}

Related

How to update a listview from viewmodel binded model observable collection to itemsource

I have a list view, which further contains textbox in datatemplate having columns Name, Address, Country.
Now this listview's Itemsource is binded to observable collection of a model in my viewmodel class.
I am updating the ObjModel (of typeObservableCollection<Model>) by making name and address empty, on some condition in VM, and i can see the values of name, empty in my ObjModel object in viewmodel class.
But those changes are not reflected in UI (ListView), Am i missing something , How to update the listview.
My View is something like this:
<DataTemplate x:Key="EquipmentItemTemplate">
<Grid
x:Name="ListItem"
Height="40"
ZIndex="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=Name}" />
<TextBlock Grid.Column="1" Text="{Binding Path=Address}" />
<TextBlock Grid.Column="2" Text="{Binding Path=Country}" />
</Grid>
</DataTemplate>
<ListView x:Name="MaintenanceElements"
ItemContainerStyle="{StaticResource SequenceListItemStyle}"
ItemTemplate="{StaticResource EquipmentItemTemplate}"
ItemsSource="{Binding EquipmentMaintenanceEntityItemsCollection}"
SelectedItem="{Binding SelectedMaintenanceElement}">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn
Width="200"
local:GridViewSort.PropertyName="Name"
Header="Name" />
<GridViewColumn
Width="250"
local:GridViewSort.PropertyName="Address"
Header="Address" />
<GridViewColumn
Width="250"
local:GridViewSort.PropertyName="Country"
Header="Country" />
</GridView>
</ListView.View>
</ListView>
View Model contains:
public ObservableCollection<Model> ObjModel { get; set; }
Some where on some condition i do
ObjModel[0].Name= string.Empty;
It do not update in ListView because its itemsource is binded to Model object observable collection, how to update ListView from here?
My model is:
public class EquipmentMaintenanceModel : ChangeTracker, INotifyPropertyChanged
{
private string name;
private string address;
private string country;
public string Name
{
get { return this.name; }
set { this.name = value; }
}
public string Address
{
get { return this.address; }
set { this.address = value; }
}
public string Country
{
get { return this.country; }
set { this.country = value; }
}
private void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
In your model, you need to fire PropertyChanged when you set the value of a property. eg:
public string Name
{
get { return this.name; }
set
{
if(this.name != value)
{
this.name = value;
OnPropertyChanged(Name);
}
}
}

WPF: Use property field value in ComboBox instead of the object name

My combobox is bound with google search results.
<ComboBox
Style="{StaticResource ComboBoxStyle}"
IsEditable="True"
IsTextSearchEnabled="False"
ItemsSource="{Binding GoogleSuggest.SuggestedQueries}"
SelectedItem="{Binding GoogleSuggest.SelectedQuery}"
>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source={Binding IconPath, Converter={StaticResource IconPathToImageSource} Width="32" Height="32" />
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding Query}" Margin="0,8" FontSize="24" />
<TextBlock Text="{Binding URL}" Margin="0,8" FontSize="16" />
</StackPanel>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
My Model looks like this
public class Model_SuggestedQueries : ViewModelBase
{
private string _Query = string.Empty;
public string Query
{
get { return _Query; }
set
{
if (_Query != value)
{
_Query = value;
base.RaisePropertyChanged("Query");
}
}
}
private int _Index = 0;
public int Index
{
get { return _Index; }
set
{
if (_Index != value)
{
_Index = value;
base.RaisePropertyChanged("Index");
}
}
}
private string _URL = 0;
public string URL
{
get { return _URL; }
set
{
if (_URL != value)
{
_URL = value;
base.RaisePropertyChanged("URL");
}
}
}
private string _Icon = 0;
public string Icon
{
get { return _Icon; }
set
{
if (_Icon != value)
{
_Icon = value;
base.RaisePropertyChanged("Icon");
}
}
}
}
But when I make a selection, the .Text field looked like this.
How can I show the "Query" value instead of the object name?
Have you tried to add the DisplayMemberPath attribute to your ComboBox Control ?
<ComboBox
Style="{StaticResource ComboBoxStyle}"
IsEditable="True"
IsTextSearchEnabled="False"
ItemsSource="{Binding GoogleSuggest.SuggestedQueries}"
SelectedItem="{Binding GoogleSuggest.SelectedQuery}"
DisplayMemberPath="Query"
>
If it doesn't work you may try to override the ToString() method of your Model_SuggestedQueries class.
Add TextSearch.TextPath="Query" to your ComboBox markup.
See MSDN Textsearch.Textpath
I think there is an easier way to achieve your goal,try this:
Just override the ToString() function of your class"Model_SuggestedQueries"
:p

WPF Control losing focus when clicking on a tab

On a tabcontrol I have several tabpages, on one of the tabs there is a textbox in the content.
This textbox is content bound with a simple Path=PropertyName and UpdateSourceTrigger=LostFocus. The reason I am using LostFocus is I trap the Lost focus event of the Textbox and possibly reformat the text. This is a "time" textbox and if they enter "0900", I want to reformat to "09:00". This part works great when I press the tab key to move to the next control, but if I type "0900" then press one of the other tabs, I hit the lost focus and re-format the value in the textbox, BUT the bind never gets called to update my object. When I come back to the tab, the value is blanked out (or reset to the original value on the object)
Any ideas why textbox does not trigger the Binding update when changing tab page?
Note: this also happens with a regular textbox that does wire to the lost focus event. It seems to have something to do with click on the tab.
[[Added Code ]]
More notes:
1. I am dynamically creating the tabs and controls on the tab (not sure if that has something to do with it or not)
2. I am using the Prism libraries
MainWindow Xaml
<Window.Resources>
<DataTemplate DataType="{x:Type ctrls:myTextBoxDef}">
<Grid Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Text="{Binding LabelText}" />
<TextBox Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Text="{Binding DocValue,
Mode=TwoWay,
ValidatesOnDataErrors=True,
UpdateSourceTrigger=LostFocus}"
/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<TabControl HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
IsTabStop="False"
ItemsSource="{Binding Tabs, Mode=OneWay}"
SelectedItem="{Binding SelectedTab,
Mode=TwoWay,
NotifyOnSourceUpdated=True}"
>
<TabControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Margin="18,14,22,0"
Text="{Binding HeaderText}" />
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
<!-- Content -->
<TabControl.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<AdornerDecorator Grid.Column="0">
<ItemsControl Grid.Column="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsTabStop="False"
ItemsSource="{Binding Controls,
Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Grid.Column="0"
Margin="10,5,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</AdornerDecorator>
</Grid>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Window>
Main Window Code Behind
public partial class MainWindow : Window
{
private DataContextObject obj = new DataContextObject();
public MainWindow()
{
InitializeComponent();
myTextBoxDef txt1 = new myTextBoxDef(obj, "Textbox 1", "TAB1TextBox1");
myTextBoxDef txt1b = new myTextBoxDef(obj, "Textbox 1 value", "TAB1TextBox1");
myTextBoxDef txt2 = new myTextBoxDef(obj, "Textbox 2", "TAB1TextBox2");
myTextBoxDef txt2b = new myTextBoxDef(obj, "Textbox 2 value", "TAB1TextBox2");
obj.Tabs.Add(new myTabDef("Tab 1", new ObservableCollection<myTextBoxDef>() { txt1, txt2 }));
obj.Tabs.Add(new myTabDef("Tab 2", new ObservableCollection<myTextBoxDef>() { txt1b, txt2b }));
obj.SelectedTab = obj.Tabs[0];
this.DataContext = obj;
}
}
Supporting objects
public class DataContextObject : NotificationObject
{
List<myTabDef> _tabs = new List<myTabDef>();
public List<myTabDef> Tabs
{
get
{
return _tabs;
}
}
private myTabDef _item;
public myTabDef SelectedTab
{
get
{ return _item; }
set
{
_item = value;
this.RaisePropertyChanged("SelectedItem");
}
}
private string _txt1 = "";
public string TAB1TextBox1
{
get { return _txt1; }
set
{
_txt1 = value;
this.RaisePropertyChanged("TAB1TextBox1");
}
}
private string _txt2 = "";
public string TAB1TextBox2
{
get { return _txt2; }
set
{
_txt2 = value;
this.RaisePropertyChanged("TAB1TextBox2");
}
}
private string _txt3 = "";
public string TAB2TextBox1
{
get { return _txt3; }
set
{
_txt3 = value;
this.RaisePropertyChanged("TAB2TextBox1");
}
}
}
public class myTabDef
{
public myTabDef(string tabText, ObservableCollection<myTextBoxDef> controls)
{
HeaderText = tabText;
_left = controls;
}
public string HeaderText { get; set; }
private ObservableCollection<myTextBoxDef> _left = new ObservableCollection<myTextBoxDef>();
public ObservableCollection<myTextBoxDef> Controls
{
get
{
return _left;
}
}
}
public class myTextBoxDef : NotificationObject
{
public myTextBoxDef(NotificationObject bound, string label, string bindingPath)
{
LabelText = label;
Path = bindingPath;
BoundObject = bound;
BoundObject.PropertyChanged += BoundObject_PropertyChanged;
}
public string LabelText
{
get;
set;
}
public NotificationObject BoundObject
{
get;
set;
}
public string DocValue
{
get
{
return PropInfo.GetValue(BoundObject, null) as string;
}
set
{
PropInfo.SetValue(BoundObject, value, null);
}
}
protected virtual void BoundObject_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName.Equals(Path))
{
this.RaisePropertyChanged("DocValue");
}
}
public string Path
{
get;
set;
}
private PropertyInfo pi = null;
protected PropertyInfo PropInfo
{
get
{
if (pi == null && BoundObject != null && !string.IsNullOrEmpty(Path))
{
PropertyInfo[] properties = BoundObject.GetType().GetProperties(BindingFlags.Public | BindingFlags.Instance);
pi = properties.Where((prop) => string.Compare(prop.Name, Path, true) == 0).FirstOrDefault();
}
return pi;
}
}
}
We have found a solution. I came cross this set of postings
https://groups.google.com/forum/#!topic/wpf-disciples/HKUU61A5l74
They talk about a control called TabControlEx. Towards the bottom (5th from the bottom) you will see a posting by Sacha Barber that has a zip file with an example.
It solved all our problems we were having.
here is also another link where the code for the Class is posted
http://updatecontrols.codeplex.com/discussions/214434

How to make ListBox editable when bound to a List<string>?

Edit: The basic problem is binding a List to ListBox(or any other control). So I am editing the question.
I bound a list of string to a ListBox as below. However when I change the contents of the textbox it is not changing the string in the source list.Why?
public partial class MainWindow : Window
{
List<string> _nameList = null;
public List<string> NameList
{
get
{
if (_nameList == null)
{
_nameList = new List<string>();
}
return _nameList;
}
set
{
_nameList = value;
}
}
public MainWindow()
{
NameList.Add("test1");
NameList.Add("test2");
InitializeComponent();
}
And the XAML
<ListBox Grid.Row="0" Grid.Column="0" DataContext="{Binding ElementName=main}" ItemsSource="{Binding NameList}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .,Mode=OneWayToSource , UpdateSourceTrigger=PropertyChanged}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The DataContext of each ListBoxItem is the string itself, so the path of your binding is empty (.). TwoWay and OneWayToSource bindings require a path, since you can't just replace the current DataContext. So you need to wrap your string in an object that exposes the string as a property:
public class StringItem
{
public string Value { get; set; }
}
Expose the strings as a list of StringItem:
public partial class MainWindow : Window
{
List<StringItem> _nameList = null;
public List<StringItem> NameList
{
get
{
if (_nameList == null)
{
_nameList = new List<StringItem>();
}
return _nameList;
}
set
{
_nameList = value;
}
}
public MainWindow()
{
NameList.Add(new StringItem { Value = "test1" });
NameList.Add(new StringItem { Value = "test2" });
InitializeComponent();
}
And bind to the Value property:
<ListBox Grid.Row="0" Grid.Column="0" DataContext="{Binding ElementName=main}" ItemsSource="{Binding NameList}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Value, UpdateSourceTrigger=PropertyChanged}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Note that StringItem will also need to implement INotifyPropertyChanged so that bindings are automatically updated. You should also expose the list as an ObservableCollection<T> rather than a List<T>
May be it helsp?
<ListBox Name="lsbList">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Path=Value}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
you can create a DataGridTemplateColumn.CellEditingTemplate with an itemscontrol and textboxes to edit your items
If I didn't misunderstand your question, it is pretty easy to implement. Look:
<ComboBox Text="My Comment 5 with addition." IsEditable="True" Height="25" Width="200">
<ComboBoxItem>My comment1</ComboBoxItem>
<ComboBoxItem>My comment2</ComboBoxItem>
</ComboBox>

WPF DataBound treeview expand / collapse

I'm just trying to find a way to control the expand / collapse of the TreeView nodes through the object they're bound to. The object has an IsExpanded property, and I want to use that to show the TreeView node itself expanded or collapsed based on that property.
Here's my code:
C#:
public partial class Window2 : Window
{
public Window2()
{
InitializeComponent();
this.DataContext = new List<Parent>() { Base.GetParent("Parent 1"), Base.GetParent("Parent 2") };
}
}
public class Base
{
public string Name { get; set; }
public bool IsExpanded { get; set; }
public static Parent GetParent(string name)
{
Parent p = new Parent() { Name = name };
p.Children.Add(new Child() { Name = "Child 1", GrandChildren = new ObservableCollection<GrandChild>() { new GrandChild() { Name = "Grandchild 1" } } });
p.Children.Add(new Child() { Name = "Child 2", GrandChildren = new ObservableCollection<GrandChild>() { new GrandChild() { Name = "Grandchild 1" } } });
p.Children.Add(new Child() { Name = "Child 3", GrandChildren = new ObservableCollection<GrandChild>() { new GrandChild() { Name = "Grandchild 1" } } });
return p;
}
}
public class Parent : Base
{
public ObservableCollection<Child> Children { get; set; }
public Parent()
{
this.Children = new ObservableCollection<Child>();
}
}
public class Child : Base
{
public ObservableCollection<GrandChild> GrandChildren { get; set; }
public Child()
{
this.GrandChildren = new ObservableCollection<GrandChild>();
}
}
public class GrandChild : Base
{
}
XAML:
<Window x:Class="HeterogeneousExperimentExplorer.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:HeterogeneousTree"
Title="Window2" Height="300" Width="300">
<Window.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Parent}" ItemsSource="{Binding Children}">
<TextBlock Text="{Binding Name}" />
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Parent}" ItemsSource="{Binding GrandChildren}">
<TextBlock Text="{Binding Name}" />
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</Window.Resources>
<Grid>
<TreeView ItemsSource="{Binding}" />
</Grid>
</Window>
Came up with solution:
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsNodeExpanded}"/>
</Style>
So the style gets the object bound to the TreeViewItem and looks at its IsNodeExpanded attribute and it assigns that value to the TreeViewItem.IsExpanded property. If you add Mode=TwoWay, they'll notify each other (TreeViewItem will tell the object when it has been expanded).

Resources