Button inside a WPF List view/data grid - wpf

I am trying to get the value/ID of the clicked row. If the row is selected, this works fine. But if I just try to click the button inside, the selected customer is null. How do I do Command Parameters here.
I tried this see the answers to the following questions:
ListView and Buttons inside ListView
WPF - Listview with button
Here is the code:
<Grid>
<ListView ItemsSource="{Binding Path=Customers}"
SelectedItem="{Binding Path=SelectedCustomer}"
Width="Auto">
<ListView.View>
<GridView>
<GridViewColumn Header="First Name">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Margin="6,2,6,2">
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Address">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Margin="6,2,6,2">
<Button Content="Address" Command="{Binding Path=DataContext.RunCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
public class VM : ViewModelBase
{
public RelayCommand RunCommand { get; private set; }
private ObservableCollection<Customer> _Customers;
public ObservableCollection<Customer> Customers
{
get { return _Customers; }
set
{
if (value != _Customers)
{
_Customers = value;
RaisePropertyChanged("Customers");
}
}
}
private Customer _SelectedCustomer;
public Customer SelectedCustomer
{
get { return _SelectedCustomer; }
set
{
if (value != _SelectedCustomer)
{
_SelectedCustomer = value;
RaisePropertyChanged("SelectedCustomer");
}
}
}
public VM()
{
Customers = Customer.GetCustomers();
RunCommand = new RelayCommand(OnRun);
}
private void OnRun()
{
Customer s = SelectedCustomer;
}
}
in the OnRun Method, selected Customer is coming in as null. I want the data row(customer) here. How do I do this?

Three possible solutions that you can choose.
Pass current row object as a CommandParameter. In this case, you will modify OnRun method a little. (recommended)
<Button Content="Address" Command="{Binding Path=DataContext.RunCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}" CommandParameter={Binding} />
I think CommandParameter={Binding} works fine because the DataContext of each row is each Customer object.
and OnRun method needs to be modified in order to get a parameter as an argument.
private void OnRun(object o){
if(!(o is Customer)) return;
// Do something
}
Or, Write a little code-behind with SelectionChanged event handling. (not recommended)
Or, Use EventToCommand in MVVM-light toolkit. (not recommended)

CommandParameter does NOT entirely support data binding.
http://connect.microsoft.com/VisualStudio/feedback/details/472932/wpf-commandparameter-binding-should-be-evaluated-before-command-binding

Related

List View Selected Item Binding in wpf mvvm

I am using a ListView in wpf mvvm pattern whose SelectedItem binding is done to the ViewModel. The problem what I am facing is as soon as I check the checkbox, The SelectedItem binding is not working immediately. It work only when I click again somewhere outside the checkbox and its respective content.
My ListView is like this:
<Grid>
<Grid.Resources>
<DataTemplate x:Key="checkboxHeaderTemplate">
<CheckBox IsChecked="{Binding Path=DataContext.AllSelected,RelativeSource={RelativeSource AncestorType=UserControl },Mode=TwoWay}">
</CheckBox>
</DataTemplate>
<DataTemplate x:Key="CheckBoxCell">
<!--<CheckBox Checked="CheckBox_Checked" />-->
<CheckBox IsChecked="{Binding Path=IsSelected, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
</CheckBox>
</DataTemplate>
<DataTemplate x:Key="TextCell">
<TextBlock Text="Usecasename">
</TextBlock>
</DataTemplate>
<DataTemplate x:Key="ButtonCell">
<Button Content="{Binding Path=UsecaseName, Mode=TwoWay}" >
</Button>
</DataTemplate>
</Grid.Resources>
<ListView SelectedItem="{Binding SelectedSection}" ItemsSource="{Binding Path=UsecaseListItems}" >
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn HeaderTemplate="{StaticResource checkboxHeaderTemplate}"
CellTemplate="{StaticResource CheckBoxCell}" Width="auto">
</GridViewColumn>
<GridViewColumn HeaderTemplate="{StaticResource TextCell}"
CellTemplate="{StaticResource ButtonCell}" Width="auto">
</GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
</Grid>
The HomeViewModel with which I am binding the Selected itm of List View is like this:
private UseCase _selectedSection;
public UseCase SelectedSection
{
get { return _selectedSection; }
set
{
_selectedSection = value;
if (this.SelectedSection.UsecaseName == ("CCS01") && (this.SelectedSection.IsSelected == true))
{
this.ContentWindow = new CCS01();
}
else if (this.SelectedSection.UsecaseName == ("CCS02") && (this.SelectedSection.IsSelected == true))
{
this.ContentWindow = new CCS02();
}
else if (this.SelectedSection.UsecaseName == ("ECS52") && (this.SelectedSection.IsSelected == true))
{
this.ContentWindow = new ECS52();
}
else
this.ContentWindow = new Default();
OnPropertyChanged("SelectedSection");
}
}
and The UseCase class is this:
public class UseCase: BaseNotifyPropertyChanged
{
public string UsecaseName { get; set; }
private bool _IsSelected;
public bool IsSelected
{
get { return _IsSelected; }
set
{
_IsSelected = value;
OnPropertyChanged("IsSelected");
}
}
}
Please suggest what correction should I do so that, It should hit the binding directly as I check the Checkboxes.
You should change the checkbox binding of the CheckBoxCell to something like this :
<DataTemplate x:Key="CheckBoxCell">
<!--<CheckBox Checked="CheckBox_Checked" />-->
<CheckBox IsChecked="{Binding Path=IsSelected,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ListViewItem}},
Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
</CheckBox>
</DataTemplate>
And for this work you need to put SelectionMode to Single
<ListView SelectedItem="{Binding SelectedSection}"
ItemsSource="{Binding Path=UsecaseListItems}" SelectionMode="Single">
And do this in your viewmodel
private UseCase _selectedSection;
public UseCase SelectedSection
{
get { return _selectedSection; }
set
{
DeSelectAll();
_selectedSection = value;
_selectedSection.IsSelected = true;
OnPropertyChanged("SelectedSection");
}
}
private void DeSelectAll()
{
foreach (var item in UsecaseListItems)
{
item.IsSelected = false;
}
}

How to bind color into my XAML

I have this view model:
public class MyData
{
public string Status;
public StatusMsg StatusMessage;
private Brush _statusBrushes;
public Brush StatusBrushes
{
get
{
switch (StatusMessage)
{
case StatusMsg.Cancel:
return Brushes.Red;
case StatusMsg.InProcess:
return Brushes.Blue;
case StatusMsg.Done:
return Brushes.Green;
default:
return Brushes.Green;
}
}
set { _statusBrushes = value; }
}
public enum StatusMsg
{
Cancel,
Done,
InProcess,
}
}
Now i have this GridViewColumn:
<GridViewColumn Width="180" Header="Status">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock x:Name="Txt" Text="{Binding Status}" Foreground="Yellow" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
So as you can see this GridViewColumn color is yellow and i want to change it according my StatusMsg (my enum) so my question is how to bind my color into my XAML ?
I would recommend creating an IValueConverter that is able to convert your enum value to the appropriate color and then your binding would look something like:
<GridViewColumn Width="180" Header="Status">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock x:Name="Txt" Text="{Binding Status}"
Foreground="{Binding Path=StatusColor, Converter={StaticResource MyStatusColorConverter}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
You will of course also need to create the resource, here's a tutorial that a quick bing search turned up: http://wpftutorial.net/ValueConverters.html

Change ItemsControl grouping dynamically

I've search over the Internet for changing ItemsControl dynamically, but no luck (maybe my query is not good enough), so I ask here. Anyone can help me about creating grouping feature for an ItemsControl that can change group type dynamically.
Example, I have a collection of songs which have properties: Name, Artirst, Singer, Album. Then I have 3 radio buttons to which property is used to group there songs.
I have thinked about creating multiple CollectionView, but I think there is another ways which is better.
(I'm new at WPF, so whould you please give a little more details answer. Thank you :))
Here is the most minimal example I can come up with in MVVM style.
The viewmodel:
enum GroupBy
{
Name,
Artist
}
class Song
{
public string Name { get; set; }
public string Artist { get; set; }
}
class SonglistViewModel : ViewModelBase
{
private GroupBy groupBy;
public GroupBy GroupBy
{
get => this.groupBy;
set
{
if(this.groupBy == value)
{
return;
}
this.groupBy = value;
this.UpdateGrouping(value);
this.OnPropertyChanged();
}
}
public ObservableCollection<Song> Songs { get; } = new ObservableCollection<Song>();
private void UpdateGrouping(GroupBy value)
{
var servicesView = CollectionViewSource.GetDefaultView(this.Services);
servicesView.GroupDescriptions.Clear();
switch (value)
{
case GroupBy.Name:
servicesView.GroupDescriptions.Add(
new PropertyGroupDescription(nameof(Song.Name)));
break;
case GroupBy.Artist:
servicesView.GroupDescriptions.Add(
new PropertyGroupDescription(nameof(Song.Artist)));
break;
}
}
}
The view:
<ListView ItemsSource="{Binding Songs}">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Header="Artist" DisplayMemberBinding="{Binding Artist}" />
</GridView>
</ListView.View>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding ItemCount, StringFormat={}({0})}" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListViewGroupStyle>
</ListView>

Filtering a Collection in a ListView in WPF

I'm creating an WPF application that allows a user to enter some details about their Employee, using Entity Framework, CRUD operations and MVVM.
So far, I have two ListViews. One contains a list of employees names (listview1), while the other (listview2) lists their details such as Date of Birth, address etc. The Image below will give you a better picture of what I'm creating;
I am using a CollectionViewSoruce to enable me to filter the results on listview2 when you select a specific name from listbox1. So far I am able to achieve this, but When I add an employee or delete, it throws an exception;
An unhandled exception of type 'System.StackOverflowException' occurred in *.UI.exe
Here are the code snippets that might help
ViewModel:
private EmployeeListViewModel()
: base("")
{
EmployeeList = new ObservableCollection<EmployeeViewModel>(GetEmployees());
this._employeeCol = new ListCollectionView(this.employeeList);
}
private ListCollectionView _employeeCol;
public ICollectionView EmployeeCollection
{
get { return this._employeeCol; }
}
private ObservableCollection<EmployeeViewModel> employeeList;
public ObservableCollection<EmployeeViewModel> EmployeeList
{
get { return employeeList; }
set
{
employeeList = value;
OnPropertyChanged("EmployeeList");
}
}
private EmployeeViewModel selectedEmployee = null;
public EmployeeViewModel SelectedEmployee
{
get
{
return selectedEmployee;
}
set
{
selectedEmployee = value;
OnPropertyChanged("SelectedEmployee");
EmployeeCollection.Filter = new Predicate<object>(o => SelectedEmployee != null && o != null && ((EmployeeViewModel)o).EmployeeID == SelectedEmployee.EmployeeID);
}
}
internal ObservableCollection<EmployeeViewModel> GetEmployees()
{
if (employeeList == null)
employeeList = new ObservableCollection<EmployeeViewModel>();
employeeList.Clear();
foreach (DataObjects.Employee i in new EmployeeRepository().GetAllEmployees())
{
EmployeeViewModel c = new EmployeeViewModel(i);
employeeList.Add(c);
}
return employeeList;
}
ListView2 - EmployeeListView;
<ListView Name="lsvEmpoyeeList" Height="170" Width="700"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
HorizontalAlignment="Center"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding EmployeeCollection}"
SelectedItem="{Binding SelectedEmployee}">
<ListView.View>
<GridView>
<GridViewColumn Header="Position" DisplayMemberBinding="{Binding Position}" Width="100" />
<GridViewColumn Header="DateOfBirth" DisplayMemberBinding="{Binding DateOfBirth, StringFormat={}\{0:dd/MM/yyyy\}}" Width="100" />
</GridView>
</ListView.View>
</ListView>
ListView1 - EmployeeSetUpView;
<ListView Height="380" HorizontalAlignment="Left" Name="lsNames" VerticalAlignment="Top" Width="170"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
SelectedItem="{Binding SelectedEmployee}"
ItemsSource="{Binding EmployeeList}" Grid.RowSpan="2" Grid.Row="1">
<ListView.View>
<GridView>
<GridViewColumn Header="FirstName" DisplayMemberBinding="{Binding FirstName}" Width="80" />
<GridViewColumn Header="Surname" DisplayMemberBinding="{Binding Surname}" Width="80" />
</GridView>
</ListView.View>
</ListView>
<ContentControl Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"
Content="{Binding}" ContentTemplate="{StaticResource EmployeeListView}" />
As you can see, I have put the filter within the setaccessor. I placed it within the constructor but what seems to happen is that none of the details appeared on the ListView2.
Furthermore, if I select a row from listview2 rather then from listview1, it also produces the StackOverFlowException which I am unsure why.
Any help would be appreciated or advice. Also, sorry for the large question!
I don't think the UI knows that EmployeeCollection has changed
Try adding a PropertyChanged event for EmployeeCollection in the SelectedEmployee setter after the filter is applied.
public EmployeeViewModel SelectedEmployee
{
get { return selectedEmployee;}
set
{
selectedEmployee = value;
OnPropertyChanged("SelectedEmployee");
EmployeeCollection.Filter = new Predicate<object>(o => SelectedEmployee != null && o != null && ((EmployeeViewModel)o).EmployeeID == SelectedEmployee.EmployeeID);
// EmployeeCollection view has changed, Notify UI
OnPropertyChanged("EmployeeCollection");
}
}
And as for the StackOverflowException I think this is caused by the fact both ListView have a TwoWay binding on SelectedEmployee, so when one ListView1 changes SelectedItem it causes ListView2 to update its selected item which updates ListView1 and so on, and so on.
Try setting the binding to OneWay for SelectedEmployee on ListView2
SelectedItem="{Binding SelectedEmployee, Mode=OneWay}">

WPF - Listview with button

i have a listview template and one column is a button. I need selected item when i click in this button. How i can do this ??
To cature the selected ListView item inside a button pressed event you can leverage the MVVM pattern. In my ListView, in the XAML, I bind the ItemsSource and SelectedItem to a ViewModel class. I also bind my button Command in the template to RunCommand in the ViewModel.
The tricky part is getting the binding correct from the template to the active DataContext.
Once you do this you can capture the SelectedCustomer inside the RunCommand that
gets executed when the button gets pressed.
I've included some of the code to help get you started.
You can find implementations of ViewModelBase and DelegateCommand via Google.
Here is the XAML:
<Window x:Class="ListViewScrollPosition.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Main Window" Height="400" Width="400">
<Grid>
<ListView ItemsSource="{Binding Path=Customers}"
SelectedItem="{Binding Path=SelectedCustomer}"
Width="Auto">
<ListView.View>
<GridView>
<GridViewColumn Header="First Name">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Margin="6,2,6,2">
<TextBlock Text="{Binding FirstName}"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Last Name">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Margin="6,2,6,2">
<TextBlock Text="{Binding LastName}"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Address">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Margin="6,2,6,2">
<Button Content="Address"
Command="{Binding
Path=DataContext.RunCommand,
RelativeSource=
{RelativeSource FindAncestor,
AncestorType={x:Type ItemsControl}}}"/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Window>
Here is the ViewModel:
using System.Collections.ObjectModel;
using System.Windows.Input;
using ListViewScrollPosition.Commands;
using ListViewScrollPosition.Models;
namespace ListViewScrollPosition.ViewModels
{
public class MainViewModel : ViewModelBase
{
public ICommand RunCommand { get; private set; }
public MainViewModel()
{
RunCommand = new DelegateCommand<object>(OnRunCommand, CanRunCommand);
_customers = Customer.GetSampleCustomerList();
_selectedCustomer = _customers[0];
}
private ObservableCollection<Customer> _customers =
new ObservableCollection<Customer>();
public ObservableCollection<Customer> Customers
{
get
{
return _customers;
}
}
private Customer _selectedCustomer;
public Customer SelectedCustomer
{
get
{
return _selectedCustomer;
}
set
{
_selectedCustomer = value;
OnPropertyChanged("SelectedCustomer");
}
}
private void OnRunCommand(object obj)
{
// use the SelectedCustomer object here...
}
private bool CanRunCommand(object obj)
{
return true;
}
}
}
Here is where I link in the ViewModel to the View:
public partial class MainView : Window
{
public MainView()
{
InitializeComponent();
DataContext = new ViewModels.MainViewModel();
}
}
Example with a regular click event in the code behind:
<ListView Height="167.96" VerticalAlignment="Top" ItemsSource="{Binding FulfillmentSchedules}" SelectedItem="{Binding SelectedFulfillmentSchedule}">
<ListView.View>
<GridView>
<GridViewColumn Header="Request">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock>
<TextBlock.Text>
<MultiBinding StringFormat="{}{0}-{1}-{2}">
<Binding Path="Template.ProjectNumber" />
<Binding Path="Template.JobNumber" />
<Binding Path="Template.RequestId" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Template" DisplayMemberBinding="{Binding Template.Name}"/>
<GridViewColumn Header="Start Date" DisplayMemberBinding="{Binding StartDate}"/>
<GridViewColumn Header="Records" DisplayMemberBinding="{Binding Parameters.Records}"/>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Name="BtnYourButton" Content="Your Button" Click="BtnYourButton_Click" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Code behind:
private void BtnYourButton_Click(object sender, RoutedEventArgs e)
{
var boundData= (YourBoundDataType)((Button)sender).DataContext;
//do what you need to do here, including calling other methods on your VM
}
Note: While I certainly appreciate MVVM, I've come to accept that there is a pretty steep slope of dimminishing returns once you cross into actions and messaging between the form and the VM, so I use it only in cases of complex relationships between VMs or large singular VMs. For CRUD style data-centric applications I prefer to handle actions and message relay with the code behind.

Resources