I'm making a color selector combobox with checkboxes.
Combobox's visible Text is "Colors", and items are the names of colors with a checkbox.
Scenario: open combobox -> select whatever in comboboxItems -> get checked(Selected)items.
So, when the user clicks a combobox item, I want to change the checkbox value and keep the combobox opened.
I'm stuck with the checking (selecting) items functionality.
How to do this?
Model:
public class ColorItem : DependencyObject
{
public static readonly DependencyProperty NameProperty =
DependencyProperty.Register
("Name", typeof(string), typeof(ColorItem),
new PropertyMetadata(string.Empty));
public static readonly DependencyProperty IsSelectedProperty =
DependencyProperty.Register
("IsSelected", typeof(bool), typeof(ColorItem),
new PropertyMetadata(true));
public string Name
{
get { return (string)GetValue(NameProperty); }
set { SetValue(NameProperty, value); }
}
public bool IsSelected
{
get { return (bool)GetValue(IsSelectedProperty); }
set { SetValue(IsSelectedProperty, value); }
}
}
XAML:
<ComboBox Name="ColorCombobox" IsEditable="True" IsReadOnly="True" Focusable="False" StaysOpenOnEdit="True"
ItemsSource="{Binding ColorItems}" SelectionChanged="OnComboboxSelectionChanged" Text="Colors" Margin="0,0,30,0" >
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsSelected}" Width="20" />
<TextBlock Text="{Binding ColorName}" Width="100" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
SelectionChanged Event handler in code-behind:
private void OnComboboxSelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
ComboBox box = sender as ComboBox;
box.Text = "Colors"; //Not works. Text will empty be ""
}
Get rid of the StackPanel and the TextBlock and define an ItemContainerStyle that stretches the content of the ComboBoxItem:
<ComboBox Name="ColorCombobox" IsEditable="True" IsReadOnly="True" Focusable="False" StaysOpenOnEdit="True"
ItemsSource="{Binding ColorItems}" SelectionChanged="OnComboboxSelectionChanged" Text="Colors" Margin="0,0,30,0" >
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ComboBox.ItemContainerStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" Content="{Binding Name}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Related
I have ComboBox with custom ComboBoxItem. ComboBoxItem contains TextBlock and CheckBox. CheckBox bind to bool property in my ViewModel. When i click to CheckBox, all works fine, but when i click to TextBlock - ComboBox Closing! I need 'MultiSelection' mode inside my ComboBox
xaml:
<ComboBox ItemsSource="{Binding Elements}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock Text="{Binding Caption}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
VM:
public class SomeClass : INotifyPropertyChanged
{
private string m_caption;
private bool m_isSelected;
public string Caption
{
get { return m_caption; }
set
{
if (m_caption != value)
{
m_caption = value;
RaisePropertyChanged("Caption");
}
}
}
public bool IsSelected
{
get { return m_isSelected; }
set
{
if (m_isSelected != value)
{
m_isSelected = value;
RaisePropertyChanged("IsSelected");
}
}
}
public SomeClass(string _caption)
{
if (string.IsNullOrWhiteSpace(_caption))
m_caption = Guid.NewGuid().ToString();
Caption = _caption;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string _property)
{
PropertyChangedEventHandler hanlder = PropertyChanged;
if (hanlder != null)
{
hanlder.Invoke(null, new PropertyChangedEventArgs(_property));
}
}
}
Without a lot of tweaking, you can't really display a multi-selection in a closed combobox, so I guess this part is not really needed. So I propose you use a button and a popup, where the popup is containing a listview with multi selection enabled for your items.
As Button, I use DropDownButton from Extended WPF Toolkit, you can also implement it differently.
Introducing the Extended WPF Toolkit namespace:
xmlns:xt="http://schemas.xceed.com/wpf/xaml/toolkit"
The actual thing:
<xt:DropDownButton Content="Elements Selection" VerticalAlignment="Top" HorizontalAlignment="Left" MinWidth="100">
<xt:DropDownButton.DropDownContent>
<ListView ItemsSource="{Binding Elements}" SelectionMode="Multiple" MinWidth="100">
<ListView.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType=ListViewItem}}">
<CheckBox.Content>
<TextBlock Text="{Binding Caption}"/>
</CheckBox.Content>
</CheckBox>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</xt:DropDownButton.DropDownContent>
</xt:DropDownButton>
Another important little detail to reflect the property changes in WPF: your property changed notifications need a source instead of null!
protected void RaisePropertyChanged(string _property)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler.Invoke(this, new PropertyChangedEventArgs(_property));
}
}
Bind the Content property of the CheckBox to your Caption property and use an ItemContainerStyle that stretches the ComboBoxItem container:
<ComboBox ItemsSource="{Binding Elements}">
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ComboBox.ItemContainerStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Content="{Binding Caption}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
I write my own checkbox control. This checkbox, I put inside listbox using MVVM pattern. This user control have its own class, view model and xaml view.
Here is a class:
public class MultiSelectListBox
{
public bool IsChecked { get; set; }
public string Text { get; set; }
}
ViewModel for UserControl:
public partial class VMMultiSelectListBox : ViewModelBase
{
private bool _isChecked;
private string _text;
public VMMultiSelectListBox()
{
}
public VMMultiSelectListBox(MultiSelectListBox.BusinnesModel.MultiSelectListBox item)
{
IsChecked = item.IsChecked;
Text = item.Text;
}
public bool IsChecked
{
get { return _isChecked; }
set { _isChecked = value; NotifyPropertyChanged("IsChecked"); }
}
public string Text
{
get { return _text; }
set { _text = value; NotifyPropertyChanged("Text"); }
}
}
And here is xaml:
<UserControl x:Class="MES.UserControls.MultiSelectListBox.UCMultiSelectListBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MES.UserControls.MultiSelectListBox">
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Content="{Binding Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
</UserControl>
Now I want to bind this UserControl inside my ListBox, which is located in main form.
This is what I'm using in my form xaml.
<Expander x:Name="expanderProccesses" Header="Procesy" IsExpanded="{Binding IsExpanded}" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Margin="5,6,-30,0">
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding ProccessFilter}" SelectedItem="{Binding SelectedProcess, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<ucLb:UCMultiSelectListBox/>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Expander>
Last thing is view model of this form.
public VMMultiSelectListBox SelectedProcess
{
get { return _selectedProccess; }
set {
_selectedProccess = value;
NotifyPropertyChanged("SelectedProcess");
NotifyPropertyChanged("ProccessFilter");
}
}
public ObservableCollection<VMMultiSelectListBox> ProccessFilter
{
get { return _proccesFilter; }
set { _proccesFilter = value; NotifyPropertyChanged("ProccessFilter");}
}
Something I'm doing wrong. In selectedProcces it always leap in getter, but not in setter, which I need. I don't exactly know why.
I thing what you are trying to do can be achieved in a more standard context, by binding IsSelected property in ItemContainerStyle and using a CheckBox in the ItemTemplate:
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionMode="Extended" ItemsSource="{Binding ProccessFilter}">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Content="{Binding Text}"/>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected" Value="{Binding IsChecked, Mode=TwoWay}"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
Please note that you should set SelectionMode="Extended".
Hope it helps.
On a UWP app (Windows 10), I am displaying a list of records in a ListView.
When I click on an item, its StackPanel is displayed (using INotifyPropertyChanged).
In the StackPanel, there is a TextBox with some data populated via binding.
I would like that the TextBox automatically receives the focus whenever the StackPanel becomes visible, but I can't find which property or event to use, and how to trigger a textBox.Focus().
Thanks for your feedback on this !
The DataTemplate:
<DataTemplate x:Key="templateList">
<StackPanel>
...
<StackPanel Visibility="{Binding IsSelected}">
<TextBox x:Name="textBox"
Text="{Binding Title, Mode=TwoWay}"/>
...
</StackPanel>
</StackPanel>
</DataTemplate>
...
The ListView:
<ListView x:Name="listView"
ItemsSource="{Binding mylist}"
ItemTemplate="{StaticResource templateList}"/>
I can suggest use Behaviors for this case. As I noticed, you use Visibility type for IsSelected property. It means that we can use DataTriggerBehavior and create our SetupFocusAction which implement IAction
public class SetupFocusAction : DependencyObject, IAction
{
public Control TargetObject
{
get { return (Control)GetValue(TargetObjectProperty); }
set { SetValue(TargetObjectProperty, value); }
}
public static readonly DependencyProperty TargetObjectProperty =
DependencyProperty.Register("TargetObject", typeof(Control), typeof(SetupFocusAction), new PropertyMetadata(0));
public object Execute(object sender, object parameter)
{
return TargetObject?.Focus(FocusState.Programmatic);
}
}
After that we can use this action in XAML:
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
...
<StackPanel Visibility="{Binding IsSelected}"
Grid.Row="1">
<TextBox x:Name="textBox"
Text="{Binding Title, Mode=TwoWay}">
<i:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding IsSelected}"
ComparisonCondition="Equal"
Value="Visible">
<local:SetupFocusAction TargetObject="{Binding ElementName=textBox}"/>
</core:DataTriggerBehavior>
</i:Interaction.Behaviors>
</TextBox>
</StackPanel>
I'm trying to set item disabled for ComboBox, I have my item model:
public class PermissionsViewItem
{
public string Title { get; set; }
public bool IsEnabled { get; set; }
}
And ComboBox defined:
<ComboBox Background="WhiteSmoke" Margin="65,308,0,0" BorderThickness="0" Width="220" Padding="0" Foreground="#FF7B7A7F" ItemsSource="{Binding PermissionsViewItems}" >
<ComboBox.ItemTemplate>
<DataTemplate x:DataType="local:PermissionsViewItem">
<StackPanel >
<Grid>
<Border Background="{x:Null}" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Center">
<TextBlock Text="{x:Bind Title}" FontWeight="SemiBold" />
</Border>
</Grid>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
However there seems to be no way to set item disabled manually, but there is ComboBoxItem element generated (I can see it in LiveVisualTree) which has IsEnabled property and it works. I can access it via Styling
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem" >
<Setter Property="IsEnabled" Value="False"/>
</Style>
</ComboBox.ItemContainerStyle>
This would disable every item, but unfortunately ItemContainerStyle does not bind to item, because it has context of ComboBox not PermissionsViewItem so I cannot utilize PermissionsViewItem.IsEnabled property here.
Is there is any way to disable specific item (even a hacky way will suffice)?
You can override the combobox as follows and set the bindings at run time. This works for me
public class ZCombobox:ComboBox
{
protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
{
ComboBoxItem zitem = element as ComboBoxItem;
if (zitem != null)
{
Binding binding = new Binding();
binding.Path = new PropertyPath("IsSelectable");
zitem.SetBinding(ComboBoxItem.IsEnabledProperty, binding);
}
base.PrepareContainerForItemOverride(element, item);
}
}
Bind IsEnabled property in TextBlock.
<TextBlock Text="{x:Bind Title}" FontWeight="SemiBold" IsEnabled="{Binding IsEnabled}" />
I'd like to display data in ListView with different rows (different style and different content). But as soon as I try to apply a style (which suppose to change nothing) selection stops working and it's not anymore Vista style.
What am I doing wrong? Perhaps wrong approach?
<ListView ItemsSource="{Binding A}">
<ListView.View>
<GridView>
<GridViewColumn Header="B" DisplayMemberBinding="{Binding B}"/>
...
</GridView>
</ListView.View>
<!-- commenting below block will return Vista style back -->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<GridViewRowPresenter Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
You shouldn't change the ControlTemplate of the ListViewItem, if you want to display data in a ListView with different rows (different style and different content).
Use DataTemplate instead. You can style your rows according to the bound data type.
Assuming you have a view model like this:
public class ViewModel : INotifyPropertyChanged
{
public List<object> A { get; private set; }
public ViewModel()
{
this.A = new List<object> { Brushes.BlueViolet, 42, false };
}
}
Then, just define the DataTemplates for your items that you wish to display in the list view:
<ListView ItemsSource="{Binding A}">
<ListView.View>
<GridView>
<GridViewColumn Header="B"/>
</GridView>
</ListView.View>
<ListView.Resources>
<DataTemplate DataType="{x:Type media:Brush}">
<Rectangle Width="25" Height="25" Fill="{Binding Mode=OneWay}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type sys:Boolean}">
<CheckBox IsChecked="{Binding Mode=OneWay}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type sys:Int32}">
<TextBlock Text="{Binding Mode=OneWay}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</ListView.Resources>
</ListView>
With this approach, you will get the list view rows that represent your data as you wish, retaining the core ListView functionality and "Vista style".
I try to keep it as general as possible so I define a simple enum for different types that each row can take:
public enum RowType { Bool, Int32 }
Now I use it in the view model for row:
public class Row: DependencyObject
{
//create a new row with the given value
//automatically set Value, Info and RowType based on the param
public Row(object val)
{
Value = val;
if (val.GetType() == typeof(bool)) RowType = WpfApplication3.RowType.Bool;
else RowType = WpfApplication3.RowType.Int32;
Info = val.ToString() + " of type " +val.GetType().ToString();
}
public RowType RowType { get; set; }
/// <summary>
/// Gets or sets a bindable value that indicates Value
/// </summary>
public object Value
{
get { return (object)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register("Value", typeof(object), typeof(Row), new PropertyMetadata(0));
/// <summary>
/// Gets or sets a bindable value that indicates Info
/// </summary>
public string Info
{
get { return (string)GetValue(InfoProperty); }
set { SetValue(InfoProperty, value); }
}
public static readonly DependencyProperty InfoProperty =
DependencyProperty.Register("Info", typeof(string), typeof(Row), new PropertyMetadata(""));
}
Now that the view model is ready I create a simple TemplateSelector which responds to RowType of the given row:
public class Selector : DataTemplateSelector
{
//Template for RowType==Bool
public DataTemplate Template1 { get; set; }
//Template for RowType==Int32
public DataTemplate Template2 { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
var row = item as Row;
if (row == null) return null;
switch (row.RowType)
{
case RowType.Bool:
return Template1;
case RowType.Int32:
return Template2;
default:
return null;
}
}
}
And I use it in Xaml like this:
<Window.Resources>
<!-- selects CellTemplate for column1 (Value) based on RowType -->
<local:Selector x:Key="valueSelector">
<local:Selector.Template1>
<DataTemplate>
<CheckBox IsChecked="{Binding Value, Mode=OneWay}"/>
</DataTemplate>
</local:Selector.Template1>
<local:Selector.Template2>
<DataTemplate>
<TextBlock Text="{Binding Value, Mode=OneWay}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</local:Selector.Template2>
</local:Selector>
<!-- selects CellTemplate for column2 (Info) based on RowType -->
<local:Selector x:Key="infoSelector">
<local:Selector.Template1>
<DataTemplate>
<Canvas Height="16">
<TextBlock Text="{Binding Info, Mode=OneWay}"
Foreground="Blue" VerticalAlignment="Top"/>
</Canvas>
</DataTemplate>
</local:Selector.Template1>
<local:Selector.Template2>
<DataTemplate>
<Canvas Height="16">
<TextBlock Text="{Binding Info, Mode=OneWay}"
VerticalAlignment="Top"/>
</Canvas>
</DataTemplate>
</local:Selector.Template2>
</local:Selector>
</Window.Resources>
<ListView ItemsSource="{Binding A}">
<ListView.View>
<GridView>
<GridViewColumn Header="Value"
CellTemplateSelector="{StaticResource valueSelector}"/>
<GridViewColumn Header="Info" Width="0"
CellTemplateSelector="{StaticResource infoSelector}"/>
</GridView>
</ListView.View>
</ListView>
This is the result:
Not that I wrote this answer based on dymanoid's answer which is accurate based upon given information.