I'm trying to create a UI with WPF using MVVM, but I'm having a bit of trouble. I want to have a DataGrid with two columns. The first column will be a label, and the second column will have a ComboBox in it. The label column always shows up, but nothing ever shows up in the ComboBox. I'm don't think I'm binding it properly, but I'm not sure how to fix it.
I created a class with the properties that I want to appear in the DataGrid. The label will be the Parameter property and I have a list property called Revisions for the ComboBox.
class RevisionMapModel
{
private string _parameter;
public string Parameter
{
get { return _parameter; }
}
private List<string> _revisions;
public List<string> Revisions
{
get { return _revisions; }
}
private string _selection;
public string Selection
{
get { return _selection; }
set { _selection = value; }
}
public RevisionMapModel(string parameter, List<string> revisions)
{
// set the parameter name and the list of revisions
_parameter = parameter;
_revisions = revisions;
_selection = "";
// add a default revision
_revisions.Add("None");
// attempt to find which revision matches with this parameter
FullRevisionMatch(_parameter, _revisions);
// if a full match isn't found, then try again
if (_selection == "None")
{
PartialRevisionMatch(_parameter, _revisions);
}
}
}
Here is the ViewModel class that serves as the DataContext. The DataGrid is bound to the RevisionMapModels property, which is a list of the previous class.
class RevisionMapViewModel
{
private string _label;
public string Label
{
get { return _label; }
}
private List<RevisionMapModel> _revisionMapModels;
public List<RevisionMapModel> RevisionMapModels
{
get { return _revisionMapModels; }
}
public RevisionMapViewModel(List<Definition> parameters, List<Revision> revisions, string label)
{
// instantiate the list
_revisionMapModels = new List<RevisionMapModel>();
_label = label;
// convert the parameters and revisions to strings
List<string> revisionDescriptions = revisions.Select(r => r.Description).ToList();
List<string> parameterNames = parameters.Select(p => p.Name).ToList();
// create classes for each parameter
List<string> reservedRevisions = new List<string>();
for (int i=0; i< parameterNames.Count; i++)
{
RevisionMapModel model = new RevisionMapModel(parameterNames[i], revisionDescriptions);
// check to ensure this parameter is not mapped to a revision that is already selected
if (reservedRevisions.Contains(model.Selection))
{
// change the selection to none if it's already used
model.Selection = "None";
}
else
{
reservedRevisions.Add(model.Selection);
}
// add it to the list
_revisionMapModels.Add(model);
}
}
}
This is my XAML below. I'm guessing it's having trouble binding to the Revisions property because it's a list. I've tried a number of things, but nothing seems to get this to show up.
<Window x:Class="SheetRevisions.RevisionMapView"
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:SheetRevisions"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800" MinWidth="500" MinHeight="500" Width="500">
<Grid>
<DataGrid Margin="20,40,20,45" MinWidth="50" MinHeight="47" ItemsSource="{Binding RevisionMapModels}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Parameter Name" Binding="{Binding Parameter}" Width="Auto"/>
<DataGridComboBoxColumn Header="Revision Description" ItemsSource="{Binding Revisions}" Width="*" />
</DataGrid.Columns>
</DataGrid>
<Label Content="{Binding Label}" HorizontalAlignment="Left" Height="25" Margin="20,10,0,0" VerticalAlignment="Top" Width="412"/>
<Button Content="Cancel" HorizontalAlignment="Right" Margin="0,0,20,10" VerticalAlignment="Bottom" Width="75" IsCancel="True"/>
<Button Content="OK" HorizontalAlignment="Right" Margin="0,0,110,10" VerticalAlignment="Bottom" Width="75" IsDefault="True"/>
</Grid>
</Window>
I'm really new to WPF so any help is appreciated.
As already mentioned here, you need to implement INotifyPropertyChanged in your ViewModel. Something like
RevisionMapViewModel : INotifyPropertyChanged
//...your code here
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String info) {
if (PropertyChanged != null) {
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
Then, RevisionMapModel should be a public class, as I think.
Also, in case you work in Visual Studio, some tips about your incorrect bindings can be visible in Output window.
In addition to the comments above about implimenting INotifyPropertyChanged I also needed to change my XAML to use a DataGridTemplateColumn rather than a DataGridComboBoxColumn. It has something to do with a list not being a valid source as I found out from this post:
https://social.msdn.microsoft.com/Forums/en-US/e14be49f-1c03-420e-8a15-ca98e7eedaa2/how-to-bind-net-4-datagridcomboboxcolumn-to-a-collection-within-a-collection?forum=wpf
Working XAML:
<Window x:Class="SheetRevisions.RevisionMapView"
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:SheetRevisions"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800" MinWidth="500" MinHeight="500" Width="500">
<Grid>
<DataGrid Margin="20,40,20,45" MinWidth="50" MinHeight="47" ItemsSource="{Binding RevisionMapModels}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Parameter Name" Binding="{Binding Parameter}" Width="*" IsReadOnly="True"/>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Revisions}" SelectedItem="{Binding Selection}" Width="Auto"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<Label Content="{Binding Label}" HorizontalAlignment="Left" Height="25" Margin="20,10,0,0" VerticalAlignment="Top" Width="412"/>
<Button Content="Cancel" HorizontalAlignment="Right" Margin="0,0,20,10" VerticalAlignment="Bottom" Width="75" IsCancel="True"/>
<Button Content="OK" HorizontalAlignment="Right" Margin="0,0,110,10" VerticalAlignment="Bottom" Width="75" IsDefault="True"/>
</Grid>
</Window>
Revised model:
public class RevisionMapModel : INotifyPropertyChanged
{
#region fields
private Logger _logger = LogUtils.LogFactory.GetCurrentClassLogger();
private string _parameter;
public string Parameter
{
get { return _parameter; }
set { }
}
private List<string> _revisions;
public List<string> Revisions
{
get { return _revisions; }
}
private string _selection;
public string Selection
{
get { return _selection; }
set
{
_selection = value;
OnPropertyRaised("Selection");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public RevisionMapModel(string parameter, List<string> revisions)
{
// set the parameter name and the list of revisions
_parameter = parameter;
_revisions = revisions;
_selection = "";
// add a default revision
_revisions.Add("None");
// attempt to find which revision matches with this parameter
FullRevisionMatch(_parameter, _revisions);
// if a full match isn't found, then try again
if (_selection == "None")
{
PartialRevisionMatch(_parameter, _revisions);
}
}
protected void OnPropertyRaised(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
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"
I have a user control that I am using to populate a datagrid.
I would like the user to be able to add items by editing the empty row at the bottom. (This is why I am using a datagrid rather than an itemscontrol) However the datagrid does not realise that the last item is edited unless the user clicks the background of the control. I would like the new item to be added when the user makes changes on the properties that the control exposes.
XAML of the control:
<UserControl x:Class="ControlTest.MyControl"
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:ControlTest"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="300"
DataContext="{Binding Path=., Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
>
<StackPanel Orientation="Vertical">
<TextBox Text="{Binding Path=p1, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Width="300"
Height="30"
VerticalAlignment="Center"/>
<ComboBox ItemsSource="{Binding Path=DropDownValues,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=local:MyControl}}"
SelectedItem="{Binding Path=p2, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Height="30"/>
</StackPanel>
</UserControl>
cs:
public partial class MyControl : UserControl
{
private static readonly DependencyProperty DropDownValuesProperty =
DependencyProperty.Register(
"DropDownValues",
typeof(List<String>),
typeof(MyControl),
new FrameworkPropertyMetadata(new List<String>()
));
public List<String> DropDownValues
{
get
{
return (List<String>)GetValue(DropDownValuesProperty);
}
set
{
SetValue(DropDownValuesProperty, value);
}
}
public MyControl()
{
InitializeComponent();
}
}
DataGrid XAML
<DataGrid
AutoGenerateColumns="False"
ItemsSource="{Binding objs, Mode=TwoWay}"
HeadersVisibility="None"
Margin="0,0,0.4,0"
CanUserAddRows="True"
>
<DataGrid.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</DataGrid.ItemsPanel>
<DataGrid.Columns>
<DataGridTemplateColumn Width="300">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="local:Measure">
<local:MyControl
DataContext="{Binding ., Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
DropDownValues=
"{Binding DataContext.list, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"
Width="300"
/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
Can I make this work, and/or is there a better way to do this?
I would like to suggest you a different way of doing that:
set CanUserAddRows=false on your DataGrid and then manually add rows to the ObservableCollection<Something> to which your DataGrid is bound to.
OR
If you are still interested in the approach that you follow:
In your xaml file:
<DataGrid x:Name="myDataGrid" CellEditEnding="DataGrid_CellEditEnding" .....>
<!--Some Code-->
</DataGrid>
Then in the Code-Behind:
private void DataGrid_CellEditEnding(object sender, DataGridCellEditEndingEventArgs e)
{
myDataGrid.CommitEdit();
}
If you don't understand anything then feel free to ask.
Update
If you are following the same approach:
In your DataGrid's Beginning edit event you can try:
private void DataGrid_BeginningEdit(object sender, DataGridBeginningEditEventArgs e)
{
if ((selectedRow as DataGridRow).Item.ToString() != "{NewItemPlaceholder}")
{
//Here you can add the code to add new item. I don't know how but you should figure out a way
}
}
Note: The code mentioned above is not tested.
I would also suggest you :
Not to use DataGrid. Instead use ListBox. Because, you are trying to add some data. At this time you never need sorting, searching and column-reordering fascilities. In such scenario, ListBox is useful as it is light-weight control than datagrid. I have a sample here: https://drive.google.com/open?id=0B5WyqSALui0bTXFGZWxQUWVRdkU
Is the problem that the UI is not being notified of changes to the objs collection? What I would do is try setting up whatever view model that contains objs to make objs an observable collection. I would also ensure that whatever objs is an observable collection of implements INotifyPropertyChanged and that properties p1 and p2 both fire OnPorpertyChanged when they are set.
public ObservableCollection<YourObject> objs
and
public class YourObject : INotifyPropertyChanged
{
protected void OnPropertyChanged(string Name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(Name));
}
}
private string _p1;
public string p1
{
get { return _p1; }
set
{
if (_p1 != value)
{
_p1 = value;
OnPropertyChanged("p1");
}
}
}
private string _p2;
public string p2
{
get { return _p2; }
set
{
if (_p2 != value)
{
_p2 = value;
OnPropertyChanged("p2");
}
}
}
}
I would like to get content from my combobox. I already tried some ways to do that, but It doesn't work correctly.
This is example of my combobox:
<ComboBox x:Name="cmbSomething" Grid.Column="1" Grid.Row="5" HorizontalAlignment="Center" Margin="0 100 0 0" PlaceholderText="NothingToShow">
<ComboBoxItem>First item</ComboBoxItem>
<ComboBoxItem>Second item</ComboBoxItem>
</ComboBox>
After I click the button, I want to display combobox selected item value.
string selectedcmb= cmbSomething.Items[cmbSomething.SelectedIndex].ToString();
await new Windows.UI.Popups.MessageDialog(selectedcmb, "Result").ShowAsync();
Why this code does not work?
My result instead of showing combobox content, it shows this text:
Windows.UI.Xaml.Controls.ComboBoxItem
You need the Content property of ComboBoxItem. So this should be what you want:
var comboBoxItem = cmbSomething.Items[cmbSomething.SelectedIndex] as ComboBoxItem;
if (comboBoxItem != null)
{
string selectedcmb = comboBoxItem.Content.ToString();
}
I have expanded on my suggestion regarding using models instead of direct UI code-behind access. These are the required parts:
BaseViewModel.cs
I use this in a lot of the view models in my work project. You could technically implement it directly in a view model, but I like it being centralized for re-use.
public abstract class BaseViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private Hashtable values = new Hashtable();
protected void SetValue(string name, object value)
{
this.values[name] = value;
OnPropertyChanged(name);
}
protected object GetValue(string name)
{
return this.values[name];
}
protected void OnPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
ComboViewModel.cs
This what you'll bind to make it easy to get values. I called it ComboViewModel because I'm only dealing with your ComboBox. You'll want a much bigger view model with a better name to handle all of your data binding.
public class ComboViewModel : BaseViewModel
{
public ComboViewModel()
{
Index = -1;
Value = string.Empty;
Items = null;
}
public int Index
{
get { return (int)GetValue("Index"); }
set { SetValue("Index", value); }
}
public string Value
{
get { return (string)GetValue("Value"); }
set { SetValue("Value", value); }
}
public List<string> Items
{
get { return (List<string>)GetValue("Items"); }
set { SetValue("Items",value); }
}
}
Window1.xaml
This is just something I made up to demonstrate/test it. Notice the various bindings.
<Window x:Class="SO37147147.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ComboBox x:Name="cmbSomething" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" HorizontalAlignment="Center" MinWidth="80"
ItemsSource="{Binding Path=Items}" SelectedIndex="{Binding Path=Index}" SelectedValue="{Binding Path=Value}"></ComboBox>
<TextBox x:Name="selectedItem" MinWidth="80" Grid.Row="2" Grid.Column="0" Text="{Binding Path=Value}" />
<Button x:Name="displaySelected" MinWidth="40" Grid.Row="2" Grid.Column="1" Content="Display" Click="displaySelected_Click" />
</Grid>
</Window>
Window1.xaml.cs
Here's the code-behind. Not much to it! Everything is accessed through the dataContext instance. There's no need to know control names, etc.
public partial class Window1 : Window
{
ComboViewModel dataContext = new ComboViewModel();
public Window1()
{
InitializeComponent();
dataContext.Items=new List<string>(new string[]{"First Item","Second Item"});
this.DataContext = dataContext;
}
private void displaySelected_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show(String.Format("Selected item:\n\nIndex: {0}\nValue: {1}", dataContext.Index, dataContext.Value));
}
}
You can add business logic for populating models from a database, saving changes to a database, etc. When you alter the properties of the view model, the UI will automatically be updated.
I have a WPF Application and have populated a DataGrid with values from a SQL query. I have added a DataGridCheckBoxColumn and button to the window. When the button is clicked I want to grab the data from the first selected row and insert into a text box or store as a variable. Please explain the answer in a way that someone who is new to c# developing would understand so I can learn rather than copy and paste.
Here is my XAML:
<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="NAME SELECT"
SizeToContent="WidthAndHeight"
>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<DataGrid x:Name="selectDataGrid" HorizontalAlignment="Left" VerticalAlignment="Top" Height="92" Width="288" AutoGenerateColumns="False">
<Style TargetType="{x:Type DataGridRow}" >
</Style>
<DataGrid.Columns>
<DataGridCheckBoxColumn x:Name="dgCheckBox" Header="Select" Width="45" Binding="{Binding IsChecked}"/>
<DataGridTextColumn Header="FIRST NAME" Width="125" Binding="{Binding FNAME}"/>
<DataGridTextColumn Header="LAST NAME" Width="125" Binding="{Binding LNAME}"/>
</DataGrid.Columns>
</DataGrid>
<Button Content="Update Fields" HorizontalAlignment="Left" Margin="193,97,0,0" VerticalAlignment="Top" Width="95" Click="Button_Click"/>
</Grid>
Here is my c# behind:
private void Button_Click(object sender, RoutedEventArgs e)
{
for (int i = 0; i < selectDataGrid.Items.Count -1; i++)
{
DataGridRow cell = GetRow(i);
CheckBox tb = cell.value as CheckBox;
System.Windows.MessageBox.Show(tb.IsChecked.ToString());
}
}
public DataGridRow GetRow(int index)
{
DataGridRow row = (DataGridRow)selectDataGrid.ItemContainerGenerator.ContainerFromIndex(index);
if (row == null)
{
selectDataGrid.UpdateLayout();
selectDataGrid.ScrollIntoView(selectDataGrid.Items[index]);
row = (DataGridRow)selectDataGrid.ItemContainerGenerator.ContainerFromIndex(index);
}
return row;
}
If I could get help to the point of displaying the selected result to a message box I could go from there. I'm only interested in the FIRST instance of a selected row. So if multiple rows are selected I'm only interested in the first row selected.
I have read all the solutions to anything that had my keywords and I cannot find anything that fits my specific need of only wanting the first row. I'm not experienced enough to be able to make leaps and jumps or to alter code for something else to work for me. If you are going to link me to another solution please explain what I would need to change on my code, or what parts I would need from the solution. Ideally working code in a solution is what would be best.
I can suggest you the next solution; data grid has readonly dependency property (link to dependency property: msdn explanation and WPF Dependency Property, CodeProject explanation) which cannot be accessed from XAML but you can access this in code behind or behavior code (link to behavior: good behavior explanation and anothere one good explanation). If you access this property and get the first member in that collection you will have the first selected item in your hands. But I frankly advice you to learn the MVVM (link to MVVM: CodeProject explanation and more) pattern. The MVVM pattern is the a correct way to work with the WPF. Solution:
1. XAML code:
<Window x:Class="SimpleDataGrid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:simpleDataGrid="clr-namespace:SimpleDataGrid"
Title="MainWindow" Height="350" Width="525">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.DataContext>
<simpleDataGrid:GridViewModel/>
</Grid.DataContext>
<DataGrid x:Name="SelectDataGrid" ItemsSource="{Binding Persons}" HorizontalAlignment="Left" VerticalAlignment="Top" AutoGenerateColumns="False">
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridRow}" >
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridCheckBoxColumn x:Name="dgCheckBox" Header="Select" Width="45" Binding="{Binding IsChecked}"/>
<DataGridTextColumn Header="FIRST NAME" Width="125" Binding="{Binding FNAME}"/>
<DataGridTextColumn Header="LAST NAME" Width="125" Binding="{Binding LNAME}"/>
</DataGrid.Columns>
</DataGrid>
<Button Grid.Row="1" Content="Update Fields" HorizontalAlignment="Left" Margin="5" VerticalAlignment="Top" Width="95" Click="Button_Click"/>
</Grid></Window>
2. View Model code:
public class GridViewModel:BaseObservableObject
{
public GridViewModel()
{
var l = new List<Person>
{
new Person {FNAME = "John", LNAME = "W"},
new Person {FNAME = "George", LNAME = "R"},
new Person {FNAME = "Jimmy", LNAME = "B"},
new Person {FNAME = "Marry", LNAME = "B"},
new Person {FNAME = "Ayalot", LNAME = "A"},
};
Persons = new ObservableCollection<Person>(l);
}
public ObservableCollection<Person> Persons { get; set; }
}
3. Code behind and Person model:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
var dataGrid = SelectDataGrid;
var selected = dataGrid.SelectedItems.Cast<Person>().ToList();
var mostFirst = selected.FirstOrDefault();
}
}
public class Person : BaseObservableObject
{
private string _lName;
private string _fName;
private bool _checked;
public bool IsChecked
{
get { return _checked; }
set
{
_checked = value;
OnPropertyChanged();
}
}
public string LNAME
{
get { return _lName; }
set
{
_lName = value;
OnPropertyChanged();
}
}
public string FNAME
{
get { return _fName; }
set
{
_fName = value;
OnPropertyChanged();
}
}
}
4. BaseObservableObject code (simple implementation of INotifyPropertyChanged):
public class BaseObservableObject : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
protected virtual void OnPropertyChanged<T>(Expression<Func<T>> raiser)
{
var propName = ((MemberExpression)raiser.Body).Member.Name;
OnPropertyChanged(propName);
}
protected bool Set<T>(ref T field, T value, [CallerMemberName] string name = null)
{
if (!EqualityComparer<T>.Default.Equals(field, value))
{
field = value;
OnPropertyChanged(name);
return true;
}
return false;
}
}
I hope it will help you.
Regards.
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.