Focus on selected ListViewItem when selectedIndex is changed due to binding - xaml

I have a listview that has the selectedIndex binded to the ViewModel.
When the ViewModel changes the selectedIndex the listview selects the new item, unfortunately it does not focus on it and if a lot items are present in the list then this is annoying for the user.
How can I change to focus to the selectedItem using XAML or at least respecting MVVM.
<ListView ItemsSource="{Binding allTags}" ItemTemplate="{StaticResource listTemplate}"
SelectedIndex="{Binding selectedIndex}">
</ListView>

You could use an attached behaviour to focus the TextBox:
public static class FocusExtension
{
public static bool GetIsFocused(TextBox textBox)
{
return (bool)textBox.GetValue(IsFocusedProperty);
}
public static void SetIsFocused(TextBox textBox, bool value)
{
textBox.SetValue(IsFocusedProperty, value);
}
public static readonly DependencyProperty IsFocusedProperty =
DependencyProperty.RegisterAttached("IsFocused", typeof(bool), typeof(FocusExtension),
new UIPropertyMetadata(false, OnIsFocusedPropertyChanged));
private static void OnIsFocusedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
TextBox textBox = d as TextBox;
if ((bool)e.NewValue)
{
textBox.Dispatcher.BeginInvoke(new Action(()=>
{
Keyboard.Focus(textBox);
}), DispatcherPriority.Background);
}
}
}
View:
<Window.DataContext>
<local:TestWindowViewModel></local:TestWindowViewModel>
</Window.DataContext>
<Window.Resources>
<DataTemplate x:Key="template">
<TextBox x:Name="listItemTextBox">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}" Value="True">
<Setter Property="local:FocusExtension.IsFocused" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</DataTemplate>
</Window.Resources>
<StackPanel>
<ListView ItemsSource="{Binding myList}" ItemTemplate="{StaticResource template}" SelectedIndex="{Binding SelectedIndex}"></ListView>
</StackPanel>
View Model:
public class TestWindowViewModel : INotifyPropertyChanged
{
public List<string> myList { get; set; }
private int _selectedIndex;
public int SelectedIndex
{
get { return _selectedIndex; }
set { _selectedIndex = value; }
}
public TestWindowViewModel()
{
myList = new List<string> { "one", "two", "three" };
SelectedIndex = 1;
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}

Related

How to trigger a trigger

My question relates to how to initiate as action based on user mouse input.
I have a wpf window that displays information on an organization. Some organizations are vendors in which case vendor information is displayed in another row of the grid. I use the following trigger to display/hide that row. This works as desired.
<RowDefinition>
<RowDefinition.Style>
<Style
TargetType="RowDefinition">
<Setter Property="Height" Value="0" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsVendor}" Value="True">
<Setter Property="Height" Value="*" />
</DataTrigger>
</Style.Triggers>
</Style>
</RowDefinition.Style>
</RowDefinition>
For an organization which is not a vendor, the user can click on a button that adds vendor information and links that new information to the organization. However, that action does not cause the trigger to fire. Is there a way to do that? Or is there a different approach that would work better?
In your case, I will use a converter and bind the value of Height property.
<RowDefinition>
<RowDefinition.Style>
<Style TargetType="RowDefinition">
<Setter Property="Height" Value="{Binding IsVendor, Converter={StaticResource IsVendorConverter}}" />
</Style>
</RowDefinition.Style>
</RowDefinition>
The converter will receive your boolean value (IsVendor) and returns "0" if IsVendor is false and "*" if IsVendor is true.
public class IsVendorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var isVendor = (bool)value;
if (isVendor)
{
return "*";
}
return "0";
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
You didn't share your xaml, but here is a sample used with a button (clicking one button changes the height of the other one).
<Window
x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp1"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
<Window.Resources>
<local:IsVendorConverter x:Key="IsVendorConverter" />
</Window.Resources>
<StackPanel Orientation="Horizontal">
<Button Width="200" Height="{Binding IsVendor, Converter={StaticResource IsVendorConverter}}" />
<Button Width="200" Height="100" Click="Button_Click"/>
</StackPanel>
</Window>
Code Behind:
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
private bool _isVendor = false;
public bool IsVendor {
get { return _isVendor; }
set { _isVendor = value; OnPropertyRaised("IsVendor"); }
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyRaised(string propertyname)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
IsVendor = true;
}
}

How to access a style inside user control in UWP

I have a user control like this:
<UserControl>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<HyperlinkButton Grid.Row="0" />
<TextBlock Name="textblock" Grid.Row="1"
Text="{Binding dailyText, ElementName=userControl}">
</TextBlock>
</Grid>
</UserControl>
Nevertheless, I don't know, how can I set a style from mainwindow to user control? I have solved the problem to access to other properties like this:
public static readonly DependencyProperty MyContentProperty =
DependencyProperty.Register("MyContent", typeof(object), typeof(Day), null);
public object MyContent
{
get { return (object)GetValue(MyContentProperty ); }
set { SetValue(MyContentProperty , value); }
}
And then
<local:Day MyContent="Hello World" />
However, it doesn't work the style. There is no change in the sytle.
Thank you.
(Modification)
Below is a mainWindow part.
<Page.Resources>
<Style TargetType="TextBlock" x:Name="MyTextBlockStyle">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="SelectionHighlightColor" Value="Red"/>
<Setter Property="FontSize" Value="10"/>
</Style>
</Page.Resources>
<local:Day MyStyle="{StaticResource MyTextBlockStyle}">
Behind-code part in userControl
public static readonly DependencyProperty MyStyleProperty =
DependencyProperty.Register("MyStyle", typeof(Style), typeof(Day), null);
public Style MyStyle
{
get { return (Style)GetValue(MyStyleProperty); }
set { SetValue(MyStyleProperty, value); }
}
You can use PropertyMetadata to initialise and set Style to your TextBlock. Like,
public Style MyStyle
{
get { return (Style)GetValue(MyStyleProperty); }
set { SetValue(MyStyleProperty, value); }
}
public static readonly DependencyProperty MyStyleProperty =
DependencyProperty.Register("MyStyle", typeof(Style), typeof(Day),
new PropertyMetadata(null, OnStyleChange));
private static void OnStyleChange(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = d as Day;
control.textblock.Style = (Style)e.NewValue
}

PropertyChangedEventHandler null

I have 2 ObservableCollection<T>s and each of the them has their Cards.
public class Card: INotifyPropertyChanged
{
private string _CardTitle;
public string CardTitle
{
get { return _CardTitle; }
set
{
_CardTitle = value;
OnPropertyChanged("CardTitle");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
Now when a CardTitle of the card is changed it is reflected on the UI thanks to PropertyChangedEventHandler.
But when I move a card from one collection to another and then change the CardTitle, I get handler as null thus, PropertyChangedEventHandler is not fired and I cannot see the change in UI.
I have scratched my head enough but cannot figure out why. If anyone has any idea then please help me before I get in trouble.
What do you mean by "move"? You remove from first collection, and add to second yes? Does your datacontext implement INotifyPropertyChanged?
I tried to reproduce your code, but i didn't have any problem. Look, maybe you find some hints:
MainPage.xaml.cs
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
this.DataContext = this;
}
private ObservableCollection<Card> _first;
public ObservableCollection<Card> First
{
get { return _first; }
set
{
_first = value;
OnPropertyChanged("First");
}
}
private ObservableCollection<Card> _second;
public ObservableCollection<Card> Second
{
get { return _second; }
set
{
_second = value;
OnPropertyChanged("Second");
}
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
//Init collections
}
private void ChangeItemName(object sender, RoutedEventArgs e)
{
var card = (sender as Button).DataContext as Card;
card.CardTitle = ":)";
}
private void ChangeCollection(object sender, RoutedEventArgs e)
{
var card = (sender as Button).DataContext as Card;
First.Remove(card);
Second.Add(card);
card.CardTitle = "xD";
}
MainPage.xaml
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListView ItemsSource="{Binding First}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding CardTitle}" />
<Button Content="Change name" Click="ChangeItemName" />
<Button Content="Change collection" Click="ChangeCollection" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView ItemsSource="{Binding Second}" Grid.Column="1">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding CardTitle}" />
<Button Content="Change name" Click="ChangeItemName" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</StackPanel>

How to Track the Current Column Name and Sort Direction In WPF MVVM DataGrid

I need to track the Current Column Name and Sort Direction In WPF MVVM DataGrid. I know how to do it in code behind. Plase see the code as follows:
private void columnHeader_Click(object sender, RoutedEventArgs e)
{
var columnHeader = sender as DataGridColumnHeader;
if (columnHeader != null)
{
columnName = ((DataGridColumnHeader)sender).Content.ToString();
ListSortDirection sortDirection = (((DataGridColumnHeader)sender).SortDirection != ListSortDirection.Ascending) ?
ListSortDirection.Ascending : ListSortDirection.Descending;
txb1.Text = columnName;
txb2.Text = sortDirection.ToString();
}
}
However, I am blocked in MVVM. In the View Model, I wrote codes in method sort() in SortCommand, but they did not work. I would appreciate if any one can help. Below are three files.
1) Xaml
<Window x:Class="SortSampleMVVM1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:se="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DataGrid x:Name="Test"
ItemsSource="{Binding}"
AutoGenerateColumns="False" >
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Command"
Value="{Binding SortCommand}"/>
<Setter Property="CommandParameter"
Value="{Binding Path=Content, RelativeSource={RelativeSource Self}}"/>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid Name="dataGrid1" AutoGenerateColumns="False" ItemsSource="{Binding ViewSource.View}" >
<DataGrid.Columns>
<DataGridTextColumn Header="ID" Binding="{Binding ID }"
SortDirection="Descending" />
<DataGridTextColumn Header="firstName" Binding="{Binding firstName}"/>
<DataGridTextColumn Header="lastName" Binding="{Binding lastName}"/>
</DataGrid.Columns>
</DataGrid>
<Label Content="Column Name" HorizontalAlignment="Left" Margin="100,166,0,0" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="250,169,0,0" TextWrapping="Wrap" Name="txb1" Text="{Binding ColumnName}" VerticalAlignment="Top" Width="150" />
<Label Content="Sorting direction" HorizontalAlignment="Left" Margin="100,229,0,0" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="250,232,0,0" TextWrapping="Wrap" Name="txb2" Text="{Binding SortDirection}" VerticalAlignment="Top" Width="150" />
<Button Content="Refresh" Name="btnRefresh1" HorizontalAlignment="Left" Margin="140,273,0,0" VerticalAlignment="Top" Width="75" Command="{Binding Refresh1Command}" />
<Button Content="Refresh Keep Sort" Name="btnRefresh2" HorizontalAlignment="Left" Margin="282,273,0,0" VerticalAlignment="Top" Width="125" Command="{Binding Refresh2Command}" />
</Grid>
</Window>
2) Code behind
using System.Windows;**strong text**
using System.Collections.ObjectModel;
using System.Collections.Generic;
namespace SortSampleMVVM1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new SortViewModel();
}
}
}
3) View Model
using System;
using System.ComponentModel;
using System.Windows.Input;
using System.Windows.Controls.Primitives;
using System.Windows;
using System.Windows.Data;
using System.Collections.ObjectModel;
namespace SortSampleMVVM1
{
class SortViewModel: INotifyPropertyChanged
{
public CollectionViewSource ViewSource { get; set; }
public ObservableCollection<MyData> Collection {get; set;}
private string _columnName;
private ListSortDirection _sortDirection;
private ICommand _sortCommand;
private ICommand _refresh1Command;
private ICommand _refresh2Command;
public SortViewModel ()
{
this.Collection = new ObservableCollection<MyData>();
Collection.Add(new MyData(1, "David", "Lee"));
Collection.Add(new MyData(2, "John", "kim"));
Collection.Add(new MyData(3, "Michael", "Wadsworth"));
Collection.Add(new MyData(4, "Chris", "Smith"));
Collection.Add(new MyData(5, "Peter", "Chen"));
Collection.Add(new MyData(6, "Jonas", "Zhang"));
this.ViewSource = new CollectionViewSource();
ViewSource.Source = this.Collection;
}
public event PropertyChangedEventHandler PropertyChanged;
public string ColumnName
{
get { return _columnName; }
set
{
_columnName = value;
OnPropertyChanged("ColumnName");
}
}
public ListSortDirection SortDirection
{
get { return _sortDirection; }
set
{
_sortDirection = value;
OnPropertyChanged("SortDirection");
}
}
protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this,
new PropertyChangedEventArgs(propertyName));
}
}
#region SortCommand
public ICommand SortCommand
{
get
{
if (_sortCommand == null)
{
_sortCommand = new RelayCommand(param => this.sort(),
null);
}
return _sortCommand;
}
}
private void sort()
{
//var columnHeader = (object)sender as DataGridColumnHeader;
//if (columnHeader != null)
//{
// _columnName = ViewSource.GetValuecolumnName ((DataGridColumnHeader)sender).Content.ToString();
// ListSortDirection sortDirection = (((DataGridColumnHeader)sender).SortDirection != ListSortDirection.Ascending) ?
// ListSortDirection.Ascending : ListSortDirection.Descending;
//}
}
#endregion
#region Refresh1Command
public ICommand Refresh1Command
{
get
{
if (_refresh1Command == null)
{
_refresh1Command = new RelayCommand(param => this.Refresh1(),
null);
}
return _refresh1Command;
}
}
private void Refresh1()
{
ViewSource.SortDescriptions.Clear();
_columnName = "firstName";
_sortDirection = ListSortDirection.Descending;
ViewSource.SortDescriptions.Add(new SortDescription(_columnName, _sortDirection));
ViewSource.View.Refresh();
}
#endregion
#region Refresh2Command
public ICommand Refresh2Command
{
get
{
if (_refresh2Command == null)
{
_refresh2Command = new RelayCommand(param => this.Refresh2(),
null);
}
return _refresh2Command;
}
}
private void Refresh2()
{
ViewSource.SortDescriptions.Clear();
ViewSource.SortDescriptions.Add(new SortDescription(_columnName, _sortDirection));
ViewSource.View.Refresh();
}
#endregion
}
}
You can use following styling to get the column header.
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Command"
Value="{Binding DataContext.MyCommand}"/>
<Setter Property="CommandParameter"
Value="{Binding Path=Content, RelativeSource={RelativeSource Self}}"/>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.ColumnHeaderStyle>
You have to create the Command 'MyCommand' in your view model. then as the parameter of your execute method you will get column header name.

Issue with multiselect combobox control in Windows 8

I am creating a multiselect combobox in Windows 8 as shown in below image:
For this I have created custom control code for which is mentioned below:
The problem with below code is that
on selecting all the all items are not selected
Selected items are not displayed in textbox
How can I fix that?
XAML:
<UserControl
x:Class="App5.MultiSelectComboBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App5"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
x:Name="thisUC"
d:DesignWidth="400">
<ComboBox
x:Name="MultiSelectCombo"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
Width="400" Height="20"
>
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Title}" Foreground="Black"
IsChecked="{Binding ElementName=thisUC, Path=IsSelected, Mode=TwoWay}"
Click="CheckBox_Click" />
</DataTemplate>
</ComboBox.ItemTemplate>
<ControlTemplate TargetType="ComboBox">
<Grid >
<ToggleButton
x:Name="ToggleButton"
Grid.Column="2" IsChecked="{TemplateBinding IsDropDownOpen}"
ClickMode="Press" HorizontalContentAlignment="Left" >
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="18"/>
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="2"
Background="White"
BorderBrush="Black"
BorderThickness="1,1,1,1" />
<Border
x:Name="BorderComp"
Grid.Column="0"
CornerRadius="2"
Margin="1"
Background="White"
BorderBrush="Black"
BorderThickness="0,0,0,0" >
<TextBlock Foreground="Black" Text="{TemplateBinding TextValue}"
Padding="3" />
</Border>
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Popup
Name="Popup"
IsOpen="{TemplateBinding IsDropDownOpen}"
>
<Grid
Name="DropDown"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
BorderThickness="1" Background="White"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" DataContext="{Binding}">
<StackPanel />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<!--<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
</ControlTemplate.Triggers>-->
</ControlTemplate>
</ComboBox>
</UserControl>
C#
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Text;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
namespace App5
{
public sealed partial class MultiSelectComboBox : UserControl
{
private ObservableCollection<Node> _nodeList;
public MultiSelectComboBox()
{
InitializeComponent();
_nodeList = new ObservableCollection<Node>();
}
#region Dependency Properties
public static readonly DependencyProperty ItemsSourceProperty =
DependencyProperty.Register("ItemsSource", typeof(Dictionary<string, object>), typeof(MultiSelectComboBox), new PropertyMetadata(null,
new PropertyChangedCallback(MultiSelectComboBox.OnItemsSourceChanged)));
public static readonly DependencyProperty SelectedItemsProperty =
DependencyProperty.Register("SelectedItems", typeof(Dictionary<string, object>), typeof(MultiSelectComboBox), new PropertyMetadata(null,
new PropertyChangedCallback(MultiSelectComboBox.OnSelectedItemsChanged)));
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("TextValue", typeof(string), typeof(MultiSelectComboBox), new PropertyMetadata(null));
public static readonly DependencyProperty DefaultTextProperty =
DependencyProperty.Register("DefaultText", typeof(string), typeof(MultiSelectComboBox), new PropertyMetadata(null));
public Dictionary<string, object> ItemsSource
{
get { return (Dictionary<string, object>)GetValue(ItemsSourceProperty); }
set
{
SetValue(ItemsSourceProperty, value);
}
}
public Dictionary<string, object> SelectedItems
{
get { return (Dictionary<string, object>)GetValue(SelectedItemsProperty); }
set
{
SetValue(SelectedItemsProperty, value);
}
}
public string TextValue
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public string DefaultText
{
get { return (string)GetValue(DefaultTextProperty); }
set { SetValue(DefaultTextProperty, value); }
}
#endregion
#region Events
private static void OnItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MultiSelectComboBox control = (MultiSelectComboBox)d;
control.DisplayInControl();
}
private static void OnSelectedItemsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MultiSelectComboBox control = (MultiSelectComboBox)d;
control.SelectNodes();
control.SetText();
}
private void CheckBox_Click(object sender, RoutedEventArgs e)
{
CheckBox clickedBox = (CheckBox)sender;
if (clickedBox.Content == "All")
{
if (clickedBox.IsChecked.Value)
{
foreach (Node node in _nodeList)
{
node.IsSelected = true;
}
}
else
{
foreach (Node node in _nodeList)
{
node.IsSelected = false;
}
}
}
else
{
int _selectedCount = 0;
foreach (Node s in _nodeList)
{
if (s.IsSelected && s.Title != "All")
_selectedCount++;
}
if (_selectedCount == _nodeList.Count - 1)
_nodeList.FirstOrDefault(i => i.Title == "All").IsSelected = true;
else
_nodeList.FirstOrDefault(i => i.Title == "All").IsSelected = false;
}
SetSelectedItems();
SetText();
}
#endregion
#region Methods
private void SelectNodes()
{
foreach (KeyValuePair<string, object> keyValue in SelectedItems)
{
Node node = _nodeList.FirstOrDefault(i => i.Title == keyValue.Key);
if (node != null)
node.IsSelected = true;
}
}
private void SetSelectedItems()
{
if (SelectedItems == null)
SelectedItems = new Dictionary<string, object>();
SelectedItems.Clear();
foreach (Node node in _nodeList)
{
if (node.IsSelected && node.Title != "All")
{
if (this.ItemsSource.Count > 0)
SelectedItems.Add(node.Title, this.ItemsSource[node.Title]);
}
}
}
private void DisplayInControl()
{
_nodeList.Clear();
if (this.ItemsSource.Count > 0)
_nodeList.Add(new Node("All"));
foreach (KeyValuePair<string, object> keyValue in this.ItemsSource)
{
Node node = new Node(keyValue.Key);
_nodeList.Add(node);
}
MultiSelectCombo.ItemsSource = _nodeList;
}
private void SetText()
{
if (this.SelectedItems != null)
{
StringBuilder displayText = new StringBuilder();
foreach (Node s in _nodeList)
{
if (s.IsSelected == true && s.Title == "All")
{
displayText = new StringBuilder();
displayText.Append("All");
break;
}
else if (s.IsSelected == true && s.Title != "All")
{
displayText.Append(s.Title);
displayText.Append(',');
}
}
this.TextValue = displayText.ToString().TrimEnd(new char[] { ',' });
}
// set DefaultText if nothing else selected
if (string.IsNullOrEmpty(this.TextValue))
{
this.TextValue = this.DefaultText;
}
}
#endregion
}
public class Node : INotifyPropertyChanged
{
private string _title;
private bool _isSelected;
#region ctor
public Node(string title)
{
Title = title;
}
#endregion
#region Properties
public string Title
{
get
{
return _title;
}
set
{
_title = value;
NotifyPropertyChanged("Title");
}
}
public bool IsSelected
{
get
{
return _isSelected;
}
set
{
_isSelected = value;
NotifyPropertyChanged("IsSelected");
}
}
#endregion
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
I think I understand what you want. Overall, I would recommend a slightly different approach. I would recommend, for one, that you not use a ComboBox to accomplish this - an ItemsControl will accomplish what you want with less work and overhead. Using a Popup like you are is great, but let me show you a slightly simplified way that (this is the best part) works the way you are asking in your question.
Here's your XAML:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.DataContext>
<local:ViewModel/>
</Grid.DataContext>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBox Width="200" FontSize="24" Text="{Binding Header, Mode=TwoWay}"
IsReadOnly="True" TextWrapping="Wrap" MaxHeight="200" />
<ScrollViewer VerticalScrollBarVisibility="Auto" MaxHeight="200" Width="200" Background="White">
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Text}"
FontSize="24"
Foreground="Black"
IsChecked="{Binding IsChecked, Mode=TwoWay}"
IsThreeState="False" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
</Grid>
Here's your code-behind:
public class Item : BindableBase
{
public string Text { get; set; }
bool _IsChecked = default(bool);
public bool IsChecked { get { return _IsChecked; } set { SetProperty(ref _IsChecked, value); } }
}
public class ViewModel : BindableBase
{
public ViewModel()
{
_Items = new ObservableCollection<Item>(Enumerable.Range(1, 10)
.Select(x => new Item()
{
Text = string.Format("Item {0}", x),
IsChecked = (x < 4) ? true : false,
}));
foreach (var item in this.Items)
item.PropertyChanged += (s, e) => base.RaisePropertyChanged("Header");
}
public string Header
{
get
{
var array = this.Items
.Where(x => x.IsChecked)
.Select(x => x.Text).ToArray();
if (!array.Any())
return "None";
return string.Join("; ", array);
}
}
ObservableCollection<Item> _Items;
public ObservableCollection<Item> Items { get { return _Items; } }
}
public abstract class BindableBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void SetProperty<T>(ref T storage, T value,
[System.Runtime.CompilerServices.CallerMemberName] String propertyName = null)
{
if (!object.Equals(storage, value))
{
storage = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
protected void RaisePropertyChanged([System.Runtime.CompilerServices.CallerMemberName] String propertyName = null)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
Best of luck!
Your all code is correct, except one thing, that's data binding of CheckBox in ComboBox's DataTemplate. You don't need to use ElementName=thisUC
Incorrect
<CheckBox Content="{Binding Title}" Foreground="Black"
IsChecked="{Binding ElementName=thisUC, Path=IsSelected, Mode=TwoWay}"
Click="CheckBox_Click" />
Correct
<CheckBox Content="{Binding Title}" Foreground="Black" Click="CheckBox_Click"
IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"/>