I have a multi selection listbox where only certain combinations of items are permitted in selection.
How can I deny certain selection?
The listbox is bound to view model. I thought I could do it in property setter but is doesn't work.
XAML
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:ChangePropertyAction TargetObject="{Binding Mode=OneWay}" PropertyName="SelectedItems" Value="{Binding Path=SelectedItems, ElementName=TranslatorsListView}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
In View Model
public System.Collections.IList SelectedItems
{
get
{
return SelectedModels;
}
set
{
//what here?
}
}
Edit:
I should have made clear, that I'm using multi selection. That's why I'm using interaction triggers and not just binding to SelectedItem. The linked answer is for single selection.
I've found that the easiest way was to not use SelectionMode nor SelectedItem, but instead utilize the Tapped event. From this you can get the "selected item".
I then set a bound property in the ViewModel that is used by the View to change the background of the selected item in the ListView if its one that I want to select. To do this effectively your ListView needs to be tied to an ObservableCollection of ViewModels (or a class that implements INotifyPropertyChanged).
Here's some rough code to illustrate what I mean:
In Xaml View code
<ListView
ItemsSource ="{Binding Values}"
ItemTapped="OnItemTapped"
HasUnevenRows="True"
RefreshAllowed="True"
SelectionMode="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30*"/>
</Grid.RowDefinitions>
<BoxView Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" BackgroundColor="{StaticResource Blue}" IsVisible="{Binding IsSelected}" />
<Label Grid.Column="0" Grid.Row="0" HorizontalTextAlignment="Center" VerticalOptions="Center" Text="{Binding Destination}"/>
<Label Grid.Column="1" Grid.Row="0" HorizontalTextAlignment="Start" VerticalOptions="Center" Text="{Binding Value}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In code behind:
private void OnItemTapped(object sender, ItemTappedEventArgs e)
{
var param = (ValueViewModel)e.Item;
if (((SourceViewModel)BindingContext).SelectValueCommand.CanExecute(param))
{
((SourceViewModel)BindingContext).SelectValueCommand.Execute(param);
}
}
Then these classes used - the first is the BindingContext for the View
public class SourceViewModel:INotifyPropertyChanged
{
public SourceViewModel (List<ValueViewModel> list)
{
SelectValueCommand = new Command<ValueViewModel>((value) => ExecuteSelectValueCommand(value), (value)=>!IsBusy);
}
private ObservableCollection<ValueViewModel> _values = new ObservableCollection<ValueViewModel>();
private bool _isSelected;
private sring _description;
public ICommand SelectValueCommand;
public bool IsBusy{get;set;}
public ObservableCollection<ValueViewModel> Values
{
get=>_values;
set
{
_values = value;
OnPropertyChanged(nameof(Values));
}
}
public void ExecuteSelectValueCommand(ValueViewModel value)
{
if(IsBusy) return;
item.IsSelected = CanValueBeSelected(value);
}
private bool CanValueBeSelected(ValueViewModel value)
{
var result = false;
//Some logic to determine if it can be selected
return result;
}
#region INotifyPropertyChanged implementation
// ...
#endregion
}
public class ValueViewModel:INotifyPropertyChanged
{
public ValueViewModel (string description, int value)
{
Description = description;
Value = value;
}
private int _value;
private bool _isSelected;
private sring _description;
public int Value
{
get=>_value;
set
{
_value=value;
OnPropertyChanged(nameof(Value));
}
}
public bool IsSelected
{
get=> _isSelected;
set
{
_isSelected= value;
OnPropertyChanged(nameof(IsSelected));
}
}
public string Description
{
get=> _description;
set
{
_description= value;
OnPropertyChanged(nameof(Description));
}
}
#region INotifyPropertyChanged implementation
// ...
#endregion
}
Related
I have a list view that displays the EditCollection property stored in a viewmodel which is of type ObservableCollection. It displays each element as a textbox with the string as its text so I can edit the string of each element. There is an Add button that adds an element whose handler is AddToCollection. There is also a Save button. When it is clicked, EditCollection should be copied into another ObservableCollection property called Collection. But what actually happens is that any added elements are shown, but their edited values do not appear in EditCollection, only their default values.
private ObservableCollection<string> _editCollection;
public ObservableCollection<string> EditCollection
{
get { return _editCollection; }
set
{
_editCollection = value;
OnPropertyChanged("EditCollection");
}
}
private ObservableCollection<string> _collection;
public ObservableCollection<string> Collection
{
get { return _collection; }
set
{
_collection = value;
_editCollection = new ObservableCollection<string>(_collection);
OnPropertyChanged("Collection");
OnPropertyChanged("EditCollection");
}
}
public void Save(object item)
{
string value;
if (EditCollection.Count > 1)
{
value = EditCollection[1];
}
; // break point: value = "default value" even if I edit the textbox
Collection = new ObservableCollection<string>(new List<string>( EditCollection ));
}
public void AddToCollection(object item)
{
EditCollection.Add("default value");
OnPropertyChanged("EditCollection");
}
view.xaml
<Button Content="Save" Width="50" HorizontalAlignment="Right"
Command="{Binding SaveCommand}"/>
<ListView Grid.Row="1" ItemsSource="{Binding Path=EditCollection}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBox Text="{Binding Path=.,
UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Grid.Row="2" Content="Add" Width="50" HorizontalAlignment="Center"
Command="{Binding AddToCollectionCommand}"/>
The way to do this is bind to a class instead of the string directly.
private ObservableCollection<Item> _editCollection;
public ObservableCollection<Item> EditCollection
{
get { return _editCollection; }
set
{
_editCollection = value;
OnPropertyChanged("EditCollection");
}
}
public class Item : INotifyPropertyChanged
{
private string _text;
public string Text
{ get { return _text; }
set{ _text = value; OnPropertyChanged("Text");
}
}
<ListView Grid.Row="1" ItemsSource="{Binding Path=EditCollection}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBox Text="{Binding Path=Text,
UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Currently i have an ObservableCollection of MyClass in my Viewmodel. I use the getter of this Collection to fill it from an other Datasource. I can now Display this Data in a Window(Grid) and the correct Data is shown, but when i change the Data the set is not fired(I think it is because not the Collection is changed, only a Element in the Collection). Should i create a Property for every Property of MyClass, so i can react to the changes of a single Value, the Questions i ask myself are:
How do i know what Element is selected at the moment
How to fill the Collection correct when i have a binding to every single item
I also thought of a Event when my Collection is changed, but i am not sure how to implement it right.
public ObservableCollection<MyClass<string>> SelectedParams
{
get
{
//Fill the Collection
}
set
{
//I think here i want to react to changed Textboxvalues in my View
}
}
public class MyClass<T> : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private T _curValue;
private string _value1;
private string _value2;
public string Value1
{
get
{
return _value1;
}
set
{
if (_value1 != value)
{
_value1 = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Value1)));
}
}
}
public string Value2
{
get
{
return _value2;
}
set
{
if (_value2 != value)
{
_value2 = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Value2)));
}
}
}
public T curValue
{
get
{
return _curValue;
}
set
{
_curValue = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(curValue)));
}
}
public MyClass()
{
}
public MyClass(string val1, string val2, T curVal)
{
Value1 = val1;
Value2 = val2;
curValue = curVal;
}
}
The xaml Code looks something like this
<ItemsControl ItemsSource="{Binding SelectedParams}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Value1}"/>
<Label Grid.Column="1" Content="{Binding Value2}"/>
<TextBox Grid.Column="2" Text="{Binding curValue, Mode=TwoWay}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Edit1: Changed MyClass to INotifyPropertyChanged now the Collection changes internal Values but the Setter is still not called on change of a Value
You need to implement INotifyPropertChanged interface for MyClass and raise the PropertyChanged in setter to notify UI that the property value changed.
How do i know what Element is selected at the moment
If you want support for item selection you have to use an other control. ItemsControl does not support selection.
Use ListView for example. Bind ItemsSource and SelectedItem to your class. Now every time you click on an item, SelectedValue is updated. And if you change SelectedValue from code the UI updates the selected item in the list. You can also bind other controls to SelectedValue like I did with the TextBlock outside the ListView.
View
<StackPanel>
<ListView ItemsSource="{Binding Values}" SelectedItem="{Binding SelectedValue}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Item1}" />
<TextBlock Text="=" />
<TextBlock Text="{Binding Path=Item2}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Orientation="Horizontal">
<TextBox Text="Selected:" Background="DarkGray" />
<TextBox Text="{Binding SelectedValue.Item1, Mode=OneWay}" Background="DarkGray" />
</StackPanel>
</StackPanel>
Data
public class ListViewBindingViewModel : INotifyPropertyChanged
{
private Tuple<string,int> _selectedValue;
public ObservableCollection<Tuple<string,int>> Values { get; }
public Tuple<string, int> SelectedValue
{
get { return _selectedValue; }
set
{
_selectedValue = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedValue)));
}
}
public ListViewBindingViewModel()
{
Values = new ObservableCollection<Tuple<string, int>> {Tuple.Create("Dog", 3), Tuple.Create("Cat", 5), Tuple.Create("Rat",1)};
}
}
I have a colection and a ListView to which I have binded a collection of objects:
<ListView ItemsSource="{Binding Levels}"... />
Here is a Levels collection:
private ObservableCollection<Level> _levels;
public ObservableCollection<Level> Levels
{
get { return _levels; }
set { SetProperty(ref _levels, value); }
}
And here is a Level class:
public class Level : BindableBase
{
private double _value;
public double Value
{
get { return _value; }
set { SetProperty(ref _value, value); }
}
private bool _isChecked;
public bool IsChecked
{
get { return _isChecked; }
set { SetProperty(ref _isChecked, value); }
}
public SolidColorBrush ForegroundColor
{
get { return IsChecked ? new SolidColorBrush(Colors.Yellow) : new SolidColorBrush(Colors.BlueViolet); }
}
}
If I add element in the collection, the new element will be displayed in the ListView, but if I change the existing element of collection I can not see any change:
private void LvLevels_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (LvLevels.SelectedItem != null)
{
selectedLevel = (Level)LvLevels.SelectedItem;
foreach (var l in viewModel.Levels)
{
if (l.Value == selectedLevel.Value)
l.IsChecked = true; // it doesn't work
else
l.IsChecked = false;
}
// it works
// viewModel.Levels.Add(new Level { Value = 10, IsChecked = true});
}
Why and how can I fix it ?
Update
Here is my ItemTemplate:
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Source="../Assets/icons/зоны.png"
Margin="10 0 0 0"/>
<TextBlock x:Name="tblock" Text="{Binding Value}" Grid.Column="1" FontSize="30"
Foreground="{Binding ForegroundColor}" />
<!-- Style="{StaticResource ZoneButtonText}" -->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
If you expect the ForegroundColor to change (that's a guess), you need to make sure the WPF components know it has changed. You need to send a change notification for ForegroundColor when IsChecked changes, too.
Oh, and don't compare doubles using ==. Doubles are floating point variables.
I have a checklist view that has 2 ScrollViewers. One checklist is for incomplete items, the other is for complete items. They are populated by 2 separate observable collections and bound to by ItemsControls.
The UserControl has a button, when clicked will move that 'check' to the other collection.
Currently the way I have this setup is in the ViewModel that's the DataContext for the UserControl there is a public event that is subscribed to by the main window's VM by using:
((CheckItemVM) ((CheckListItem) cli).DataContext).CompleteChanged += OnCompleteChanged;
where cli is the checklist item.
then the OnCompleteChanged finds the appropriate View object by using:
foreach (object aCheck in Checks)
{
if (aCheck.GetType() != typeof (CheckListItem)) continue;
if (((CheckListItem) aCheck).DataContext == (CheckItemVM) sender)
{
cliToMove = (CheckListItem) aCheck;
break;
}
}
It's pretty obvious this breaks MVVM and I'm looking for a way around it (CheckListItem is the View, and CheckItemVM is it's DataContext ViewModel). Reasoning for the boxed type is I've got another UserControl that will have instances inside both, which are basically section labels, and I need to be able to sort my observable collections where there is an association between the checklistitem to a specific section by name.
This can be done in MVVM using commands, and bindings....
The idea that I propouse here is to create a command in the Windows view model, that manage the check command, and this command to receive the item view model in the params, then manage the the things in the command. I'm going to show you a simple example, using MvvmLight library:
The model:
public class ItemViewModel : ViewModelBase
{
#region Name
public const string NamePropertyName = "Name";
private string _name = null;
public string Name
{
get
{
return _name;
}
set
{
if (_name == value)
{
return;
}
RaisePropertyChanging(NamePropertyName);
_name = value;
RaisePropertyChanged(NamePropertyName);
}
}
#endregion
#region IsChecked
public const string IsCheckedPropertyName = "IsChecked";
private bool _myIsChecked = false;
public bool IsChecked
{
get
{
return _myIsChecked;
}
set
{
if (_myIsChecked == value)
{
return;
}
RaisePropertyChanging(IsCheckedPropertyName);
_myIsChecked = value;
RaisePropertyChanged(IsCheckedPropertyName);
}
}
#endregion
}
A simple model with two property, one for the name (an identifier) and another for the check status.
Now in the Main View Model, (or Windows view model like you want)....
First the Collections, one for the checked items, and another for the unchecked items:
#region UncheckedItems
private ObservableCollection<ItemViewModel> _UncheckedItems;
public ObservableCollection<ItemViewModel> UncheckedItems
{
get { return _UncheckedItems ?? (_UncheckedItems = GetAllUncheckedItems()); }
}
private ObservableCollection<ItemViewModel> GetAllUncheckedItems()
{
var toRet = new ObservableCollection<ItemViewModel>();
foreach (var i in Enumerable.Range(1,10))
{
toRet.Add(new ItemViewModel {Name = string.Format("Name-{0}", i), IsChecked = false});
}
return toRet;
}
#endregion
#region CheckedItems
private ObservableCollection<ItemViewModel> _CheckedItems;
public ObservableCollection<ItemViewModel> CheckedItems
{
get { return _CheckedItems ?? (_CheckedItems = GetAllCheckedItems()); }
}
private ObservableCollection<ItemViewModel> GetAllCheckedItems()
{
var toRet = new ObservableCollection<ItemViewModel>();
foreach (var i in Enumerable.Range(11, 20))
{
toRet.Add(new ItemViewModel { Name = string.Format("Name-{0}", i), IsChecked = true });
}
return toRet;
}
#endregion
And the command:
#region CheckItem
private RelayCommand<ItemViewModel> _CheckItemCommand;
public RelayCommand<ItemViewModel> CheckItemCommand
{
get { return _CheckItemCommand ?? (_CheckItemCommand = new RelayCommand<ItemViewModel>(ExecuteCheckItemCommand, CanExecuteCheckItemCommand)); }
}
private void ExecuteCheckItemCommand(ItemViewModel item)
{
//ComandCode
item.IsChecked = true;
UncheckedItems.Remove(item);
CheckedItems.Add(item);
}
private bool CanExecuteCheckItemCommand(ItemViewModel item)
{
return true;
}
#endregion
The magic here could be in the Data binding, in this case I used command parameter and the FindAncestor binding, check the Data Template:
<DataTemplate x:Key="UncheckedItemDataTemplate">
<Grid>
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Top"/>
<CheckBox HorizontalAlignment="Left" VerticalAlignment="Top" IsChecked="{Binding IsChecked}" IsEnabled="False"/>
<Button Content="Check" Width="75" Command="{Binding DataContext.CheckItemCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainWindow}}}" CommandParameter="{Binding Mode=OneWay}"/>
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="CheckedItemDataTemplate">
<Grid>
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Top"/>
<CheckBox HorizontalAlignment="Left" VerticalAlignment="Top" IsChecked="{Binding IsChecked}" IsEnabled="False"/>
</StackPanel>
</Grid>
</DataTemplate>
One data template for checked items, and another for unchecked items. Now the usage, this is simpler:
<ListBox Grid.Row="2" Margin="5" ItemsSource="{Binding UncheckedItems}" ItemTemplate="{DynamicResource UncheckedItemDataTemplate}"/>
<ListBox Grid.Row="2" Margin="5" Grid.Column="1" ItemsSource="{Binding CheckedItems}" ItemTemplate="{DynamicResource CheckedItemDataTemplate}"/>
This is a cleaner solution, hope is helps.
Hi all I have a list view which is filled by an ObservableCollection. Now I want to get the value of the selected item from the list and store it. How I can achieve this?
This is my ViewModel:
public StopViewModel(IGrtrService grtrService)
{
Argument.IsNotNull(() => grtrService);
_grtrService = grtrService;
AllStops = _grtrService.LoadStop();
Stop_Line = _grtrService.LoadLines();
SearchCollection = new Command(OnSearchPressed);
}
public ObservableCollection<Stop> AllStopsCollection // Must be property or DP to be bound!
{
get { return AllStops; }
set
{
if (Equals(value, AllStops)) return;
AllStops = value;
}
}
public Grtr Grtr
{
get { return GetValue<Grtr>(GrtrProperty); }
set { SetValue(GrtrProperty, value); }
}
public static readonly PropertyData GrtrProperty = RegisterProperty("Grtr", typeof(Grtr));
}
And in the XAML file I have the following code:
<catel:StackGrid x:Name="LayoutRoot">
<catel:StackGrid.ColumnDefinitions>
<ColumnDefinition />
</catel:StackGrid.ColumnDefinitions>
<catel:StackGrid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</catel:StackGrid.RowDefinitions>
<ToolBarTray Grid.Row="0" VerticalAlignment="Top" Background="Azure">
<ToolBar>
<TextBox Width="150" Text="{Binding Path=SearchValue}" />
<Button Content="Search" Command="{Binding SearchCollection}" />
<Button Content="Pass Object" Command="{Binding SearchCollection}" />
</ToolBar>
</ToolBarTray>
<ListBox Grid.Row="1" ItemsSource="{Binding AllStopsCollection}" SelectedValue="{Binding SelectedStop}" />
</catel:StackGrid>
Since you are using Catel, it will automatically take care of change notifications for your. Just define this property:
public Stop SelectedStop
{
get { return GetValue<Stop>(SelectedStopProperty); }
set { SetValue(SelectedStopProperty, value); }
}
public static readonly PropertyData SelectedStopProperty = RegisterProperty("SelectedStop", typeof(Stop));
It will be set to the value.
Pro tip: if you use Catel.Fody, you can write this:
public Stop SelectedStop { get; set; }
and it will automatically be converted to the final Catel property as written above.
In your ViewModel :
private stop _selectedStop;
public Stop SelectedStop
{
get
{
return _selectedStop;
}
set
{
if (_selectedStop!= value)
_selectedStop = value;
OnPropertyChanged("SelectedStop"); //U should implement this method using INotifyPropertyChanged
}
}
In your Window (XAML) , set the Binding's mode to TwoWay :
<ListBox Grid.Row="1" ItemsSource="{Binding AllStopsCollection}" SelectedValue="{Binding SelectedStop, Mode=twoWay}" />
As I see from comments you just can't figure out how to bind list's selected item to property. So first of all you need to create coresponding property in your view model:
public Stop SelectedStop
{
get
{
return _selectedStop;
}
set
{
if (Equals(value, _selectedStop)) return;
_selectedStop = value;
}
}
Make sure that you implement INotifyPropertyChanged interface and thet your property is raising "OnPropertyChanged" when it's changed.
And for the list box you should set:
<ListBox Grid.Row="1" ItemsSource="{Binding AllStopsCollection}" SelectedValue="{Binding SelectedStop, Mode=TwoWay}" />