wpf Contentcontrol validation - wpf

how to make Validation work on ContentControl ?
There is a class that is responsible for storing a value with units of measure, it is displayed in the content control through a dataset, I would like to check for correctness when displaying and editing it, for example, units cannot have a value of 2, or the value should be less than 10,000. solve this with multibinding, the validation rule is not satisfied when editing values.
Xaml file:
<Window x:Class="DELETE1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DELETE1"
xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"
mc:Ignorable="d"
x:Name="m_win"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<DataTemplate DataType="{x:Type local:ValWithUnits}">
<Border>
<DockPanel>
<ComboBox DockPanel.Dock="Right" Width="60" IsEnabled="True" SelectedIndex="{Binding Unit}" ItemsSource="{Binding Src, ElementName=m_win}" />
<TextBox Text="{Binding Val, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsEnabled="True"/>
</DockPanel>
</Border>
</DataTemplate>
<local:MultiBindingConverter x:Key="MultiBindingConverter" />
</Window.Resources>
<Grid>
<ContentControl x:Name="m_contentControl">
<ContentControl.Content>
<MultiBinding Mode="TwoWay" NotifyOnValidationError="True"
UpdateSourceTrigger="PropertyChanged"
diag:PresentationTraceSources.TraceLevel="High"
Converter="{StaticResource MultiBindingConverter}" >
<Binding Path="Val" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged" diag:PresentationTraceSources.TraceLevel="High"></Binding>
<Binding Path="Unit" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged" diag:PresentationTraceSources.TraceLevel="High"></Binding>
<MultiBinding.ValidationRules>
<local:ContentControlValidationRule ValidatesOnTargetUpdated="True" x:Name="MValidationRule"/>
</MultiBinding.ValidationRules>
</MultiBinding>
</ContentControl.Content>
</ContentControl>
</Grid>
</Window>
And code file:
public class ValWithUnits:INotifyPropertyChanged
{
private double m_val;
private int m_unit;
public double Val
{
get => m_val;
set
{
m_val = value;
OnPropertyChanged(nameof(Val));
}
}
public int Unit
{
get => m_unit;
set
{
m_unit = value;
OnPropertyChanged(nameof(Unit));
}
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public ValWithUnits MyValueWithUnits { get; set; } = new ValWithUnits();
public MainWindow()
{
InitializeComponent();
var a = new Binding("MyValueWithUnits");
a.Source = this;
a.ValidatesOnDataErrors = true;
a.ValidatesOnExceptions = true;
a.NotifyOnValidationError = true;
m_contentControl.SetBinding(ContentControl.ContentProperty, a);
}
public IEnumerable<int> Src => new int[] { 1,2,3};
}
public class ContentControlValidationRule : ValidationRule
{
public override ValidationResult Validate(object value, CultureInfo cultureInfo)
{
//Debug.Fail("validate");
return ValidationResult.ValidResult;
}
private static ValidationResult BadValidation(string msg) =>
new ValidationResult(false, msg);
}
public class MultiBindingConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
return string.Format("{0}-{1}", values[0], values[1]);
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
return new object[] { 1, 1 };
}
}
Validation 'ContentControlValidationRule' which I install through multi-binding does not work.

Related

MultivalueConverter not called after DragDrop

I have a IMultivalueConverter which updates the background color of a StackPanel when PropertyA or PropertyB is changed. These Controls are created dynamically.
Problem:
I have added two StackPanels and changed the PropertyA in the code when a button is clicked. This leads to a property changed event.
private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
For the first stackpanel the background color is not updated, but for the second stackpanel this.PropertyChanged inturn calls my MultiValueConverter and background color is updated.
I am not able to understand why only one control is getting updated when both belong to same type and eventhandler is not null.
EDIT:
If I drag and drop a cell value from other control (DevExpress DataGrid) into the first stackpanel and then change the property, the background is not getting updated. It works fine until I drag and drop.
Update:
<StackPanel.Background>
<MultiBinding Converter="{StaticResource ResourceKey=BackgroundColorConverter}">
<Binding Path="PropertyA" UpdateSourceTrigger="PropertyChanged" />
<Binding Path="PropertyB" UpdateSourceTrigger="PropertyChanged" />
</MultiBinding>
</StackPanel.Background>
Update 2:
I have also tried using MultiDataTrigger instead of Converter, but couldn't solve the problem.
Unless i miss understood you, i don't see any complication in doing that,
<Window.Resources>
<app:BackgroundColorConverter x:Key="BackgroundColorConverter"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" >
<TextBox Text="{Binding PropertyA}" Width="200"/>
<TextBox Text="{Binding PropertyB}" Width="200"/>
</StackPanel>
<StackPanel Grid.Row="1" Margin="5">
<StackPanel.Background>
<MultiBinding Converter="{StaticResource ResourceKey=BackgroundColorConverter}">
<Binding Path="PropertyA" UpdateSourceTrigger="PropertyChanged" />
<Binding Path="PropertyB" UpdateSourceTrigger="PropertyChanged" />
</MultiBinding>
</StackPanel.Background>
</StackPanel>
<StackPanel Grid.Row="2" Margin="5">
<StackPanel.Background>
<MultiBinding Converter="{StaticResource ResourceKey=BackgroundColorConverter}">
<Binding Path="PropertyA" UpdateSourceTrigger="PropertyChanged" />
<Binding Path="PropertyB" UpdateSourceTrigger="PropertyChanged" />
</MultiBinding>
</StackPanel.Background>
</StackPanel>
</Grid>
the Converter :
public class BackgroundColorConverter:IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
if (values==null)
{
return null;
}
return
new SolidColorBrush(Color.FromRgb(byte.Parse(values[0].ToString()), byte.Parse(values[1].ToString()),
50));
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
..And the Code behind
public partial class MainWindow : Window,INotifyPropertyChanged
{
private byte _propertyA ;
private byte _propertyB;
public byte PropertyA
{
get
{
return _propertyA;
}
set
{
if (_propertyA == value)
{
return;
}
_propertyA = value;
OnPropertyChanged();
}
}
public byte PropertyB
{
get
{
return _propertyB;
}
set
{
if (_propertyB == value)
{
return;
}
_propertyB = value;
OnPropertyChanged();
}
}
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
let me know if i did miss something
Reason:
When a value is dragged over the StackPanel, I am setting the BackgroundColor manually.
stackpanel.BackGround = new SolidColorBrush(Color.FromArgb(255,255,255,141));
Solution:
When I commented this line, the MultiValue converter is called and BackGround color is updated properly.
I created a property which changes according to DragEnter, DragOver and DragLeave events and then converter is called, I evaluate this value and set the Background color in the converter.

How to bind visibiility and content of label based on validation done on the text entered by user in textbox?

I am writing simple application. The UI has two textboxes, for Username and Password, and button to submit the information. I wanted to use routed commands instead of buttonclick event.
Username should contain alphanumeric characters only, if user enter any other special characters, it should display a label saying invalid characters entered. So I wanted to bind the visibility and content of that label based on the validation done on Username textbox field.
Below is code I have made but it is not working as expected. Can any one help me where I am doing wrong?
Below my main Window
using System.Windows;
using System.Windows.Input;
using System.ComponentModel;
namespace ExcelUtility
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
ViewModel viewModelObj = new ViewModel();
public MainWindow()
{
InitializeComponent();
}
void navigatePageExecuted(object target, ExecutedRoutedEventArgs e)
{
SubmitUserDetails(txtUserName.Text + ";" + txtPassword);
}
void navigatePageCanExecute(object sender, CanExecuteRoutedEventArgs e)
{
if (!string.IsNullOrWhiteSpace(txtUserName.Text))
{
viewModelObj.Username = txtUserName.Text;
}
e.CanExecute = viewModelObj.VaidUserName; }
private void SubmitUserDetails(string credentials)
{
this.Cursor = Cursors.Wait;
prgValidate.Visibility = Visibility.Visible;
MainGrid.IsEnabled = false;
BackgroundWorker worker = new BackgroundWorker();
worker.DoWork += worker_DoWork;
worker.RunWorkerCompleted += worker_RunWorkerCompleted;
worker.RunWorkerAsync(credentials);
}
void worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{
prgValidate.Visibility = Visibility.Collapsed;
string Result = (string)e.Result;
MessageBox.Show(Result); //Here I need to call some other functions based on return value for simplicity i have changed
}
void worker_DoWork(object sender, DoWorkEventArgs e)
{
string[] credentials = e.Argument.ToString().Split(';');
e.Result = viewModelObj.validateCredentials(credentials[0], credentials[1]);
}
}
}
This is my xaml
<Window x:Class="ExcelUtility.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ExcelUtility"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:BoolToVisibleOrHidden x:Key="BoolToVisibilityConverter"/>
</Window.Resources>
<Window.CommandBindings>
<CommandBinding Command="{x:Static local:CommandsLibrary.navigatePageCommand}" Executed="navigatePageExecuted" CanExecute="navigatePageCanExecute"/>
</Window.CommandBindings>
<Grid Name="MainGrid">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="40,44,0,0" Name="tbUserName" Text="Username" VerticalAlignment="Top" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="136,42,0,0" Name="txtUserName" VerticalAlignment="Top" Width="163" Text="{Binding Username, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="138,19,0,0" Name="tbNotify" Text="{Binding Notification, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="161" Visibility="{Binding NotVaidUserName,Converter={StaticResource BoolToVisibilityConverter}}" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="138,98,0,0" Name="txtPassword" VerticalAlignment="Top" Width="161" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="44,107,0,0" Name="tbPassword" Text="Password" VerticalAlignment="Top" Width="65" />
<Button Command="{x:Static local:CommandsLibrary.navigatePageCommand}" Content="Submit" Height="23" HorizontalAlignment="Left" Margin="172,167,0,0" Name="btnSubmit" VerticalAlignment="Top" Width="109" />
<ProgressBar Height="24" IsIndeterminate="True" Visibility="Collapsed" HorizontalAlignment="Left" Margin="52,232,0,0" Name="prgValidate" VerticalAlignment="Top" Width="257" />
</Grid>
</Window>
This is my viewModel
using System;
using System.Text.RegularExpressions;
using System.ComponentModel;
using System.Windows.Data;
using System.Windows;
namespace ExcelUtility
{
public class ViewModel
{
public event PropertyChangedEventHandler PropertyChanged;
private bool _notVaidUserName;
public bool NotVaidUserName
{
get { return _notVaidUserName; }
set
{
_notVaidUserName = value;
RaisePropertyChanged("NotVaidUserName");
}
}
private string notification;
public string Notification
{
get
{
return notification;
}
set
{
if (notification != value)
{
notification = value;
RaisePropertyChanged("Notification");
}
}
}
private string username;
public string Username
{
get
{
return username;
}
set
{
if (username != value)
{
username = value;
NotVaidUserName = VaidateUserName(username);
RaisePropertyChanged("Username");
}
}
}
public bool VaidateUserName(string strUsername)
{
bool bValidUserName = false;
if (!string.IsNullOrWhiteSpace(strUsername))
{
if (new Regex(#"^[a-zA-Z0-9]*$").IsMatch(strUsername))
{
bValidUserName = true;
if (strUsername.Length > 7)
{
Notification = "Max allowed key length is 6";
bValidUserName = false;
}
}
else
{
Notification = "No special characters allowed";
}
}
return bValidUserName;
}
public string validateCredentials(string Username, string Password)
{
return "Valid Credentials";
}
private void RaisePropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
class BoolToVisibleOrHidden : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
object returnvalue = new object();
returnvalue = (bool)value ? Visibility.Visible : parameter != null ? Visibility.Collapsed : Visibility.Hidden;
return returnvalue;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return (Visibility)value == Visibility.Visible;
}
}
}
First define two properties like below:
private bool isValid = true;
public bool IsValid
{
get
{
return isValid;
}
set
{
if (isValid != value)
{
isValid = value;
OnPropertyChanged("IsValid");
}
}
}
private string username;
public string Username
{
get
{
return username;
}
set
{
if(username != value)
{
username = value;
IsValid = ValidateForSpecialCharacters(username);
OnPropertyChanged("Username");
}
}
}
Then bind them to your xaml like this:
<TextBlock Text="Username contains special characters."
Visibility="{Binding IsValid,Converter={StaticResource BoolToVisibilityConverter}}" />
<TextBox Text="{Binding Username, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" />
PS: Don't forget to implement BoolToVisibility converter class and ValidateForSpecialCharacter method. I think you can handle it on your own. By the way, if I were you, I would use ValidationRule instead of this way.
Hope this help.
You must create a boolToVis converter, which convert False to collapsed and True to visible.
After this, you can bind the bool value to the visibility property of your item.
This is the converter (you can put this in a single file and call it from xaml):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;
namespace yourNamespace.ViewModel
{
[ValueConversion(typeof(bool), typeof(bool))]
public class InverseBooleanConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
if (value is bool)
{
return !(bool)value;
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
if (value is bool)
{
return !(bool)value;
}
return value;
}
}
}
then, from your xaml, at the the beginning of the file:
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVis"/>
</UserControl.Resources>
or if you use a window:
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVis"/>
</Window.Resources>
then, finally, in your textBox:
<dxe:TextEdit Visibility="{Binding YOURBOOLFLAG, Converter={StaticResource BoolToVis}}" EditValue="TextHere"/>
(TextEdit is a devexpress element; you can also use the classic textBox in the same way)
in this way, when you see that the text is not correct for you, you can set the bool flag to false and hide the element.
You could simply implement a converter that check the username character like so:
class VisibilityConverter:IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var rgx = new Regex(#"^[a-zA-Z0-9]*$");
if (value == null) return Visibility.Hidden;
return (rgx.IsMatch(value.ToString()))?Visibility.Hidden:Visibility.Visible;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
don't forget to add the converter to the window resources
<Window.Resources>
<conv:VisibilityConverter x:Key="VisibilityConverter"/>
</Window.Resources>
and finally use that converter in your UI to check the string entered in the textBox
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Username" Grid.Column="0" Grid.Row="0"/>
<TextBlock Text="Password" Grid.Column="0" Grid.Row="1"/>
<TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Username,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Password,Mode=TwoWay}"/>
<Button Content="login" IsEnabled="{Binding Username,Converter={StaticResource VisibilityConverter},Mode=TwoWay}" Grid.Column="1" Grid.Row="2"/>
<TextBlock Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Text="invalid characters entered" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="{Binding Username,Converter={StaticResource VisibilityConverter}}"></TextBlock>
</Grid>

WPF use same datatemplate with different binding

I have the following datagrid
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="VenusProductInfoQueryWPF.MainWindow"
Height="350" Width="646" WindowStyle="None" ResizeMode="NoResize" Topmost="False" MouseLeftButtonDown="Window_MouseLeftButtonDown" AllowsTransparency="True" WindowStartupLocation="CenterScreen" ShowInTaskbar="True">
<Window.Resources>
<DataTemplate x:Key="DataTemplate1">
<Button Tag="{Binding Name}" Content="Show" Click="LinkButton_Click"></Button>
</DataTemplate>
<DataTemplate x:Key="DataTemplate2">
<Button Tag="{Binding Sex}" Content="Show" Click="LinkButton_Click"></Button>
</DataTemplate>
</Window.Resources>`
<Grid>
<DataGrid x:Name="MyDataGrid" HorizontalAlignment="Left" Margin="60,44,0,0"
VerticalAlignment="Top" Height="223" Width="402" AutoGenerateColumns="False"
AutoGeneratedColumns="MyDataGrid_AutoGeneratedColumns">
<DataGrid.Columns>
<DataGridTextColumn Header="Age" Binding="{Binding Path=Age}"></DataGridTextColumn>
<DataGridTemplateColumn Header="Sex" CellTemplate="{StaticResource DataTemplate2}"/>
<DataGridTemplateColumn Header="Name" CellTemplate="{StaticResource DataTemplate1}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
and in the codebehind I have:
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Media;
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
dataSource = new DataTable();
dataSource.Columns.Add("Age");
dataSource.Columns.Add("Name");
dataSource.Columns.Add("Sex");
AddNewRow(new object[] { 10, "wang", "Male" });
AddNewRow(new object[] { 15, "huang", "Male" });
AddNewRow(new object[] { 20, "gao", "Female" });
dataGrid1.ItemsSource = dataSource.AsDataView();
}
}
}
The datatable has more than 30 columns (I only wrote 2 in here to make it easier to follow).. the question is: If I want to show the same template style with different binging source in every column, do I really have to define many different datatemplates (like DataTemplate1, DataTemplate2, ... see above) to bind the CellTemplate of each DataGridTemplateColumn to it ? Can I define one datatemplate and in the code or through other way to dynamic set the binding? Thank you for your answer!
There is a way but it is not pretty,
For brevity I am using the code behind as the view model and I have removed exception handling and unnecessary lines.
I have convert your object array into a Person object (for reasons that should become evident later in the solution)
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public string Sex { get; set; }
}
I have converted your DataSource into an ObservableCollection So the code behind is now
public partial class MainWindow : Window
{
public MainWindow()
{
Items = new ObservableCollection<Person>()
{
new Person {Age = 10, Name = "wang", Sex="Male"},
new Person {Age = 15, Name = "huang", Sex="Male"},
new Person {Age = 20, Name = "gao", Sex="Female"}
};
ShowCommand = new DelegateCommand(ExecuteShowCommand, CanExecuteShowCommand);
InitializeComponent();
}
private bool CanExecuteShowCommand(object arg) { return true; }
private void ExecuteShowCommand(object obj) { MessageBox.Show(obj != null ? obj.ToString() : "No Parameter received"); }
public DelegateCommand ShowCommand { get; set; }
public ObservableCollection<Person> Items { get; set; }
}
The DelegateCommand is defined as
public class DelegateCommand : ICommand
{
private Func<object, bool> _canExecute;
private Action<object> _execute;
public DelegateCommand(Action<object> execute, Func<object, bool> canExecute)
{
_canExecute = canExecute;
_execute = execute;
}
public bool CanExecute(object parameter) { return _canExecute.Invoke(parameter); }
void ICommand.Execute(object parameter) { _execute.Invoke(parameter); }
public event EventHandler CanExecuteChanged;
}
This allows the use of Commands and CommandParameters in the single template.
We then use a MultiValueConverter to get the data for each button. It uses the header of the column to interrogate, using reflection, the Person object for the required value and then pass it back as the parameter of the command.
public class GridCellToValueConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
object returnValue = null;
var person = values.First() as Person;
var propertyName = values[1] == DependencyProperty.UnsetValue ? string.Empty : (string)values[1];
if ((person != null) && (!string.IsNullOrWhiteSpace(propertyName))) { returnValue = person.GetType().GetProperty(propertyName).GetValue(person); }
return returnValue;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); }
}
The final piece of the puzzle is the xaml
<Window x:Class="StackOverflow.Q26731995.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:q26731995="clr-namespace:StackOverflow.Q26731995" Title="MainWindow" Height="350" Width="525"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
<q26731995:GridCellToValueConverter x:Key="GridCell2Value" />
<DataTemplate x:Key="ButtonColumnDataTemplate">
<Button Content="Show" Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=ShowCommand}">
<Button.CommandParameter>
<MultiBinding Converter="{StaticResource GridCell2Value}">
<Binding /> <!-- The person object -->
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridCell}}" Path="Column.Header" /> <!-- The name of the field -->
</MultiBinding>
</Button.CommandParameter>
</Button>
</DataTemplate>
</Window.Resources>
<Grid>
<DataGrid x:Name="MyDataGrid" HorizontalAlignment="Left" Margin="60,44,0,0" ItemsSource="{Binding Path=Items}" VerticalAlignment="Top" Height="223" Width="402" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Age" Binding="{Binding Path=Age}"></DataGridTextColumn>
<DataGridTemplateColumn Header="Sex" CellTemplate="{StaticResource ButtonColumnDataTemplate}"/>
<DataGridTemplateColumn Header="Name" CellTemplate="{StaticResource ButtonColumnDataTemplate}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
You should be able to cut and past this code into a new wpf app and see it work. Not I have not take care of the AddNewItem row the grid adds (because we have not turned it off).
This can be done with a collection of object array rather than a collection of Person. To do so, you would need to pass the DataGridCellsPanel into the converter and use it with the header to calculate the index of the required value. The convert would look like
<MultiBinding Converter="{StaticResource GridCell2Value}">
<Binding /> <!-- The data -->
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridCell}}" Path="Column.Header}" /> <!-- The name of the field -->
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridCellsPanel}}" /> <!-- The panel that contains the row -->
</MultiBinding>
The converter code would be along the lines
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
object returnValue = null;
var data = values.First() as object[];
var property = values[1] == DependencyProperty.UnsetValue ? string.Empty : (string)values[1];
var panel = values[2] as DataGridCellsPanel;
var column = panel.Children.OfType<DataGridCell>().FirstOrDefault(c => c.Column.Header.Equals(property));
if (column != null)
{
returnValue = data[panel.Children.IndexOf(column)];
}
return returnValue;
}
I hope this helps.

WPF UserControl with many Controls - how to create Dependency Property that maps to many controls?

I have successfully created a UserControl with a Depedency property allowing me to bind to a single TextBox within my UserControl. However Im unsure how to go about doing this when I have many Controls within my UserControl and only want to bind to single Property (built from the values in the many controls)?
The UserControl has 3 textboxes for year, month and date I want to bind this to a single Date Property, so far I have got this:
<UserControl x:Class="MyApp.DateControl"...>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox Name="textbox_year" />
<TextBox Name="textbox_month" />
<TextBox Name="textbox_day" />
</StackPanel>
</StackPanel>
</UserControl>
What do I need to add to the code behind to make the Date Property got from the three textboxes so in another container using my control can just bind to Date. I realise since my UserControl is the target I have to make a Dependency Property but it seems so complicated..
public partial class DateControl : UserControl
{
public DateControl()
{
InitializeComponent();
}
public DateTime Date
{
get
{
DateTime dt;
if (DateTime.TryParseExact(String.Format("{0}-{1}-{2}", this.textbox_year.Text, this.textbox_month.Text, this.textbox_day.Text), "yyyy-MM-dd", null, System.Globalization.DateTimeStyles.None, out dt))
return dt;
else
return DateTime.MinValue;
}
}
I suggest using a converter to achieve what you want.
Your user control's XAML will look like this:
<UserControl x:Class="MyDateControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:MyDateControl"
x:Name="root">
<UserControl.Resources>
<my:DatePartConverter x:Key="DatePartConverter"
Date="{Binding ElementName=root, Path=Date}"/>
</UserControl.Resources>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox Name="textbox_year" Text="{Binding ElementName=root, Path=Date, Converter={StaticResource DatePartConverter}, ConverterParameter=year, Mode=TwoWay}"/>
<TextBox Name="textbox_month" Text="{Binding ElementName=root, Path=Date, Converter={StaticResource DatePartConverter}, ConverterParameter=month, Mode=TwoWay}" />
<TextBox Name="textbox_day" Text="{Binding ElementName=root, Path=Date, Converter={StaticResource DatePartConverter}, ConverterParameter=day, Mode=TwoWay}" />
</StackPanel>
</StackPanel>
</UserControl>
In code-behind you will have only you dependency property:
public DateTime Date {
get { return (DateTime)GetValue(DateProperty); }
set { SetValue(DateProperty, value); }
}
public static readonly DependencyProperty DateProperty =
DependencyProperty.Register("Date", typeof(DateTime), typeof(MyDateControl),
new FrameworkPropertyMetadata(DateTime.Now, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
And the converter will look something like this:
public class DatePartConverter : Freezable, IValueConverter
{
public DateTime Date {
get { return (DateTime)GetValue(DateProperty); }
set { SetValue(DateProperty, value); }
}
public static readonly DependencyProperty DateProperty =
DependencyProperty.Register("Date", typeof(DateTime), typeof(DatePartConverter), new UIPropertyMetadata(DateTime.Now));
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
DateTime date = (DateTime)value;
string datePartType = (string)parameter;
string result;
switch (datePartType) {
case "year":
result = date.Year.ToString().PadLeft(4, '0');
break;
case "month":
result = date.Month.ToString().PadLeft(2, '0');
break;
case "day":
result = date.Day.ToString().PadLeft(2, '0');
break;
default:
throw new InvalidOperationException("Unknown date part type (ConverterParameter)");
}
return result;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
string datePartValue = (string)value;
string datePartType = (string)parameter;
DateTime result;
switch (datePartType) {
case "year":
result = new DateTime(int.Parse(datePartValue), Date.Month, Date.Day);
break;
case "month":
result = new DateTime(Date.Year, int.Parse(datePartValue), Date.Day);
break;
case "day":
result = new DateTime(Date.Year, Date.Month, int.Parse(datePartValue));
break;
default:
throw new InvalidOperationException("Unknown date part type (ConverterParameter)");
}
return result;
}
protected override Freezable CreateInstanceCore() {
return new DatePartConverter();
}
}
This is how I personally would approach something like this. Normally, I would move the members out into a separate logic class and include some other validation in the setters.
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
public DateTime Date
{
get
{
DateTime dt;
if (DateTime.TryParseExact(String.Format("{0}-{1}-{2}", DateYear, DateMonth, DateDay), "yyyy-MM-dd", null, System.Globalization.DateTimeStyles.None, out dt))
return dt;
return DateTime.MinValue;
}
}
private string year = "2011";
public String DateYear
{
get { return year; }
set { if (year == value) return; year = value; NotifyPropertyChanged("DateYear"); NotifyPropertyChanged("Date"); }
}
private string month = "11";
public String DateMonth
{
get { return month; }
set { if (month == value) return; month = value; NotifyPropertyChanged("DateMonth"); NotifyPropertyChanged("Date"); }
}
private string day = "11";
public String DateDay
{
get { return day; }
set { if (day == value) return; day = value; NotifyPropertyChanged("DateDay"); NotifyPropertyChanged("Date"); }
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string info)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
#endregion
}
And the xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label>Date:</Label>
<Label Grid.Column="1" Content="{Binding Path=Date}" />
<Label Grid.Row="1">Year</Label>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=DateYear}" />
<Label Grid.Row="2">Month</Label>
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Path=DateMonth}" />
<Label Grid.Row="3">Day</Label>
<TextBox Grid.Row="3" Grid.Column="1" Text="{Binding Path=DateDay}" />
</Grid>
</Window>
If the case you mentioned is for DateTime, then you can go for Masked TextBox.
WPF Masked Textbox with a value that does not contain mask
You can use the TextChanged events on the TextBoxes to set the date:
public partial class DateControl : UserControl
{
public DateControl()
{
InitializeComponent();
textbox_year.TextChanged += RecalculateDate;
textbox_month.TextChanged += RecalculateDate;
textbox_day.TextChanged += RecalculateDate;
}
private void RecalculateDate( object sender, TextChangedEventArgs e )
{
DateTime dt;
if ( DateTime.TryParseExact( String.Format( "{0}-{1}-{2}", textbox_year.Text, textbox_month.Text, textbox_day.Text ), "yyyy-MM-dd", null, DateTimeStyles.None, out dt ) )
SetValue( DateProperty, dt );
}
public static readonly DependencyProperty DateProperty =
DependencyProperty.Register( "Date", typeof( DateTime ), typeof( DateControl ), new PropertyMetadata( DateTime.MinValue ) );
public DateTime Date
{
get { return (DateTime)GetValue( DateProperty ); }
}
}
XAML:
<UserControl x:Class="DateControlApp.DateControl"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBox Name="textbox_year" />
<TextBox Name="textbox_month" />
<TextBox Name="textbox_day" />
</StackPanel>
</StackPanel>
</UserControl>
And the container:
<StackPanel>
<DateControlApp:DateControl x:Name="dateControl" />
<TextBlock Text="{Binding ElementName=dateControl, Path=Date}" />
</StackPanel>
It's very simplistic of course. The rest is left as an exercise for the reader :)

Bind ItemsControl with ItemsSource to the array index

I want to bind an ItemsControl to an array of object, using ItemsSource and DataTemplate.
And I want to show the index of each item.
Like
Customer 1:
Name: xxxx
Age:888
Customer 2:
Name: yyy
Age: 7777
The simplest way to do this is to add an Index property to you class ;-) Otherwise it can be done using a MultiValueConverter:
<Window x:Class="IndexSpike.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"
xmlns:Converters="clr-namespace:IndexSpike"
xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"
Name="Root"
>
<Window.Resources>
<Converters:GetIndex x:Key="GetIndexConverter"/>
</Window.Resources>
<StackPanel>
<ItemsControl ItemsSource="{Binding Persons}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Margin="0,5,0,0">
<TextBlock.Text>
<MultiBinding Converter="{StaticResource
GetIndexConverter}"
StringFormat="Index: {0}">
<Binding Path="."/>
<Binding ElementName="Root" Path="Persons"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Text="{Binding Name, StringFormat='Name: {0}'}"/>
<TextBlock Text="{Binding Age, StringFormat='Age {0}'}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Window>
using System;
using System.Collections.ObjectModel;
using System.Globalization;
using System.Windows;
using System.Windows.Data;
namespace IndexSpike
{
public partial class Window1 : Window
{
public ObservableCollection<Person> Persons { get; set; }
public Window1()
{
Persons=new ObservableCollection<Person>
{
new Person("Me",20),
new Person("You",30)
};
InitializeComponent();
DataContext = this;
}
}
public class Person
{
public Person(string name,int age)
{
Name = name;
Age=age;
}
public string Name { get; set; }
public int Age { get; set; }
}
public class GetIndex:IMultiValueConverter
{
#region Implementation of IMultiValueConverter
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
var persons = (ObservableCollection<Person>) values[1];
var person = (Person) values[0];
return persons.IndexOf(person);
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
#endregion
}
}
Thanks to this question I found an other way to declare the MultiBinding:
<MultiBinding Converter="{StaticResource GetIndexConverter}"
StringFormat="Index: {0}">
<Binding Path="."/>
<Binding RelativeSource="{RelativeSource FindAncestor,
AncestorType={x:Type ItemsControl}}"
Path="DataContext.Persons"/>
</MultiBinding>

Resources