the XAML of my window:
<ListView Grid.Row="0" Name="files">
<ListView.Resources>
<DataTemplate x:Key="CheckboxTemplate">
<CheckBox IsChecked="{Binding Save, Mode=TwoWay}" />
</DataTemplate>
</ListView.Resources>
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn Header=" " Width="30" CellTemplate="{StaticResource CheckboxTemplate}" />
<GridViewColumn Header="Datei" DisplayMemberBinding="{Binding File}"/>
</GridView>
</ListView.View>
</ListView>
the constructor of my Window:
IEnumerable<SaveItem> sil = sdl.Select(d => new SaveItem() { Save = true, Document = d });
files.ItemsSource = sil;
and the datastructure i want to display:
public class SaveItem : INotifyPropertyChanged
{
private bool save;
public bool Save
{
get { return this.save; }
set
{
if (value != this.save)
{
this.save = value;
NotifyPropertyChanged("Save");
}
}
}
private void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
public StandardDocument Document { get; set; }
public string File { get { return Document.Editor.File; } }
#region INotifyPropertyChanged Member
public event PropertyChangedEventHandler PropertyChanged;
#endregion
}
i call the window. The window appears. I uncheck a checkbox of an item of the listview. i click a button. in its event-handler i read out the itemssource of the listview and ... the Save-Property of the Unchecked Item is (in its source) still true!
where is my mistake? why does my sources not get updated if i check/uncheck a checkbox?
You have not set your data context. If you are all in the same class - put something like this in your constructor of the window.
DataContext = this;
I think you need to set the DataContext to the code behind and then for clarity bind to the path.
XAML to set the Window DataContext
DataContext="{Binding RelativeSource={RelativeSource Self}}"
try converting IEnumerable to list..
it is not suggested to use IEnumerable as item source particularly when item source is evaluated using Linq
List<SaveItem> sil = sdl.Select(d => new SaveItem() { Save = true, Document = d }).ToList<SaveItem>();
files.ItemsSource = sil;
Related
I have an object that consists of a string and an array. The string populates a ComboBox and the array populates a ListView depending on the selected string value. Each line of the ListViewconsists of a TextBlock and a CheckBox.
On submit I want to be able to verify which items have been selected for further processing but there's a disconnect when using the MVVM approach. I currently have the DataContext of the submit Button binding to the ListView but only the first value is being returned upon submit (somewhere I need to save the selected values to a list I assume but I'm not sure where). I added an IsSelected property to the model which I think is the first step, but after that I've been grasping at straws.
Model
namespace DataBinding_WPF.Model
{
public class ExampleModel { }
public class Example : INotifyPropertyChanged
{
private string _name;
private string[] _ids;
private bool _isSelected;
public bool IsSelected
{
get => _isSelected;
set
{
if (_isSelected != value)
{
_isSelected = value;
RaisePropertyChanged("IsSelected");
}
}
}
public string Name
{
get => _name;
set
{
if (_name != value)
{
_name = value;
RaisePropertyChanged("Name");
}
}
}
public string[] IDs
{
get => _ids;
set
{
if (_ids != value)
{
_ids = value;
RaisePropertyChanged("IDs");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new
PropertyChangedEventArgs(property));
}
}
}
}
ViewModel
namespace DataBinding_WPF.ViewModel
{
public class ExampleViewModel : INotifyPropertyChanged
{
public ObservableCollection<Example> Examples
{
get;
set;
}
// SelectedItem in the ComboBox
// SelectedItem.Ids will be ItemsSource for the ListBox
private Example _selectedItem;
public Example SelectedItem
{
get => _selectedItem;
set
{
_selectedItem = value;
RaisePropertyChanged(nameof(SelectedItem));
}
}
// SelectedId in ListView
private string _selectedId;
public string SelectedId
{
get => _selectedId;
set
{
_selectedId = value;
RaisePropertyChanged(nameof(SelectedId));
}
}
private string _selectedCheckBox;
public string IsSelected
{
get => _selectedCheckBox;
set
{
_selectedCheckBox = value;
RaisePropertyChanged(nameof(IsSelected));
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new
PropertyChangedEventArgs(property));
}
}
public void LoadExample()
{
ObservableCollection<Example> examples = new ObservableCollection<Example>();
examples.Add(new Example { Name = "Mark", IDs = new string[] { "123", "456" }, IsSelected = false });
examples.Add(new Example { Name = "Sally", IDs = new string[] { "789", "101112" }, IsSelected = false });
Examples = examples;
}
/* BELOW IS A SNIPPET I ADDED FROM AN EXAMPLE I FOUND ONLINE BUT NOT SURE IF IT'S NEEDED */
private ObservableCollection<Example> _bindCheckBox;
public ObservableCollection<Example> BindingCheckBox
{
get => _bindCheckBox;
set
{
_bindCheckBox = value;
RaisePropertyChanged("BindingCheckBox");
}
}
}
}
View
<UserControl x:Class = "DataBinding_WPF.Views.StudentView"
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:DataBinding_WPF"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "300">
<Grid>
<StackPanel HorizontalAlignment = "Left" >
<ComboBox HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="120"
ItemsSource="{Binding Path=Examples}"
SelectedItem="{Binding SelectedItem}"
DisplayMemberPath="Name"/>
<ListView x:Name="myListView"
ItemsSource="{Binding SelectedItem.IDs}"
DataContext="{Binding DataContext, ElementName=submit_btn}"
SelectedItem="{Binding SelectedId}"
Height="200" Margin="10,50,0,0"
Width="Auto"
VerticalAlignment="Top"
Background="AliceBlue">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<CheckBox
Name="myCheckBox"
IsChecked="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=ListViewItem}}"
Margin="5, 0"/>
<TextBlock Text="{Binding}" FontWeight="Bold" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button HorizontalAlignment="Left" Height="20" Width="100"
Click="Submit" x:Name="submit_btn">Submit</Button>
</StackPanel>
</Grid>
</UserControl>
View.cs
namespace DataBinding_WPF.Views
{
/// <summary>
/// Interaction logic for StudentView.xaml
/// </summary>
public partial class StudentView : UserControl
{
public StudentView()
{
InitializeComponent();
}
private void Submit(object sender, EventArgs e)
{
var selectedItems = ((Button)sender).DataContext;
// process each selected item
// foreach (var selected in ....) { }
}
}
}
The ListView control already exposes a selected items collection as property SelectedItems.
private void Submit(object sender, RoutedEventArgs e)
{
var selectedIds = myListView.SelectedItems.Cast<string>().ToList();
// ...do something with the items.
}
However, I doubt that you want to do this in the code-behind, but rather in the view model. For this purpose, WPF offers the concept of commands.
MVVM - Commands, RelayCommands and EventToCommand
What you need is a relay command or delegate command (the name varies across frameworks). It encapsulates a method that should be executed for e.g. a button click and a method to determine whether the command can be executed as an object that can be bound in the view. Unfortunately, WPF does not provide an implementation out-of-the-box, so you either have to copy an implementation like here or use an MVVM framework that already provides one, e.g. Microsoft MVVM Tookit.
You would expose a property Submit of type ICommand in your ExampleViewModel and initialize it in the constructor with an instance of RelayCommand<T> that delegates to a method to execute.
public class ExampleViewModel : INotifyPropertyChanged
{
public ExampleViewModel()
{
Submit = new RelayCommand<IList>(ExecuteSubmit);
}
public RelayCommand<IList> Submit { get; }
// ...other code.
private void ExecuteSubmit(IList selectedItems)
{
// ...do something with the items.
var selectedIds = selectedItems.Cast<string>().ToList();
return;
}
}
In your view, you would remove the Click event handler and bind the Submit property to the Command property of the Button. You can also bind the SelectedItems property of the ListView to the CommandParameter property, so the selected items are passed to the command on execution.
<Button HorizontalAlignment="Left"
Height="20"
Width="100"
x:Name="submit_btn"
Command="{Binding Submit}"
CommandParameter="{Binding SelectedItems, ElementName=myListView}">Submit</Button>
Additionally, a few remarks about your XAML.
Names of controls in XAML should be Pascal-Case, starting with a capital letter.
You should remove the DataContext binding from ListView completely, as it automatically receives the same data context as the Button anyway.
DataContext="{Binding DataContext, ElementName=submit_btn}"
You can save yourself from exposing and binding the SelectedItem property in your ExampleViewModel, by using Master/Detail pattern for hierarchical data.
<Grid>
<StackPanel HorizontalAlignment = "Left" >
<ComboBox HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="120"
ItemsSource="{Binding Path=Examples}"
IsSynchronizedWithCurrentItem="True"
DisplayMemberPath="Name"/>
<ListView ItemsSource="{Binding Examples/IDs}"
SelectedItem="{Binding SelectedId}"
Height="200" Margin="10,50,0,0"
Width="Auto"
VerticalAlignment="Top"
Background="AliceBlue">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<CheckBox Name="myCheckBox"
IsChecked="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}"
Margin="5, 0"/>
<TextBlock Text="{Binding}"
FontWeight="Bold" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button HorizontalAlignment="Left"
Height="20"
Width="100"
Command="{Binding Submit}"
CommandParameter="{Binding SelectedItems, ElementName=myListView}">Submit</Button>
</StackPanel>
</Grid>
If the view's data context is bound to the view then remove the DataContext from the ListView.
You could remove the item template and instead use a GridView like:
<ListView.View>
<GridView >
<GridViewColumn Header="Selected" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" Content="{Binding Name}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
Since the ItemSource is an Observable collection, there are several options to monitor changes in the checkboxes:
Add an event handler to the item changed event of the collection and then you can add the Name or the collection index to a local collection. e.g Examples[e.CollectionIndex].Name
Alternatively iterate over the observable collection and select those Examples where Selected = "true"
To clarify what is going on. Basically I have a ListView binding which points to a List within an object. Within that same object (but not within the list) I have another list which holds strings used for a dropdown and I cannot assign it to my list view as the DataContext is already set to the first list mentioned. Can someone please offer a solution, or better yet a more efficient way to handle this?
View
<ListView ItemsSource="{Binding myModel.myCollection}" Grid.Row="1" Grid.Column="0">
<ListView.View>
<GridView>
<GridViewColumn Header="Name">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding Name, Mode=TwoWay}"></TextBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Category Tag">
<GridViewColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding myModel.CategoryList}"></ComboBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Model
public class SiteUrlsModel : INotifyPropertyChanged
{
public string CaseName { get; set; }
public List<string> TestList => new List<string> { "Test1", "Test2", "Test3" };
public List<string> _categoryTagList;
public List<string> CategoryTagList
{
get => _categoryTagList;
set
{
if (_categoryTagList == value)
return;
_categoryTagList = value;
OnPropertyChanged();
}
}
private ObservableCollection<SiteUrlsModel> _myCollection;
public ObservableCollection<SiteUrlsModel> myCollection
{
get => _siteurlscCollection;
set
{
if (_siteurlscCollection == value)
return;
_siteurlscCollection = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
For simplicity I have excluded the ViewModel and Code-Behind but after InitialiseComponent() I have DataContext = new TestViewModel() and in my ViewModel I have a property which creates a new instance of my Model as well as adding a getter to ensure everything is accessible. Rest assured the list gets populated I am simply trying to populate one dropdown separately.
This is happening because, the Combo Box's datacontext will be myModel's item.
You need to explicitly tell the combo box to get the itemssource from it's parent's datacontext.
<DataTemplate>
<ComboBox ItemsSource="{Binding DataContext.myModel.CategoryList, RelativeSource={RelativeSource AncestorType=DataGrid}}"></ComboBox>
</DataTemplate>
I am trying to use the DataGridCheckBoxColumn in a grid and I noticed it has no events for checked or unchecked, for some reason.
I was trying to add attached events to this by creating a custom CBColumn class that inherits DataGridCheckBoxColumn.
The problem I am running into is that I am not sure how to add the handler to the exposed property since DataGridCheckBoxColumn is not derived from UIElement.
Therefore AddHandler and RemoveHandler are not available in this code block:
public event RoutedEventHandler Checked
{
add { AddHandler(CheckedEvent, value); }
remove { RemoveHandler(CheckedEvent, value); }
}
Any ideas on how to do this? I have looked all over with no luck.
EDIT: I am using MVVM, so I need to avoid Code Behind if possible.
Click event for DataGridCheckBoxColumn
<DataGridCheckBoxColumn Binding="{Binding Path=LikeCar}" Header="LikeCar">
<DataGridCheckBoxColumn.CellStyle>
<Style>
<EventSetter Event="CheckBox.Checked" Handler="OnChecked"/>
</Style>
</DataGridCheckBoxColumn.CellStyle>
</DataGridCheckBoxColumn>
Here is another solution in code. This is really rough, but it demonstrates the checked box and show a number values of what is checked in a text box.
<Window x:Class="DataGridCheckBoxItemTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:DataGridCheckBoxItemTest"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<vm:DataGridTestVM />
</Window.DataContext>
<Grid>
<DataGrid ItemsSource="{Binding Source}"
SelectedValue="{Binding Selected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Margin="10">
<DataGrid.Columns>
<DataGridCheckBoxColumn Header="Test Checked" Binding="{Binding S}"/>
</DataGrid.Columns>
</DataGrid>
<TextBox HorizontalAlignment="Left"
Text="{Binding Test, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Height="39"
Margin="20,244,0,0"
TextWrapping="Wrap"
VerticalAlignment="Top"
Width="237"/>
</Grid>
namespace DataGridCheckBoxItemTest
{
public class DataGridTestVM : INotifyPropertyChanged
{
ObservableCollection<Source> source;
Source s;
int test;
public DataGridTestVM()
{
source = new ObservableCollection<Source>();
for (int i = 0; i < 10; i++)
{
s = new Source();
s.test = i;
source.Add(s);
}
}
public ObservableCollection<Source> Source
{
get
{
return source;
}
set
{
source = value;
OnPropertyChanged("Source");
}
}
public int Test
{
get
{
return test;
}
set
{
test = value;
OnPropertyChanged("Test");
}
}
public Source Selected
{
get
{
return s;
}
set
{
s = value;
Test = s.test;
OnPropertyChanged("Selected");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
}
public class Source
{
public int test;
}
}
I ended up just reverting to a DataGridTemplateColumn and using the checkbox control in there. Didn't seem like there was a way to do what I wanted.
Let me start by saying that I am new to MVVM, so please bare with be, if the question is unclear let me know and I will try to clarify.
I have a button which is successfully binding a ListView. (it populates the listView).
below is the button VM code:
<Button Content="Fetch Data" Command="{Binding readFilesCommand}" CommandParameter="{Binding Path=Text, ElementName=browseFolderTextBox}" Name="button1" />
The listView which is being populated looks like this:
<ListView SelectionMode="Extended" Name="responseListView" ItemsSource="{Binding}" GridViewColumnHeader.Click="responseListViewClick" >
<ListView.Resources>
<local:IndexConverter x:Key="IndexConverter" />
<DataTemplate x:Key="OrdinalColumnDataTemplate">
<TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListViewItem},
Converter={StaticResource ResourceKey=IndexConverter}}" HorizontalAlignment="Right" />
</DataTemplate>
</ListView.Resources>
<ListView.View>
<GridView x:Name="gridView2" AllowsColumnReorder="True">
<GridViewColumn Width="28" Header="#" CellTemplate="{StaticResource ResourceKey=OrdinalColumnDataTemplate}" />
<GridViewColumn Width="80" DisplayMemberBinding="{Binding Name}" Header="Name" />
<GridViewColumn Width="150" DisplayMemberBinding="{Binding EMail}" Header="EMail" />
<GridViewColumn Width="75" DisplayMemberBinding="{Binding Date}" Header="Date" />
<GridViewColumn Width="75" DisplayMemberBinding="{Binding Time}" Header="Time" />
</GridView>
</ListView.View>
</ListView>
Below is the code of the class being populated in the listView.
public class ResourceList : ObservableCollection<Resource>
{
public ResourceList() : base()
{
}
}
public class Resource : INotifyPropertyChanged
{
public Resource()
{
Name = "";
EMail = "";
Date = "";
Time = "";
SWList = new ObservableCollection<string>();
}
private string name;
private string eMail;
private string time;
private string date;
public string Name
{
get { return name;}
set
{
if(name != value)
{
name = value;
OnPropertyChanged("Name");
}
}
}
public string EMail
{
get { return eMail; }
set
{
if (eMail != value)
{
eMail = value;
OnPropertyChanged("EMail");
}
}
}
public string Date
{
get { return date;}
set
{
if (date != value)
{
date = value;
OnPropertyChanged("Date");
}
}
}
public string Time
{
get { return time; }
set
{
if (time != value)
{
time = value;
OnPropertyChanged("Time");
}
}
}
// This interface causes the View to be notified of changes to the instances of Resource.
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
var handler = PropertyChanged;
if(handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
public ObservableCollection<string> SWList { get; set; }
}
// ObservableCollection notifies the View of changes to the collection (add, delete, move items)
public class Licenses : ObservableCollection<Licenses>
{
public Licenses()
{
}
public string Name { get; set; }
public string License { get; set; }
}
so far everything works fine. Now on to my question. I would like each row of the ListView to have a background color. lets say property time is missing for one row, then I would like the whole row to be red. Where should I start?
You can surround each ListViewItem with a container (do that with a template) and change the background color of this container with a binding or a DataTrigger.
One example here : Change background color of GridView row in a ListView
EDIT : according to MVVM, you should define a business property on your class Resource, of a type such boolean (IsValid ?) or enum (Status ?), and use a converter inside your Binding to convert the value to a SolidColorBrush (for example).
I have some ObservableCollections binded to some WPF controls and they work fine. And I have a feature where I completely replace these ObservableCollections through reassignment and filling them again, but after doing this, the WPF controls don't get updated.
Or is this binding connection only established at startup once, and then I should never reinitialize the ObservableCollections, but only change them?
EDIT:
public partial class MainWindow : Window
{
ObservableCollection<EffectViewModel> effects;
public ObservableCollection<EffectViewModel> Effects
{
get { return this.effects; }
set
{
this.effects = value;
this.RaisePropertyChanged ( "Effects" );
}
}
public event PropertyChangedEventHandler PropertyChanged;
void RaisePropertyChanged ( string name )
{
var handler = this.PropertyChanged;
if ( handler != null )
handler ( this, new PropertyChangedEventArgs ( name ) );
}
}
public void LoadEffects ( string path, string filename )
{
//returns new ObservableCollection<EffectViewModel> ( );
this.Effects = File.Load ( path, filename );
}
public class EffectViewModel
{
public bool this [ EffectType type ]
{
get { return AllEffects.First ( e => e.Type == this.Type ).IsSupported; }
set
{
AllEffects.First ( e => e.Type == this.Type ).IsSupported = value;
this.RaisePropertyChanged ( "this" );
}
}
#region Events
public event PropertyChangedEventHandler PropertyChanged;
void RaisePropertyChanged ( string name )
{
var handler = this.PropertyChanged;
if ( handler != null )
handler ( this, new PropertyChangedEventArgs ( name ) );
}
#endregion
}
EDIT2:
<Window x:Class="EffectWindow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
Title="Effect Display" Height="200" Width="700"
<DockPanel VerticalAlignment="Stretch">
<ListView
ItemsSource="{Binding Effects}"
AlternationCount="2"
DockPanel.Dock="Top"
HorizontalContentAlignment="Stretch">
<ListView.View>
<GridView>
<GridViewColumn
Width="70"
Header="GPU">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox
Margin="0"
HorizontalAlignment="Center"
IsChecked="{Binding [GPU], Mode=TwoWay}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn
Width="70"
Header="CPU">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox
Margin="0"
HorizontalAlignment="Center"
IsChecked="{Binding [CPU], Mode=TwoWay}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</DockPanel>
</Window>
The object you are binding to should implement the INotifyPropertyChanged interface. Then, the bound collection property should raise PropertyChanged event in its setter. Something like this:
public ObservableCollection<MyObject> MyCollection
{
get
{
return _myCollection;
}
set
{
_myCollection = value;
RaisePropertyChanged("MyCollection");
}
}
Try not to reassign, but clear and add new items.
You’ll need to know the dependency object and dependency property where the binding was defined. Then you can use this line:
BindingOperations.GetBindingExpressionBase(dependencyObject, dependencyProperty).UpdateTarget();