Develop Reference

change checkbox state in DataGridTemplateColumn after row is selected in datagrid using xaml

I am creating a wpf app and struggling with this problem for sometime now.
I have a datagrid with DataGridTemplateColumn, which contains a checkbox and textblock.
<DataGrid
Name="ChargeDataGrid"
Grid.Row="1"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox x:Name="CheckBox1"/>
<TextBlock Text="{Binding}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox />
<TextBlock Text="Title" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
<system:String>123</system:String>
<system:String>124</system:String>
<system:String>125</system:String>
<system:String>126</system:String>
<system:String>127</system:String>
</DataGrid>
What i need to achieve is when row is clicked checkbox in this row must be in checked state too.
I tried to use style triggers:
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="CheckBox1.IsChecked" Value="True" />
<Setter Property="Background" Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
but it didn't seem possible to change checkbox state like this. I know how to do it in code-behind or mvvm style, but in this case i am wondering is it possible to do using xaml only?
Any help would be appreciated.

I am afraid but with plain standard XAML you can't do it.
As I see you have two options:
You can use some extension libraries which will expand functionality of bindings. Some functionality can be found in mvvm frameworks like MugenMvvmToolkit
Second option is to use some converter for this purpose.
My solution for the second variant is a kind of hack and to my mind more elegant way would be with code behind. Converter:
public class MultiValueConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
if (values.Length != 3) throw new ArgumentException("Should be 3 params");
if (!(values[2] is FrameworkElement element)) return values[1];
if (!(bool)values[0])
{
element.Tag = "Value need to be changed.";
return values[1];
}
if (element.Tag.Equals("Value changed.")) return values[1];
var res = !(bool)(values[1] ?? true);
element.Tag = "Value changed.";
return res;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Converter inversing bool variable and saves previous state in Tag property of control. This is still not code behind and pretty reusable solution. You can use such converter in any other view where you need such behaviour
In XAML I've changed only checkbox control definition:
<CheckBox x:Name="RowCheckBox" IsHitTestVisible="False">
<CheckBox.IsChecked>
<MultiBinding Converter="{StaticResource MultiValueConverter}" Mode="OneWay">
<Binding Path="IsSelected" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type DataGridRow}}" />
<Binding Path="IsChecked" RelativeSource="{RelativeSource Self}" />
<Binding Mode="OneWay" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</CheckBox.IsChecked>
</CheckBox>

I think it can bed done rather simple like this:
<CheckBox x:Name="CheckBox1" IsChecked="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow}, Path=IsSelected}"/>
EDIT:
If the desired result is to only change the IsChecked state when (re)selecting the row it can be done with a attached property on a DependencyObject (for instance the containing window) like this:
1) Define the checkbox as this:
<CheckBox x:Name="CheckBox1" IsEnabled="true" local:MainWindow.CheckboxChecked="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow}, Path=IsSelected,Mode=OneWay}">
2) Define the attached property as this:
public static bool GetCheckboxChecked(DependencyObject obj)
{
return (bool)obj.GetValue(CheckboxCheckedProperty);
}
public static void SetCheckboxChecked(DependencyObject obj, bool value)
{
obj.SetValue(CheckboxCheckedProperty, value);
}
public static readonly DependencyProperty CheckboxCheckedProperty =
DependencyProperty.RegisterAttached("CheckboxChecked", typeof(bool), typeof(MainWindow), new PropertyMetadata(false, CheckboxChecked_Changed));
private static void CheckboxChecked_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
CheckBox chk = d as CheckBox;
if (chk != null && chk.Tag == null)
{
bool chkValue = chk.IsChecked.GetValueOrDefault();
bool oldValue = (bool)e.OldValue;
bool newValue = (bool)e.NewValue;
chk.Tag = true; // Just to prevent an infinite loop
chk.IsChecked = !chkValue && !newValue || chkValue && !oldValue && newValue ? false : true;
chk.Tag = null;
}
}

Color the row in combobox?

I'm having trouble with finding the solution for the problem, namely I had an idea to color each row/column of combobox with different colors, depending on the area, but i cannot find any clues or hints or instructions to do so. the app is pretty simple
<ComboBox x:Name="comboBox1" HorizontalAlignment="Left" Margin="84,70,0,0" VerticalAlignment="Top" Width="230"/>
this is my XAML combobox, which i fill from the code:
SortedList<int, string> AreaList = new SortedList<int, string>();
AreaList.Add(1, "Agriculture");
AreaList.Add(2, "Forestry");
AreaList.Add(3, "Fruits");
AreaList.Add(4, "Food");
AreaList.Add(5, "Metals");
AreaList.Add(6, "Mining");
AreaList.Add(7, "Electricity");
AreaList.Add(8, "Building Contracts");
AreaList.Add(9, "Transport");
AreaList.Add(10, "Alcohol");
AreaList.Add(11, "Information Technologies");
AreaList.Add(12, "Health And Social Services");
AreaList.Add(13, "Art and Entertainement");
AreaList.Add(14, "Hospitality Business");
AreaList.Add(15, "Education");
AreaList.Add(16, "Real Estate");
AreaList.Add(17, "Sales");
AreaList.Add(18, "Architecture");
AreaList.Add(19, "Engineering");
AreaList.Add(20, "Wholesale");
AreaList.Add(21, "Other");
comboBox1.ItemsSource = AreaList.ToList();
comboBox1.SelectedValuePath = "Key";
comboBox1.DisplayMemberPath = "Value";
each of these items have their color in another window, but i would like to show those colors in the combobox, the background of "Agriculture" row/column should be green etc.
Is there a solution to this, or do i have to redo it all over?

You could use an ItemContainerStyle with a DataTrigger for each value that maps to a colour:
<ComboBox x:Name="comboBox1">
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Style.Triggers>
<DataTrigger Binding="{Binding Value}" Value="Agriculture">
<Setter Property="Background" Value="Green" />
</DataTrigger>
<DataTrigger Binding="{Binding Value}" Value="Forestry">
<Setter Property="Background" Value="Red" />
</DataTrigger>
<!-- and so on-->
</Style.Triggers>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
You may also want to read this:
Changing the background colour of a ComboBox in WPF: https://blog.magnusmontin.net/2014/04/30/changing-the-background-colour-of-a-combobox-in-wpf-on-windows-8/

You can make use of ItemContainerStyle and Converter
public class StringToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (((KeyValuePair<int, string>)value).Value.ToString() == "Agriculture")
return Brushes.Green;
//and so on or other ways to get the color
return Brushes.Transparent;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
and XAML goes as follows,
<Window.Resources>
<local:StringToColorConverter x:Key="StringToColorConverter"/>
</Window.Resources>
<Grid >
<ComboBox x:Name="comboBox1" HorizontalAlignment="Left" Margin="84,70,0,0" VerticalAlignment="Top" Width="230">
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="Background" Value="{Binding Converter={StaticResource StringToColorConverter}}">
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
</Grid>

c# and date picker, how to change format?

I have a datepicker in my C# 4.0 (WPF) application and I would like to change the format of the date that is visible in the textBox to yyyy/MM/dd. Now I see the format dd/MM/yyyy.
In my axml of the datePicker I have this code:
<DatePicker Height="25" HorizontalAlignment="Left" Margin="5,36,0,0" Name="dtpStartDate"
SelectedDate="{Binding StartDateSelectedDate}" VerticalAlignment="Top" Width="115">
<DatePicker.Resources>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<TextBox x:Name="PART_TextBox"
Text="{Binding Path=SelectedDate, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}, StringFormat={}{0:yyyy/MM/dd}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
This seems in a first time that all works fine, I can see the date in the format that I want, and I can change the date manually or using the calendar, and in both ways the date that arrives to the viewModel is the correct.
But I have a problem, because I would like to detect that if the date is empty, in my view model control this case. But If I clear the datepicker, in my view model arrives the last correct date, so I can't check if the date is empty or not.
So how can I modify the format of the date in the date picker and control if the date is empty/null or not?
Thanks.
Daimroc.

you can try the following solution.
First create the following converter :
public class StringToDateTimeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null)
{
return null;
}
return ((DateTime)value).ToString(parameter as string, CultureInfo.InvariantCulture);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
if (string.IsNullOrEmpty(value as string))
{
return null;
}
try
{
DateTime dt = DateTime.ParseExact(value as string, parameter as string, CultureInfo.InvariantCulture);
return dt as DateTime?;
}
catch (Exception)
{
return null;
}
}
}
Then in the xaml, you will have to create an instance of the converter and use it in the textbox of the DatePicker
<Window x:Class="TestDatePicker.MainWindow"
...
xmlns:converters="clr-namespace:TestDatePicker"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
...
<converters:StringToDateTimeConverter x:Key="StringToDateTimeConverter" />
</Window.Resources>
<Grid DataContext="{StaticResource MainWindowVM}">
...
<DatePicker Height="25" HorizontalAlignment="Left" Margin="5,36,0,0" Name="dtpStartDate"
SelectedDate="{Binding StartDateSelectedDate}" VerticalAlignment="Top" Width="115">
<DatePicker.Resources>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<TextBox x:Name="PART_TextBox"
Text="{Binding Path=SelectedDate, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}, Converter={StaticResource StringToDateTimeConverter}, ConverterParameter=yyyy/MM/dd}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
...
</Grid>
Finally, in the viewmodel, the property must be of type DateTime? (i.e a nullable DateTime).
private DateTime? _startDateSelectedDate;
public DateTime? StartDateSelectedDate
{
get { return _startDateSelectedDate; }
set
{
if (_startDateSelectedDate != value)
{
_startDateSelectedDate = value;
RaisePropertyChanged(() => this.StartDateSelectedDate);
}
}
}
I hope this will help you
Regards
Claude

defaultly the DateTimerPicker does not support null values.
Maybe this post from MSDN with the same topic can help you.
There you will find other ideas how to implement it or some code project for nullable date time picker.

How do I correctly bind a Popup to a ToggleButton?

I am trying to do something that seems relatively simple and logic from a user interface level but I have one bug that is very annoying. I have a ToggleButton and I am trying to show a Popup when the button is toggled in and hide the Popup when the button is toggled out. The Popup also hides when the user clicks away from it.
Everything is working as expected with the following XAML except when I click the toggle button after the Popup is shown, the Popup disappears for a split second then reappears.
I suspect what's going on here is that clicking away from the Popup is causing it to toggle the button off then immediately after the button is toggled back on as the mouse clicks it. I just don't know how to go about fixing it.
Any help is appreciated. Thanks.
<ToggleButton x:Name="TogglePopupButton" Content="My Popup Toggle Button" Width="100" />
<Popup StaysOpen="False" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton, Mode=TwoWay}">
<Border Width="100" Height="200" Background="White" BorderThickness="1" BorderBrush="Black">
<TextBlock>This is a test</TextBlock>
</Border>
</Popup>

Stephans answers has the disadvantage, that the desired behaviour of closing the popup whenever it loses focus also disappears.
I solved it by disabling the toggle-button when the popup is open. An alternative would be to use the IsHitTestVisible Property instead of is enabled:
<ToggleButton x:Name="TogglePopupButton" Content="My Popup Toggle Button" Width="100" IsEnabled="{Binding ElementName=ToggledPopup, Path=IsOpen, Converter={StaticResource BoolToInvertedBoolConverter}}"/>
<Popup x:Name="ToggledPopup" StaysOpen="False" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton, Mode=TwoWay}">
<Border Width="100" Height="200" Background="White" BorderThickness="1" BorderBrush="Black">
<TextBlock>This is a test</TextBlock>
</Border>
</Popup>
The converter looks like this:
public class BoolToInvertedBoolConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value is bool)
{
bool boolValue = (bool)value;
return !boolValue;
}
else
return false;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException("ConvertBack() of BoolToInvertedBoolConverter is not implemented");
}
}

Solution without IValueConverter:
<Grid>
<ToggleButton x:Name="TogglePopupButton" Content="My Popup Toggle Button" Width="100" >
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="IsHitTestVisible" Value="True"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Popup, Path=IsOpen}" Value="True">
<Setter Property="IsHitTestVisible" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Popup StaysOpen="false" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton, Mode=TwoWay}"
PlacementTarget="{Binding ElementName=TogglePopupButton}" PopupAnimation="Slide"
x:Name="Popup">
<Border Width="100" Height="200" Background="White" BorderThickness="1" BorderBrush="Black">
<TextBlock>This is a test</TextBlock>
</Border>
</Popup>
</Grid>

I faced the same problem. None of the answers offered here worked correctly.
After a little research, I can say that the suspicions of the author of the question are correct. During a mouse click, the first click (down) closes the popup and set togglebutton as unchecked, the second click (up) causes the observed action when the popup appears again.
The first way to avoid this problem is to discard the second click by delay:
<ToggleButton x:Name="UserPhotoToggleButton"/>
<Popup x:Name="UserInfoPopup"
IsOpen="{Binding IsChecked, ElementName=UserPhotoToggleButton, Delay=200, Mode=TwoWay}"
StaysOpen="False">
It looks simple enough to fix problem. Although it is not an ideal solution. The best way would be to extend the functionality of the popup by Behavior:
Add these namespaces
xmlns:behaviors="clr-namespace:WpfClient.Resources.Behaviors;assembly=WpfClient.Resources"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
then extend your popup by i:Interaction.Behaviors
<Popup x:Name="UserInfoPopup"
StaysOpen="False">
<i:Interaction.Behaviors>
<behaviors:BindToggleButtonToPopupBehavior
DesiredToggleButton="{Binding ElementName=UserPhotoToggleButton}"/>
</i:Interaction.Behaviors>
<Border>
<!--Your template-->
</Border>
</Popup>
Finally add the behavior. In a minimal form, it may look like this:
using Microsoft.Xaml.Behaviors;
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
namespace WpfClient.Resources.Behaviors
{
public class BindToggleButtonToPopupBehavior : Behavior<Popup>
{
public ToggleButton DesiredToggleButton
{
get { return (ToggleButton)GetValue(DesiredToggleButtonProperty); }
set { SetValue(DesiredToggleButtonProperty, value); }
}
public static readonly DependencyProperty DesiredToggleButtonProperty =
DependencyProperty.Register(nameof(DesiredToggleButton), typeof(ToggleButton), typeof(BindIconToggleButtonToPopupBehavior), new PropertyMetadata(null));
protected override void OnAttached()
{
base.OnAttached();
DesiredToggleButton.Checked += DesiredToggleButton_Checked;
DesiredToggleButton.Unchecked += DesiredToggleButton_Unchecked;
AssociatedObject.Closed += AssociatedObject_Closed;
AssociatedObject.PreviewMouseUp += AssociatedObject_PreviewMouseUp;
}
private void DesiredToggleButton_Unchecked(object sender, RoutedEventArgs e) => AssociatedObject.IsOpen = false;
private void DesiredToggleButton_Checked(object sender, RoutedEventArgs e) => AssociatedObject.IsOpen = true;
private void AssociatedObject_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
if (e.Source is Button)
AssociatedObject.IsOpen = false;
}
private void AssociatedObject_Closed(object sender, EventArgs e)
{
if (DesiredToggleButton != Mouse.DirectlyOver)
DesiredToggleButton.IsChecked = false;
}
protected override void OnDetaching()
{
base.OnDetaching();
DesiredToggleButton.Checked -= DesiredToggleButton_Checked;
DesiredToggleButton.Unchecked -= DesiredToggleButton_Unchecked;
if (AssociatedObject != null)
{
AssociatedObject.Closed -= AssociatedObject_Closed;
AssociatedObject.PreviewMouseUp -= AssociatedObject_PreviewMouseUp;
}
}
}
}

On the ToggleButton set the Property ClickMode="Press"apixeltoofar

Set StaysOpen="True" for your Popup
From MSDN:
Gets or sets a value that indicates whether the Popup control closes
when the control is no longer in focus.
[...]
true if the Popup control closes when IsOpen property is set to false;
false if the Popup control closes when a mouse or keyboard event occurs outside the Popup control.

Calendar Control Event Issues in WPF C#

I'm trying to bind a TextBox to the selected date on a Calendar control, and when it initializes, there is no issue. The problem is that after, when I change the selected date, the TextBox remains at its initial value (today). I have tried 3 methods, including simply returning to TextBox.Text = Calendar.DisplayDate.ToString(), but the problem persists.
Does anybody know either what causes this, or a way around it?
Note that PropertyChanged is not null in Method 2.
My code is as follows, with the other two methods implemented:
XAML:
<Calendar Grid.Column="1" Height="170" HorizontalAlignment="Left" Name="calStart" VerticalAlignment="Top" Width="180" IsTodayHighlighted="False" SelectedDatesChanged="CalStartSelectedDatesChanged">
<Calendar.CalendarDayButtonStyle>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Converter={StaticResource conv}}" Value="1">
<Setter Property="Button.Background" Value="LightGreen" />
</DataTrigger>
</Style.Triggers>
</Style>
</Calendar.CalendarDayButtonStyle>
</Calendar>
<TextBox Height="23" HorizontalAlignment="Left" Margin="34,33,0,0" Text="{Binding StartBindProp, Mode=OneWay}" Name="txtStartDate" VerticalAlignment="Top" Width="120" Grid.Column="1" Grid.Row="1" />
C#
Method 1:
private void CalStartSelectedDatesChanged(object sender, SelectionChangedEventArgs e)
{
StartBindProp = calStart.DisplayDate.ToString();
}
public string StartBindProp
{
get { return (string)GetValue(StartBindPropProperty); }
set { SetValue(StartBindPropProperty, value); }
}
// Using a DependencyProperty as the backing store for StartBindProp. This enables animation, styling, binding, etc...
public static readonly DependencyProperty StartBindPropProperty =
DependencyProperty.Register("StartBindProp", typeof(string), typeof(MainControl), new UIPropertyMetadata(""));
Method 2:
private void CalEndSelectedDatesChanged(object sender, SelectionChangedEventArgs e)
{
EndBind = calEnd.DisplayDate.ToString();
}
private string m_EndBind = "endtest";
public string EndBind
{
get { return m_EndBind; }
set
{
m_EndBind = value;
if (null != PropertyChanged)
{
PropertyChanged(this, new PropertyChangedEventArgs("EndBind"));
}
}
}
Thanks for the help!
EDIT:
The following xaml has the same issue (and apparently renders the calendar read-only):
<TextBox Text="{Binding ElementName=calStart, Path=DisplayDate, Mode=OneWay}" />

Use Calendar.SelectedDate (or SelectedDates if multiple) instead of DisplayDate
I believe the DisplayDate is used to determine which date has the "selected" outline around it in the calendar (since multiple dates can be selected), while SelectedDate is the actual value of the control.
You can find the MSDN docs on the Calendar control here