We Keep Coding

CheckBox's in DataTemplate ListBox Binding and Triggers using MVVM

I'm learning how to use MVVM and how bind data inside a WPF App. I've created a custom CheckedListBox in XAML file this way:
<ListBox x:Name="materialsListBox" ItemsSource="{Binding CustomCheckBox}">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Path=IsChecked, UpdateSourceTrigger=PropertyChanged, Mode=OneWayToSource}" Content="{Binding Item}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and also I want a single Image to dynamically show up for each CheckBox I check. I understand that I need to use Binding and UpdateSourceTrigger Property but I'm not sure how to realize this.
What should I add here so that my app does what I want?
<Image HorizontalAlignment="Left" Height="100" Margin="432,146,0,0" VerticalAlignment="Top" Width="100"/>
Here's a part of my C# code for the ViewModel:
public class MainViewModel : ViewModelBase
{
private ObservableCollection<CheckedListItem<string>> _customCheckBox;
public ObservableCollection<CheckedListItem<string>> CustomCheckBox
{
set
{
_customCheckBox = value;
OnPropertyChanged();
}
get { return _customCheckBox; }
}
public class CheckedListItem<T> : ViewModelBase
{
private bool _isChecked;
private T _item;
public CheckedListItem()
{
}
public CheckedListItem(T item, bool isChecked = false)
{
item = _item;
isChecked = _isChecked;
}
public T Item
{
set
{
_item = value;
OnPropertyChanged();
}
get { return _item; }
}
public bool IsChecked
{
set
{
_isChecked = value;
OnPropertyChanged();
}
get { return _isChecked; }
}
}
...
Thank you for any recommendation.

One eazy way to do ProperyChanged events is to use the base set for ViewModelBase this.Set because it will raise the changed event for you.
to do this I split up the view model and view in to 2, one for the main view and one for a view combining the check box and image. You can do it with one like you have but it was just easier for me.
View Model for the CheckBox and image
public class CheckBoxViewModel : ViewModelBase
{
private bool isChecked;
private string imageSource;
private string imageName;
public CheckBoxViewModel(string imageSource, string imageName)
{
this.ImageSource = imageSource;
this.ImageName = imageName;
}
public ICommand Checked => new RelayCommand<string>(this.OnChecked);
private void OnChecked(object imageName)
{
}
public string ImageSource
{
get { return this.imageSource; }
set { this.Set(() => this.ImageSource, ref this.imageSource, value); }
}
public string ImageName
{
get { return this.imageName; }
set { this.Set(() => this.ImageName, ref this.imageName, value); }
}
public bool IsChecked
{
get { return this.isChecked; }
set { this.Set(() => this.IsChecked, ref this.isChecked, value); }
}
}
Main Window View Model
public class MainViewModel : ViewModelBase
{
private ObservableCollection<CheckBoxViewModel> items = new ObservableCollection<CheckBoxViewModel>();
public ObservableCollection<CheckBoxViewModel> Items => this.items;
public MainViewModel()
{
var view = new CheckBoxViewModel("Image.Jpg", "Image 1");
this.Items.Add(view);
var view2 = new CheckBoxViewModel("Image2.Jpg", "Image 2");
this.Items.Add(view2);
}
}
Checkbox and image view
<UserControl.Resources>
<local:MainViewModel x:Key="MainViewModel" />
<local:MainViewModel x:Key="ViewModel" />
<local:BoolToVisibility x:Key="BoolToVisibility" />
</UserControl.Resources>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="201*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<CheckBox Command="{Binding Checked}" HorizontalAlignment="Center" VerticalAlignment="Center" IsChecked="{Binding Path=IsChecked, UpdateSourceTrigger=PropertyChanged, Mode=OneWayToSource}" Content="{Binding ImageName}" />
<Image Grid.Column="1" Source="{Binding ImageSource}" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding IsChecked, Converter={StaticResource BoolToVisibility}}" />
</Grid>
Main View
<Window.Resources>
<local:MainViewModel x:Key="MainViewModel" />
<DataTemplate DataType="{x:Type local:CheckBoxViewModel}">
<local:view/>
</DataTemplate>
</Window.Resources>
<Grid>
<ListView DataContext="{StaticResource MainViewModel}" ItemsSource="{Binding Items}"/>
</Grid>
This way the main view model adds CheckBoxViewModels to its items and then the main view automatically adds the child view to the list view.
Whats notable is how the images visibility is flipped. I used a value converter that you add to the Images visibility Binding. It will convert a true false value to a type of Visibility.
public class BoolToVisibility : IValueConverter
{
/// <summary>
/// Converts a value.
/// </summary>
/// <param name="value">The value produced by the binding source.</param>
/// <param name="targetType">The type of the binding target property.</param>
/// <param name="parameter">The converter parameter to use.</param>
/// <param name="culture">The culture to use in the converter.</param>
/// <returns>A converted value. If the method returns null, the valid null value is used.</returns>
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value != null)
{
if ((bool)value)
{
return Visibility.Visible;
}
else
{
return Visibility.Collapsed;
}
}
return Visibility.Collapsed;
}
/// <summary>
/// Converts a value.
/// </summary>
/// <param name="value">The value that is produced by the binding target.</param>
/// <param name="targetType">The type to convert to.</param>
/// <param name="parameter">The converter parameter to use.</param>
/// <param name="culture">The culture to use in the converter.</param>
/// <returns>A converted value. If the method returns null, the valid null value is used.</returns>
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return null;
}
}

Can an embedded winform chart be bound to an observable collection in WPF

I wanted to embed a winform chart control in a WPF window which shall be bound to an observablecollection filled by entering data in a WPF DataGrid.
The observablecollection is needed because i fill it by using a WPF-DataGrid in which i can insert or update data.
So i added to my WPF-project the following dependencies:
- System.Windows.Forms
- System.Windows.Forms.DataVisualization
For a first test i hardcoded in the constructor of the WPF window some data in the observablecollection and bound the chart control.
In that case the display in the chart works fine.
But in the final version i want to insert and/or update data in the DataGrid and the chart shall display that data all at once.
Is it possible to manage that?
Here is the code for the window and the classes as example.
The WPF window MainWindow.xaml:
<Window x:Class="StepFunctions.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:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
xmlns:winformchart="clr-namespace:System.Windows.Forms.DataVisualization.Charting;assembly=System.Windows.Forms.DataVisualization"
xmlns:local="clr-namespace:StepFunctions"
mc:Ignorable="d"
Title="StepFunctions"
Height="350"
Width="525">
<Grid x:Name="maingrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--DataGrid for insert and update of step function data-->
<DataGrid x:Name="grd_stepdata"
Grid.Row="0"
Grid.Column="0"
Margin="5"
AutoGenerateColumns="False"
CanUserAddRows="True"
RowEditEnding="grd_stepdata_RowEditEnding"
ItemsSource="{Binding StepDataSource, NotifyOnSourceUpdated=True, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<DataGrid.Columns>
<DataGridTextColumn x:Name="col_LowerComparer" Binding="{Binding LowerComparer, NotifyOnTargetUpdated=True, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Header="Lower comparer"/>
<DataGridTextColumn x:Name="col_LowerBound" Binding="{Binding LowerBound, NotifyOnTargetUpdated=True, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Header="Lower bound"/>
<DataGridTextColumn x:Name="col_StepValue" Binding="{Binding StepValue, NotifyOnTargetUpdated=True, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Header="Value"/>
</DataGrid.Columns>
</DataGrid>
<!--Chart for displaying the step function data-->
<WindowsFormsHost x:Name="host"
Grid.Row="0"
Grid.Column="1"
Margin="5">
<winformchart:Chart x:Name="myWinformChart"
Dock="Fill">
<winformchart:Chart.Series>
<winformchart:Series Name="series" ChartType="Line"/>
</winformchart:Chart.Series>
<winformchart:Chart.ChartAreas>
<winformchart:ChartArea/>
</winformchart:Chart.ChartAreas>
</winformchart:Chart>
</WindowsFormsHost>
<!--Button for test-->
<Button x:Name="btn_do"
Grid.Row="2"
Grid.Column="0"
Margin="5"
Click="btn_do_Click">Do it</Button>
</Grid>
</Window>
The code-behind of MainWindow.xaml:
using StepFunctions.ViewModels;
using System.Windows;
using System.Windows.Controls;
namespace StepFunctions
{
/// <summary>
/// Interaktionslogik für MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
private MainWindowViewModel vm = new MainWindowViewModel();
public MainWindow()
{
InitializeComponent();
DataContext = vm;
// These lines are just for the first test.
// Normally these lines would be out-commented.
AddStepdata();
ChartDataRefresh();
}
// When the user leaves a DataGrid-row after insert or update the chart shall be refreshed.
private void grd_stepdata_RowEditEnding(object sender, DataGridRowEditEndingEventArgs e)
{
ChartDataRefresh();
}
private void AddStepdata()
{
vm.StepDataSource.Add(new StepData("<", 10, 1));
vm.StepDataSource.Add(new StepData("<", 100, 2));
vm.StepDataSource.Add(new StepData("<", 1000, 3));
}
private void ChartDataRefresh()
{
myWinformChart.DataSource = vm.StepDataSource;
myWinformChart.Series["series"].XValueMember = "LowerBound";
myWinformChart.Series["series"].YValueMembers = "StepValue";
}
/// <summary>
/// For testing the refresh of the chart after the window was loaded.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void btn_do_Click(object sender, RoutedEventArgs e)
{
AddStepdata();
ChartDataRefresh();
}
}
}
The viewmodel:
using System.Collections.ObjectModel;
using System.ComponentModel;
namespace StepFunctions.ViewModels
{
public class MainWindowViewModel : INotifyPropertyChanged
{
/// <summary>
/// Eventhandler for signalising that a property has changed.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
private ObservableCollection<StepData> stepdataSource = new ObservableCollection<StepData>();
public ObservableCollection<StepData> StepDataSource
{
get { return stepdataSource; }
set
{
stepdataSource = value;
RaisePropertyChanged("StepDataSource");
}
}
/// <summary>
/// Informs the target which is bound to a property, that it's source was changed and that it shall update.
/// </summary>
/// <param name="propertyName">The name of the property.</param>
public void RaisePropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
And finally the class StepData which is the base for the observablecollection:
namespace StepFunctions.ViewModels
{
/// <summary>
/// Class for data of stepfunctions.
/// </summary>
public class StepData
{
/// <summary>
/// The constructor.
/// </summary>
public StepData()
{
// Do nothing
}
public StepData(string lowerComparer, double lowerBound, double stepValue)
{
LowerComparer = lowerComparer;
LowerBound = lowerBound;
StepValue = stepValue;
}
public string LowerComparer { get; set; }
public double LowerBound { get; set; }
public double StepValue { get; set; }
}
}

I got it!
The chart has to be generated in code-behind, not in the XAML.
So the method ChartDataRefresh has to look like that:
private void ChartDataRefresh()
{
Chart myWinformChart = new Chart();
myWinformChart.Dock = System.Windows.Forms.DockStyle.Fill;
Series mySeries = new Series("series");
mySeries.ChartType = SeriesChartType.Line;
myWinformChart.Series.Add(mySeries);
ChartArea myArea = new ChartArea();
myWinformChart.ChartAreas.Add(myArea);
myWinformChart.DataSource = vm.StepDataSource;
myWinformChart.Series["series"].XValueMember = "LowerBound";
myWinformChart.Series["series"].YValueMembers = "StepValue";
host.Child = myWinformChart;
}
While entering data in the WPF-DataGrid the Winform chart control is refreshed and the data displayed as a line for checking if the given data is correct.

Hide WPF validation error when window is first loaded

When i first load the window, the button is visible and there isn't an error in the validation (no red line round textbox).
When typing values into the textbox, the validation rules work as they should.
I would like, if possible, to have the button hidden at the start, and for the validation rules to start when the I start typing text into the box.
Here is the code that i have so far. The xaml:
<TextBox x:Name="txtName" HorizontalAlignment="Left" Height="23" Margin="156,119,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Validation.ErrorTemplate="{StaticResource ValidationErrorTemplate}">
<TextBox.Text>
<Binding Path="Name" UpdateSourceTrigger="PropertyChanged" NotifyOnSourceUpdated="True">
<Binding.ValidationRules>
<local:ValidationTest/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
<Button x:Name="btn1" Content="Button" HorizontalAlignment="Left" Margin="85,221,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Visibility" Value="Hidden"/>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=(Validation.HasError), ElementName=txtName}" Value="False"/>
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" Value="Visible"></Setter>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
My validation logic:
class ValidationTest : ValidationRule
{
private int result;
public override ValidationResult Validate(object value, CultureInfo cultureInfo)
{
if (value == null || string.IsNullOrEmpty(value.ToString()))
{
return new ValidationResult(false, "Value cannot be empty.");
}
if (value.ToString().Length > 4)
{
return new ValidationResult(false, "Name cannot be more than 20 characters long.");
}
return ValidationResult.ValidResult;
}
}
The error template i am using:
<Window.Resources>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="ValidationErrorTemplate">
<DockPanel>
<Border BorderBrush="Red" BorderThickness="1.5">
<AdornedElementPlaceholder x:Name="ErrorAdorner"></AdornedElementPlaceholder>
</Border>
</DockPanel>
</ControlTemplate>
</Window.Resources>
I have tried to update the binding when the window loads by using txtName.GetBindingExpression(TextBox.TextProperty).UpdateSource();, but that shows the validation error (red line around textbox). However, the button is hidden, so is there any way of hiding the validation error until the user types text into the textbox?
Am i approaching this in the right way?

I know I am a little late to the party but I came across this question while I was looking to do the same thing. The only thing that I didn't like about using a flag to control when the Validation is performed is that you needed to set the DoValidation flag at some point in your code and I wanted it to be a little more "Automated".
I found quite a few examples online but they all seemed to use the Boolean flag method. I found this MSDN Article and used it as a base then adjusted the code.
I came up with a solution that seems to work really well. Basically in a nutshell what I did was instead of having one variable to keep track of when the validation should be performed I created another Dictionary to keep track of:
When the Validation should be performed.
Store the state of the Validation (Valid, Invalid).
I only wanted the validation to be performed after the first update, so the first order of business is to decide if the Validation should be performed. The first run of the Validation stores the parameter in the Dictionary, then next time around if the parameter is present it performs the validation and stores a true/false (Invalid/Valid) result. This is also a handy way of telling both if the Model has been Validated and if it is valid, so I also added a parameter/flag to simply return if there are any results and the state of the validation. This is especially useful for binding the command enable/disable.
Here is how I accomplished this:
Base PropertyValidation Model:
public abstract class PropertyValidation : INotifyPropertyChanged, IDataErrorInfo
{
#region Fields
private readonly Dictionary<string, object> _values = new Dictionary<string, object>();
/// <summary>
/// This holds the list of validation results and controls when the validation should be
/// performed and if the validation is valid.
/// </summary>
private Dictionary<string, bool> _validationResults { get; set; } = new Dictionary<string, bool>();
#endregion
#region Protected
/// <summary>
/// Sets the value of a property.
/// </summary>
/// <typeparam name="T">The type of the property value.</typeparam>
/// <param name="propertySelector">Expression tree contains the property definition.</param>
/// <param name="value">The property value.</param>
protected void SetValue<T>(Expression<Func<T>> propertySelector, T value)
{
string propertyName = GetPropertyName(propertySelector);
SetValue<T>(propertyName, value);
}
/// <summary>
/// Sets the value of a property.
/// </summary>
/// <typeparam name="T">The type of the property value.</typeparam>
/// <param name="propertyName">The name of the property.</param>
/// <param name="value">The property value.</param>
protected void SetValue<T>(string propertyName, T value)
{
if (string.IsNullOrEmpty(propertyName))
{
throw new ArgumentException("Invalid property name", propertyName);
}
_values[propertyName] = value;
OnPropertyChanged(propertyName);
}
/// <summary>
/// Gets the value of a property.
/// </summary>
/// <typeparam name="T">The type of the property value.</typeparam>
/// <param name="propertySelector">Expression tree contains the property definition.</param>
/// <returns>The value of the property or default value if not exist.</returns>
protected T GetValue<T>(Expression<Func<T>> propertySelector)
{
string propertyName = GetPropertyName(propertySelector);
return GetValue<T>(propertyName);
}
/// <summary>
/// Gets the value of a property.
/// </summary>
/// <typeparam name="T">The type of the property value.</typeparam>
/// <param name="propertyName">The name of the property.</param>
/// <returns>The value of the property or default value if not exist.</returns>
protected T GetValue<T>(string propertyName)
{
if (string.IsNullOrEmpty(propertyName))
{
throw new ArgumentException("Invalid property name", propertyName);
}
object value;
if (!_values.TryGetValue(propertyName, out value))
{
value = default(T);
_values.Add(propertyName, value);
}
return (T)value;
}
/// <summary>
/// Validates current instance properties using Data Annotations.
/// </summary>
/// <param name="propertyName">This instance property to validate.</param>
/// <returns>Relevant error string on validation failure or <see cref="System.String.Empty"/> on validation success.</returns>
protected virtual string OnValidate(string propertyName)
{
string error = string.Empty;
if (string.IsNullOrEmpty(propertyName))
{
throw new ArgumentException("Invalid property name", propertyName);
}
//Check if the Field has been added, this keeps track of when the validation
//is performed.
if (_validationResults.Any(x => x.Key == propertyName))
{
var value = GetValue(propertyName);
var results = new List<System.ComponentModel.DataAnnotations.ValidationResult>(1);
var result = Validator.TryValidateProperty(
value,
new ValidationContext(this, null, null)
{
MemberName = propertyName
},
results);
if (!result)
{
var validationResult = results.First();
error = validationResult.ErrorMessage;
//Store a true result in the validation to set the error.
_validationResults[propertyName] = true;
}
else
{
//If the Validation has been run and not invalid make sure the
//paramter in the list is cleared, otherwise validation would
//always return invalid once it is invalidated.
_validationResults[propertyName] = false;
}
}
else
{
//This is the first run of the Validation, simply store the paramter
//in the validation list and wait until next time to validate.
_validationResults.Add(propertyName, true);
}
//Notify that things have changed
OnPropertyChanged("IsValid");
//Return the actual result
return error;
}
#endregion
#region Public
/// <summary>
/// This returns if the Validation is Valid or not
/// </summary>
/// <returns>True if the Validation has been perfomed and if there are not
/// true values. Will return false until the validation has been done once.</returns>
public bool IsValid {
get { return (!_validationResults.Any(x => x.Value) && (_validationResults.Count > 0)); }
}
/// <summary>
/// Clears/Reset the Validation
/// </summary>
public void ClearValidation()
{
_validationResults.Clear();
}
#endregion
#region Change Notification
/// <summary>
/// Raised when a property on this object has a new value.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Raises this object's PropertyChanged event.
/// </summary>
/// <param name="propertyName">The property that has a new value.</param>
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
this.VerifyPropertyName(propertyName);
PropertyChangedEventHandler handler = this.PropertyChanged;
if (handler != null)
{
var e = new PropertyChangedEventArgs(propertyName);
handler(this, e);
}
}
protected void OnPropertyChanged<T>(Expression<Func<T>> propertySelector)
{
var propertyChanged = PropertyChanged;
if (propertyChanged != null)
{
string propertyName = GetPropertyName(propertySelector);
propertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion // IOnPropertyChanged Members
#region Data Validation
string IDataErrorInfo.Error {
get {
throw new NotSupportedException("IDataErrorInfo.Error is not supported, use IDataErrorInfo.this[propertyName] instead.");
}
}
string IDataErrorInfo.this[string propertyName] {
get {
return OnValidate(propertyName);
}
}
#endregion
#region Privates
private string GetPropertyName(LambdaExpression expression)
{
var memberExpression = expression.Body as MemberExpression;
if (memberExpression == null)
{
throw new InvalidOperationException();
}
return memberExpression.Member.Name;
}
private object GetValue(string propertyName)
{
object value;
if (!_values.TryGetValue(propertyName, out value))
{
var propertyDescriptor = TypeDescriptor.GetProperties(GetType()).Find(propertyName, false);
if (propertyDescriptor == null)
{
throw new ArgumentException("Invalid property name", propertyName);
}
value = propertyDescriptor.GetValue(this);
_values.Add(propertyName, value);
}
return value;
}
#endregion
#region Debugging
/// <summary>
/// Warns the developer if this object does not have
/// a public property with the specified name. This
/// method does not exist in a Release build.
/// </summary>
[Conditional("DEBUG")]
[DebuggerStepThrough]
public void VerifyPropertyName(string propertyName)
{
// Verify that the property name matches a real,
// public, instance property on this object.
if (TypeDescriptor.GetProperties(this)[propertyName] == null)
{
string msg = "Invalid property name: " + propertyName;
if (this.ThrowOnInvalidPropertyName)
throw new Exception(msg);
else
Debug.Fail(msg);
}
}
/// <summary>
/// Returns whether an exception is thrown, or if a Debug.Fail() is used
/// when an invalid property name is passed to the VerifyPropertyName method.
/// The default value is false, but subclasses used by unit tests might
/// override this property's getter to return true.
/// </summary>
protected virtual bool ThrowOnInvalidPropertyName { get; private set; }
#endregion // Debugging Aides
}
Model:
public class MyModel : PropertyValidation
{
[Required(ErrorMessage = "Name must be specified")]
[MaxLength(50, ErrorMessage = "Name too long, Name cannot contain more than 50 characters")]
public string Name {
get { return GetValue(() => Name); }
set { SetValue(() => Name, value); }
}
[Required(ErrorMessage = "Description must be specified")]
[MaxLength(150, ErrorMessage = "Description too long, Description cannot contain more than 150 characters")]
public string Description {
get { return GetValue(() => Description); }
set { SetValue(() => Description, value); }
}
}
Error Template:
<ControlTemplate x:Key="ValidationErrorTemplate">
<DockPanel LastChildFill="true">
<Border Background="Red" DockPanel.Dock="right"
Margin="-20,0,0,0" Width="10" Height="10" CornerRadius="10"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center" FontWeight="Bold" Foreground="white"/>
</Border>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center" >
<Border BorderBrush="red" BorderThickness="1" >
<Border.Effect>
<BlurEffect Radius="5" />
</Border.Effect>
</Border>
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
Data Template/Form:
<DataTemplate x:Key="MyModelDetailsTemplate" DataType="{x:Type data:MyModel}" >
<StackPanel Grid.IsSharedSizeScope="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" SharedSizeGroup="Labels" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Name</Label>
<TextBox x:Name="Name"
Grid.Column="1"
MinWidth="150"
Validation.ErrorTemplate="{StaticResource ValidationErrorTemplate}"
Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, NotifyOnValidationError=True}" />
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" SharedSizeGroup="Labels" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Description</Label>
<TextBox Grid.Column="1"
Validation.ErrorTemplate="{StaticResource ValidationErrorTemplate}"
Text="{Binding Description, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, NotifyOnValidationError=True}" AcceptsReturn="True" VerticalAlignment="Stretch" />
</Grid>
</StackPanel>
</DataTemplate>
RelayCommand (For Completeness)
public class RelayCommand : ICommand
{
private Action<object> execute;
private Predicate<object> canExecute;
private event EventHandler CanExecuteChangedInternal;
public RelayCommand(Action<object> execute) : this(execute, DefaultCanExecute)
{
}
public RelayCommand(Action<object> execute, Predicate<object> canExecute)
{
if (execute == null)
{
throw new ArgumentNullException("execute");
}
if (canExecute == null)
{
throw new ArgumentNullException("canExecute");
}
this.execute = execute;
this.canExecute = canExecute;
}
public event EventHandler CanExecuteChanged {
add {
CommandManager.RequerySuggested += value;
this.CanExecuteChangedInternal += value;
}
remove {
CommandManager.RequerySuggested -= value;
this.CanExecuteChangedInternal -= value;
}
}
public bool CanExecute(object parameter)
{
return this.canExecute != null && this.canExecute(parameter);
}
public void Execute(object parameter)
{
this.execute(parameter);
}
public void OnCanExecuteChanged()
{
EventHandler handler = this.CanExecuteChangedInternal;
if (handler != null)
{
//DispatcherHelper.BeginInvokeOnUIThread(() => handler.Invoke(this, EventArgs.Empty));
handler.Invoke(this, EventArgs.Empty);
}
}
public void Destroy()
{
this.canExecute = _ => false;
this.execute = _ => { return; };
}
private static bool DefaultCanExecute(object parameter)
{
return true;
}
}
ViewModel:
** Note the PropertyValidation here is not required, A separate INotifyPropertyChanged base could be used instead, I only used it for the OnPropertyChanged Notification and to keep things simple **
public class PageHomeVM : PropertyValidation
{
private ICommand saveCommand;
public ICommand SaveCommand {
get {
return saveCommand;
}
set {
saveCommand = value;
OnPropertyChanged();
}
}
public MyModel MyModel { get; set; } = new MyModel();
public PageHomeVM()
{
SaveCommand = new RelayCommand(SaveRecord, p => MyModel.IsValid);
MyModel.ClearValidation();
}
public void SaveRecord(object p)
{
//Perform the save....
}
}
View:
<pages:BasePage.DataContext>
<ViewModels:PageHomeVM/>
</pages:BasePage.DataContext>
<StackPanel>
<Label Content="MyModel Details"/>
<ContentPresenter ContentTemplate="{StaticResource MyModelDetailsTemplate}" Content="{Binding MyModel}" />
<Button x:Name="btnSave"
Command="{Binding SaveCommand}"
Width="75"
HorizontalAlignment="Right">Save</Button>
</StackPanel>
I hope this helps...

save a flag for once you have any value
class ValidationTest : ValidationRule
{
private int result;
private bool hadValue = false;
public override ValidationResult Validate(object value, CultureInfo cultureInfo)
{
if (hadValue && (value == null || string.IsNullOrEmpty(value.ToString())))
{
return new ValidationResult(false, "Value cannot be empty.");
}
if (value.ToString().Length > 4)
{
hadValue = true;
return new ValidationResult(false, "Name cannot be more than 20 characters long.");
}
hadValue = true;
return ValidationResult.ValidResult;
}
}

How to get value of a property of the WPF ListBoxItem

Hello I am trying to set the value of a property of my ListBoxItem, just not sure how to use Binding in this case if someone could help me, I appreciate it since!
Below XAML
<ControlTemplate TargetType="controls:ModernVerticalMenu">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{TemplateBinding ListWidth}"/>
<ColumnDefinition Width="{TemplateBinding ListWidth}"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Background="{TemplateBinding BackColor}" Height="{TemplateBinding Height}" BorderThickness="1" BorderBrush="{DynamicResource bordaSuperior}">
<!-- link list -->
<ListBox x:Name="LinkList" ItemsSource="{Binding Links, RelativeSource={RelativeSource TemplatedParent}}"
ScrollViewer.HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="50" Background="Transparent" Width="500">
<Border Name="border" Padding="10">
<Path x:Name="icon" Data="{Binding IconData}" Stretch="Fill" Fill="{DynamicResource Accent}" Width="20" Height="20" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Border>
<TextBlock x:Name="texto" ToolTip="{Binding Tooltip}" Text="{Binding DisplayName}" Margin="45,2,2,2" FontSize="{DynamicResource MediumFontSize}" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" HorizontalAlignment="Left" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IconData}" Value="{x:Null}">
<Setter Property="Margin" TargetName="texto">
<Setter.Value>
<Thickness Bottom="2" Top="2" Left="10" Right="2"/>
</Setter.Value>
</Setter>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.Setters>
<Setter Property="Fill" TargetName="icon">
<Setter.Value>
<SolidColorBrush Color="#f2f2f2" />
</Setter.Value>
</Setter>
</Trigger.Setters>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ListBoxItem.IsMouseOver" SourceName="LinkList" Value="true">
<Trigger.Setters>
<Setter Property="SelectedLinkGroup" Value="{Binding Source=LinkList,Path=Children}"/>
</Trigger.Setters>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
In the code below I am trying to set the value SelectedLinkGroup From property to the value of Children referring to the ListBoxItem LinkList.
<Setter Property="SelectedLinkGroup" Value="{Binding Source=LinkList,Path=Children}"/>
using FirstFloor.ModernUI.Presentation;
using System;
using System.Data;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
namespace FirstFloor.ModernUI.Windows.Controls
{
/// <summary>
/// Represents a control that contains multiple pages that share the same space on screen.
/// </summary>
public class ModernVerticalMenu
: Control
{
/// <summary>
/// Identifies the ContentLoader dependency property.
/// </summary>
public static readonly DependencyProperty ContentLoaderProperty = DependencyProperty.Register("ContentLoader", typeof(IContentLoader), typeof(ModernVerticalMenu), new PropertyMetadata(new DefaultContentLoader()));
/// <summary>
/// Identifies the ListWidth dependency property.
/// </summary>
public static readonly DependencyProperty ListWidthProperty = DependencyProperty.Register("ListWidth", typeof(GridLength), typeof(ModernVerticalMenu), new PropertyMetadata(new GridLength(170)));
/// <summary>
/// Identifies the Links dependency property.
/// </summary>
public static readonly DependencyProperty LinksProperty = DependencyProperty.Register("Links", typeof(LinkCollection), typeof(ModernVerticalMenu), new PropertyMetadata(OnLinksChanged));
/// <summary>
/// Identifies the SelectedSource dependency property.
/// </summary>
public static readonly DependencyProperty SelectedSourceProperty = DependencyProperty.Register("SelectedSource", typeof(Uri), typeof(ModernVerticalMenu), new PropertyMetadata(OnSelectedSourceChanged));
/// <summary>
/// Defines the SelectedLinkGroup dependency property.
/// </summary>
public static readonly DependencyProperty SelectedLinkGroupProperty = DependencyProperty.Register("SelectedLinkGroup", typeof(LinkCollection), typeof(ModernVerticalMenu), new PropertyMetadata(OnSelectedLinkGroupChanged));
/// <summary>
/// Defines the SelectedLink dependency property.
/// </summary>
public static readonly DependencyProperty SelectedLinkProperty = DependencyProperty.Register("SelectedLink", typeof(Link), typeof(ModernVerticalMenu), new PropertyMetadata(OnSelectedLinkChanged));
/// <summary>
/// Defines the SelectedLink dependency property.
/// </summary>
public static readonly DependencyProperty BackColorProperty = DependencyProperty.Register("BackColor", typeof(SolidColorBrush), typeof(ModernVerticalMenu), new PropertyMetadata(null));
/// <summary>
/// Occurs when the selected source has changed.
/// </summary>
public event EventHandler<SourceEventArgs> SelectedSourceChanged;
private ListBox linkList;
/// <summary>
/// Initializes a new instance of the <see cref="ModernVerticalMenu"/> control.
/// </summary>
public ModernVerticalMenu()
{
this.DefaultStyleKey = typeof(ModernVerticalMenu);
// this.BackColor = new SolidColorBrush(Color.FromRgb(0,0,255));
// create a default links collection
SetCurrentValue(LinksProperty, new LinkCollection());
}
private static void OnSelectedLinkGroupChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
// retrieve the selected link from the group
var group = (LinkCollection)e.NewValue; // cria uma nova instancia do grupo
Link selectedLink = null; //cria um link selecionado
if (group != null)
{ //se o grupo copiado existe
selectedLink = group.FirstOrDefault();
}
// update the selected link
((ModernVerticalMenu)o).SetCurrentValue(SelectedLinkProperty, selectedLink);
}
private static void OnSelectedLinkChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
// update selected source
var newValue = (Link)e.NewValue;
Uri selectedSource = null;
if (newValue != null)
{
selectedSource = newValue.Source;
}
((ModernVerticalMenu)o).SetCurrentValue(SelectedSourceProperty, selectedSource);
}
private static void OnLinksChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
((ModernVerticalMenu)o).UpdateSelection();
}
private static void OnSelectedSourceChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
((ModernVerticalMenu)o).OnSelectedSourceChanged((Uri)e.OldValue, (Uri)e.NewValue);
}
private void OnSelectedSourceChanged(Uri oldValue, Uri newValue)
{
UpdateSelection();
// raise SelectedSourceChanged event
var handler = this.SelectedSourceChanged;
if (handler != null) {
handler(this, new SourceEventArgs(newValue));
}
}
private void UpdateSelection()
{
if (this.linkList == null || this.Links == null) {
return;
}
// sync list selection with current source
this.linkList.SelectedItem = this.Links.FirstOrDefault(l => l.Source == this.SelectedSource);
// SetValue(SelectedLinkGroupProperty, this.Links.FirstOrDefault(l => l.Children == this.SelectedLinkGroup));
if (this.Links.FirstOrDefault(l => l.Children == this.SelectedLinkGroup) != null) { }
}
/// <summary>
/// When overridden in a derived class, is invoked whenever application code or internal processes call System.Windows.FrameworkElement.ApplyTemplate().
/// </summary>
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
if (this.linkList != null) {
this.linkList.SelectionChanged -= OnLinkListSelectionChanged;
}
this.linkList = GetTemplateChild("LinkList") as ListBox;
if (this.linkList != null) {
this.linkList.SelectionChanged += OnLinkListSelectionChanged;
}
UpdateSelection();
}
private void OnLinkListSelectionChanged(object sender, SelectionChangedEventArgs e)
{
//
var link = this.linkList.SelectedItem as Link;
if (link != null && link.Source != this.SelectedSource)
{
SetCurrentValue(SelectedSourceProperty, link.Source);
SetCurrentValue(SelectedLinkGroupProperty, link.Children);
}
}
/// <summary>
/// Gets or sets the content loader.
/// </summary>
public IContentLoader ContentLoader
{
get { return (IContentLoader)GetValue(ContentLoaderProperty); }
set { SetValue(ContentLoaderProperty, value); }
}
/// <summary>
/// Gets or sets the collection of links that define the available content in this tab.
/// </summary>
public LinkCollection Links
{
get { return (LinkCollection)GetValue(LinksProperty); }
set { SetValue(LinksProperty, value); }
}
/// <summary>
/// Gets or sets the collection of links that define the available content in this tab.
/// </summary>
public LinkCollection SelectedLinkGroup
{
get { return (LinkCollection)GetValue(SelectedLinkGroupProperty); }
set { SetValue(SelectedLinkGroupProperty, value); }
}
/// <summary>
/// Gets or sets the collection of links that define the available content in this tab.
/// </summary>
public Link SelectedLink
{
get { return (Link)GetValue(SelectedLinkProperty); }
set { SetValue(SelectedLinkProperty, value); }
}
/// <summary>
/// Gets or sets the width of the list when Layout is set to List.
/// </summary>
/// <value>
/// The width of the list.
/// </value>
public GridLength ListWidth
{
get { return (GridLength)GetValue(ListWidthProperty); }
set { SetValue(ListWidthProperty, value); }
}
/// <summary>
/// Gets or sets the source URI of the selected link.
/// </summary>
/// <value>The source URI of the selected link.</value>
public Uri SelectedSource
{
get { return (Uri)GetValue(SelectedSourceProperty); }
set { SetValue(SelectedSourceProperty, value); }
}
/// <summary>
/// Gets or sets the source URI of the selected link.
/// </summary>
/// <value>The source URI of the selected link.</value>
public SolidColorBrush BackColor
{
get { return (SolidColorBrush)GetValue(BackColorProperty); }
set { SetValue(BackColorProperty, value); }
}
}
}

From my understanding of the code, you are trying to set the SelectedLinkGroup property to the items in your LinkList when your mouse is over a ListBoxItem.
As your LinkList's ItemsSource is bound to the Links property on your control you should be able to bind directly to this property to obtain the same result. The following code does just that.
Value="{Binding Links, RelativeSource={RelativeSource TemplatedParent}}"
Alternatively you could bind to the LinkList Items directly.
Value="{Binding ElementName=LinkList, Path=ItemsSource}"
Here you specify the name of the element to bind to and the property on that element.

How to tie together custom dependency properties of UserControl with properties of nested controls?

I have a UserControl that includes three TextBlock controls. I want to implement three custom properties in UserControl. Something like:
public partial class MyControl: UserControl
{
...
public String Title
{
get { return this.textBlock1.Text; }
set { this.textBlock1.Text = value; }
}
public String Units
{
get { return this.textBlock2.Text; }
set { this.textBlock2.Text = value; }
}
public String Data
{
get { return this.textBlock3.Text; }
set { this.textBlock3.Text = value; }
}
}
If I want to use binding capabilities with these properties I have to implement them as dependency properties. Am I right? But I do not know how to do it in my case.

That is correct. Binding to dependency properties is quite simple to do. Understanding the mechanics I would suggest looking through MSDN. However to answer your question you provide static dependency properties registered to the user control. Then your getters \ setters reference the property.
Here is a sample line of a dependency property.
/// <summary>
/// Provides a bindable text property to the user control
/// </summary>
public static DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(UserControl1), new PropertyMetadata("", onTextPropertyChanged));
/// <summary>
/// optional static call back handler when the property changed
/// </summary>
/// <param name="o"></param>
/// <param name="e"></param>
static void onTextPropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
var obj = o as UserControl1;
if (obj == null)
return;
//TODO: Changed...
}
/// <summary>
/// Gets \ sets the text
/// </summary>
public string Text
{
get { return (string)this.GetValue(TextProperty); }
set
{
if (this.Text != value)
this.SetValue(TextProperty, value);
}
}
The above is very simple. We register a dependency property TextProperty to UserControl1, this property is the type of string and has a default value of "" (as noted in the property meta data). I also provided a static callback handler if you wish to perform additional steps once the property has changed.
You will then see the Text property uses the GetValue() and SetValue() methods for getting and setting the value of the Text Property.
UPDATE: Binding to a child element in XAML.
This update is to show how to use the the above TextProperty for binding.
Usercontrol1.Xaml. This is the XAML for UserControl1.
<UserControl x:Class="WpfApplication1.UserControl1"
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"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" FontWeight="Bold" Content="Text" VerticalAlignment="Center" />
<TextBox Text="{Binding Text, Mode=TwoWay}" Grid.Column="1" VerticalAlignment="Center" Padding="4" />
</Grid>
</UserControl>
My Main Window View Model (Implement INotifyPropertyChanged)
public class MainWindowModel : INotifyPropertyChanged
{
/// <summary>
/// the text
/// </summary>
string myProperty = "This is the default text";
/// <summary>
/// Gets \ sets the text
/// </summary>
public string MyProperty
{
get { return this.myProperty; }
set
{
if (this.MyProperty != value)
{
this.myProperty = value;
this.OnPropertyChanged("MyProperty");
}
}
}
/// <summary>
/// fires the property changed event
/// </summary>
/// <param name="propertyName"></param>
private void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
/// <summary>
/// the property changed event
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
}
MainWindow.Xaml. Binding the text property to the view model
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ctrl="clr-namespace:WpfApplication1"
Name="Window1"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<ctrl:MainWindowModel />
</Window.DataContext>
<Grid>
<ctrl:UserControl1 Text="{Binding Path=DataContext.MyProperty, Mode=TwoWay, ElementName=Window1}" />
</Grid>
</Window>

Code for the dependency property :
public string Title
{
get { return (string)this.GetValue(TitleProperty); }
set { this.SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title",
typeof(string),
typeof(MyControl),
new PropertyMetadata(null));
Binding in xaml :
<TextBlock Text="{Binding Title,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type yourXmlns:MyControl}}"/>