bindable property for checkbox ischecked do not reflect when trigger used - wpf

My bindable property RevalSurfaceChecked do not get updated when we set IsChecked property in trigger
<CheckBox Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" x:Name="chkRevalSurface" Content="Export Reval Surface (if applicable)"
HorizontalAlignment="Left" VerticalAlignment="Center">
<CheckBox.IsEnabled>
<MultiBinding Converter="{StaticResource RevalSurfaceCheckboxEnableConverter}">
<Binding ElementName="ChkExportToCSV" Path="IsChecked"></Binding>
<Binding ElementName="chkExportToExcel" Path="IsChecked"></Binding>
</MultiBinding>
</CheckBox.IsEnabled>
<CheckBox.Style>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="IsChecked" Value="{Binding RevalSurfaceChecked}" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="IsChecked" Value="False"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</CheckBox.Style>
</CheckBox>
The logic here is that if I check any of the two checkbox, then the chkRevalSurface should get enabled else stay disabled-written in converter. When chkRevalSurface is disabled it should be set unchecked (written in trigger) and RevalSurfaceChecked property should be set to False. if checked set it to True in viewmodel.
ButRevalSurfaceCheckedis not set to true or false.

The problem is that the <Setter Property="IsChecked" Value="False"></Setter> clears the original binding, so your CheckBox's IsChecked property just ends up being False without changing the underlying property.
You mentioned you have a viewmodel, I assume the ChkExportToCSV and chkExportToExcel CheckBoxes are bound to a property in your viewmodel.
Lets assume this viewmodel:
public class MainWindowViewModel : INotifyPropertyChanged
{
private bool _revalSurfaceChecked;
public bool RevalSurfaceChecked
{
get { return _revalSurfaceChecked; }
set
{
_revalSurfaceChecked = value;
OnPropertyChanged();
}
}
private bool _isChkExportToCSVChecked;
public bool IsChkExportToCSVChecked
{
get { return _isChkExportToCSVChecked; }
set
{
_isChkExportToCSVChecked = value;
RevalSurfaceChecked = RevalSurfaceChecked && (_isChkExportToCSVChecked || _ischkExportToExcelChecked);
OnPropertyChanged();
}
}
private bool _ischkExportToExcelChecked;
public bool IschkExportToExcelChecked
{
get { return _ischkExportToExcelChecked; }
set
{
_ischkExportToExcelChecked = value;
RevalSurfaceChecked = RevalSurfaceChecked && (_isChkExportToCSVChecked || _ischkExportToExcelChecked);
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
if (PropertyChanged != null)
{
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
And this XAML:
<CheckBox x:Name="ChkExportToCSV" Content="ChkExportToCSV" IsChecked="{Binding IsChkExportToCSVChecked}"
HorizontalAlignment="Left" VerticalAlignment="Center" />
<CheckBox x:Name="chkExportToExcel" Content="chkExportToExcel" IsChecked="{Binding IschkExportToExcelChecked}"
HorizontalAlignment="Left" VerticalAlignment="Center" />
<CheckBox x:Name="chkRevalSurface" Content="Export Reval Surface (if applicable)"
HorizontalAlignment="Left" VerticalAlignment="Center"
IsChecked="{Binding RevalSurfaceChecked}">
<CheckBox.IsEnabled>
<MultiBinding Converter="{StaticResource AnyTrueConverter}">
<Binding ElementName="ChkExportToCSV" Path="IsChecked"></Binding>
<Binding ElementName="chkExportToExcel" Path="IsChecked"></Binding>
</MultiBinding>
</CheckBox.IsEnabled>
</CheckBox>
I'm binding the ChkExportToCSV's IsChecked property to the IsChkExportToCSVChecked property in the viewmodel and the chkExportToExcel's IsChecked to the IschkExportToExcelChecked property.
I removed the Style from chkRevalSurface and for the IsEnabled I use a converter that gives back true if any of the inputs are true. I assume your RevalSurfaceCheckboxEnableConverter does the same, but I'll include it here:
public class AnyTrueConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
return values != null && values.OfType<bool>().Any(b => b);
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
The trick is in the setter of IsChkExportToCSVChecked and IschkExportToExcelChecked:
RevalSurfaceChecked = RevalSurfaceChecked && (_isChkExportToCSVChecked || _ischkExportToExcelChecked);
We moved the logic from the DataTrigger to here. This should solve your problem. I tested and it works for me.

Related

WPF DataGridTemplateColumn MVVM DataContext Property Accessibility Issue

I am trying to get access to a Boolean property value inside each row so I can use it to set a button visibility, however I am having trouble accessing this with a DataGridTemplateColumn. I was able to get the entire row object into a parameter that I pass to the button command, however I can't get just the UseSetting value to pass to the Visibility converter. I tried piggy backing off the text column as shown below, however the converters only seem to fire when the view is first loaded. Using breakpoints I can see that subsequent changes to the UseSetting property do not fire the converters. I do have NotifyOfPropertyChange setup correctly on the custom class used in the DataGrid.
What is the best way to gain access to a row property when using DataGridTemplateColumn? The reason why I am creating my own check boxes inside a DataGridTemplateColumn instead of using a CheckboxColumn is because the CheckboxColumn requires the row to be selected before it can be checked, and I need my checkbox to check upon a single click.
To be clear, there is no code behind for this view. Everything is in the view model, like the data grid's item source which is an ObservableCollection of the custom class "SharedSetting" that I included below.
<DataGrid MaxHeight="400" VerticalScrollBarVisibility="Auto" BorderThickness="1" CanUserAddRows="False" CanUserDeleteRows="False" BorderBrush="{DynamicResource AccentBaseColorBrush}" GridLinesVisibility="Horizontal" AutoGenerateColumns="False" ItemsSource="{Binding SharedSettings, NotifyOnSourceUpdated=True}">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}" >
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="10" />
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.Columns>
<DataGridTextColumn Width="250" Header="Setting" Binding="{Binding Setting}" />
<DataGridTextColumn Width="300" Header="Value" ElementStyle="{StaticResource WrapText}" Binding="{Binding Value}" />
<DataGridTextColumn Width="75" Header="Use Setting" Binding="{Binding UseSetting, Mode=TwoWay}" x:Name="stackRowUseSetting" />
<DataGridTemplateColumn Width="50" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Width="30" Height="30" x:Name="stackRow2">
<Button Background="Transparent" Foreground="{StaticResource AccentColorBrush}" ToolTip="Do Not Use Setting" Visibility="{Binding ElementName=stackRowUseSetting, Path=Binding, Converter={StaticResource TrueToVisibleConverter}}" BorderThickness="0" Margin="0,0,0,0" DataContext="{Binding ElementName=MainGrid, Path=DataContext}" Command="{Binding ToggleUseSettingCommand}" CommandParameter="{Binding ElementName=stackRow2,Path=DataContext}">
<iconPacks:PackIconMaterial Kind="CheckCircleOutline" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Button>
<Button Background="Transparent" Foreground="{StaticResource AccentColorBrush}" ToolTip="Use Setting" Visibility="{Binding ElementName=stackRowUseSetting, Path=Binding, Converter={StaticResource FalseToVisibleConverter}}" BorderThickness="0" Margin="0,0,0,0" DataContext="{Binding ElementName=MainGrid, Path=DataContext}" Command="{Binding ToggleUseSettingCommand}" CommandParameter="{Binding ElementName=stackRow2,Path=DataContext}">
<iconPacks:PackIconMaterial Kind="CheckboxBlankCircleOutline" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Button>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
Also, the above XAML is just what I have right now. There are most likely some items here that are redundant and not needed. I have added and removed so many things trying to get this to work that it's a bit sloppy at the moment.
Here is the SharedSetting class with INotifyPropertyChanged
public class SharedSetting : INotifyPropertyChanged
{
private bool _useSetting;
private object _o;
private string _value;
private string _setting;
private string _group;
public SharedSetting(string groupName, string settingName, string settingValue, object value, bool use=false)
{
Group = groupName;
Setting = settingName;
Value = settingValue;
Object = value;
UseSetting = use;
}
public SharedSetting()
{
}
public string Group
{
get { return _group; }
set
{
_group = value;
NotifyPropertyChanged();
}
}
public string Setting
{
get { return _setting; }
set
{
_setting = value;
NotifyPropertyChanged();
}
}
public string Value
{
get { return _value; }
set
{
_value = value;
NotifyPropertyChanged();
}
}
public object Object
{
get { return _o; }
set
{
_o = value;
NotifyPropertyChanged();
}
}
public bool UseSetting
{
get { return _useSetting; }
set
{
_useSetting = value;
NotifyPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Here is one of the converters.
public sealed class TrueToVisibleConverter : MarkupExtension, IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var flag = false;
if (value is bool)
{
flag = (bool) value;
}
var visibility = (object) (Visibility) (flag ? 0 : 2);
return visibility;
}
public override object ProvideValue(IServiceProvider serviceProvider)
{
return this;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is Visibility)
{
var visibility = (object) ((Visibility) value == Visibility.Visible);
return visibility;
}
return (object) false;
}
}
UPDATE 3/14/18
To address the first answer supplied below regarding removing my DataContext setting and using the properties just like all of the other columns, that does not work. That was the first thing I tried long long ago only to learn that DataGridTemplateColumn doesn't inherit the row's data context like the other columns do (the reason for my frustration in my below comment yesterday). I've included a screenshot showing the intellisense error stating that the property doesn't exist, when it is used the same way as the column above it.
You overright DataContext for your Button. DataContext="{Binding ElementName=MainGrid, Path=DataContext}" is wrong, so delete it and bind to the property as you do it in DataGridTextColumn. And for the binding of Command to the command which is not in SharedSetting use ElementName(as you have done it for DataContext) or RelativeSource.
Update:
Should work, but alternatively you can try
<Button Visibility="{Binding DataContext.UseSetting, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGridRow}, Converter={StaticResource TrueToVisibleConverter}}" />

CheckBox binding not updating source

After changing CheckBox.IsChecked by DataTrigger source value to which CheckBox.IsChecked has binding is not changing.
I have simple ViewModel
public class ViewModel : INotifyPropertyChanged
{
private bool check1;
public bool Check1
{
get { return check1; }
set { check1 = value; NotifyPropertyChanged(); }
}
private bool check2;
public bool Check2
{
get { return check2; }
set { check2 = value; NotifyPropertyChanged(); }
}
#region Notify
...
#endregion
}
and simple XAML
<StackPanel Grid.Row="1">
<CheckBox Content="Check1">
<CheckBox.Style >
<Style TargetType="{x:Type CheckBox}">
<Setter Property="IsChecked" Value="{Binding Check1, Mode=TwoWay}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Check2}" Value="True">
<Setter Property="IsChecked" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</CheckBox.Style>
</CheckBox>
<CheckBox Content="Check2" IsChecked="{Binding Check2}"/>
<TextBlock Text="{Binding Check1}" Name="uiCheckValue1"/>
<TextBlock Text="{Binding Check2}" Name="uiCheckValue2"/>
</StackPanel>
When I check CheckBox2 the CheckBox1 becomes checked but source is not updated. How to make it update source?
Your code seems to be wrong. You should emit the PropertyChanged event properly to update the view.
Check below code :
public class ViewModel : INotifyPropertyChanged
{
private bool check1;
public bool Check1
{
get { return check1; }
set
{
check1 = value;
PropertyChanged(value, new PropertyChangedEventArgs("Check1"));
}
}
private bool check2;
public bool Check2
{
get { return check2; }
set
{
check2 = value;
PropertyChanged(value, new PropertyChangedEventArgs("Check1"));
}
}
#region Notify
...
#endregion
}
Also change the binding to TwoWay
<<CheckBox Content="Check2" IsChecked="{Binding Check2, Mode=TwoWay}"/>
<DataTrigger Binding="{Binding Check2, Mode=TwoWay}" Value="True">
<Setter Property="IsChecked" Value="True" />
</DataTrigger>
It's easy to say why: You loose the binding if you set IsChecked on True manually.
Delete the DataTrigger and change your ViewModel like this:
public bool Check2{
get { return check2; }
set {
check2 = value;
if (value == true) Check1 = true;
NotifyPropertyChanged();
}
}
A little late, but if you Change
<CheckBox Content="Check2" IsChecked="{Binding Check2}"/>
To
<CheckBox Content="Check2" IsChecked="{Binding Check2, UpdateSourceTrigger=PropertyChanged}"/>
you can get rid of all the code behind. The default for checkboxes is something like LostFocus, which is entirely annoying.

Enable/Disable controls on ComboBox selection in Xaml

How to enable /disable controls like textbox,label,textblock if combobox is selected/not-selected? e.g. If selected index is greater than zero, enable controls else disable.How to bind IsEnabled properties of the control with combobox selection?
You can bind IsEnabled to the SelectedIndex property of the ComboBox and use a IValueConverter to convert it to Boolean. For instance, in your XAML (showing enabling a Button):
<ComboBox x:Name="cmbBox" ItemsSource="{Binding Source={StaticResource DataList}}"/>
<Button Grid.Column="1" IsEnabled="{Binding ElementName=cmbBox, Path=SelectedIndex, Converter={StaticResource IndexToBoolConverter}}"/>
Then you need a converter as well, such as:
public class IndexToBoolConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if ((int)value > 0)
{
return true;
}
else
{
return false;
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
You'll also have declare the Converter as a resource, such as in your Window.
<local:IndexToBoolConverter x:Key="IndexToBoolConverter"/>
I would probably just do something like this.
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=SelectedItem,
ElementName=TheCombo}"
Value="{x:Null}">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<ComboBox x:Name="TheCombo" Width="100">
<ComboBoxItem>Blah</ComboBoxItem>
<ComboBoxItem>Blah</ComboBoxItem>
<ComboBoxItem>Blah</ComboBoxItem>
</ComboBox>
<Button Content="Click Me" Margin="0,10"/>
</StackPanel>
</Grid>
Hope this helps, cheers!
Try with this
Dispatcher.BeginInvoke(new Action(() =>
{
ToggleButton dropDownButton = GetFirstChildOfType<ToggleButton>(cboMedicos);
if (dropDownButton != null)
{
dropDownButton.IsEnabled = false;
}
}), System.Windows.Threading.DispatcherPriority.Render);
public static T GetFirstChildOfType<T>(DependencyObject dependencyObject) where T : DependencyObject
{
if (dependencyObject == null)
{
return null;
}
for (var i = 0; i < VisualTreeHelper.GetChildrenCount(dependencyObject); i++)
{
var child = VisualTreeHelper.GetChild(dependencyObject, i);
var result = (child as T) ?? GetFirstChildOfType<T>(child);
if (result != null)
{
return result;
}
}
return null;
}

How to write WPF DataTrigger within Border Style and how to Find Element in Setter?

I need a WPF DataTrigger for the Mouse Hover functionality of a Border. The Border Contains a Button, initially its Visibility is Collapsed. The Button should be Visible only on Mouse Hover otherwise Collapsed.
<Border Width="100" Height="30" HorizontalAlignment="Center" VerticalAlignment="Top" Background="#FFF2FFC6" Margin="0,20,0,0">
<Button x:Name="btn" Content="iApp" HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" Visibility="Collapsed" />
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True">
<Setter TargetName="btn" Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
Note: I need only DataTrigger. Don't suggest Event Trigger.
Here I Can't able to find the TargetName, it produces the Build Error "Error 1 The name "btn" is not recognized"
TragetName cannot be used in Style.Triggers. It should be used in ControlTemplete.Triggers.
You can write code like this(Not test).
Add the namespace in you xaml
xmlns:converter="clr-namespace:yours coverter's namespace"
Add the converter in your resources
<UserControl.Resources>
<converter:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</UserControl.Resources>
This is your border:
<Border x:Name="m_Border" Margin="0,20,0,0">
<Button x:Name="btn" Content="iApp" Visibility="{Binding IsMouseOver,ElementName=m_Border,Converter="{StaticResource BooleanToVisibilityConverter},ConverterParameter=Normal}"}" />
</Border>
Using this converter
public enum BooleanToVisibilityConverterType
{
/// <summary>
/// Normal
/// </summary>
Normal = 1,
/// <summary>
/// Reverse
/// </summary>
Reverse = 2
}
public class BooleanToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var targertValue = false;
if (value == null)
{
throw new Exception("BooleanToVisibilityConverter - Convert Error");
}
else if (!Boolean.TryParse(value.ToString(), out targertValue))
{
throw new Exception("BooleanToVisibilityConverter - Convert Error");
}
else
{
var parameterValue = BooleanToVisibilityConverterType.Normal;
if (parameter != null)
{
Enum.TryParse<BooleanToVisibilityConverterType>(parameter.ToString(), out parameterValue);
}
if (parameterValue == BooleanToVisibilityConverterType.Reverse)
{
return targertValue ? Visibility.Collapsed : Visibility.Visible;
}
else
{
return targertValue ? Visibility.Visible : Visibility.Collapsed;
}
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
var targetValue = Visibility.Collapsed;
if (value == null)
{
throw new Exception("BooleanToVisibilityConverter - ConvertBack Error");
}
else if (!Enum.TryParse<Visibility>(value.ToString(), out targetValue))
{
throw new Exception("BooleanToVisibilityConverter - ConvertBack Error");
}
else
{
var parameterValue = BooleanToVisibilityConverterType.Normal;
if (parameter != null)
{
Enum.TryParse<BooleanToVisibilityConverterType>(parameter.ToString(), out parameterValue);
}
if (parameterValue == BooleanToVisibilityConverterType.Reverse)
{
return targetValue == Visibility.Visible ? false : true;
}
else
{
return targetValue == Visibility.Visible ? true : false;
}
}
}
TargetName is mostly used within control templates and not simply within styles.
From MSDN:
You can set this property to the name of any element within the scope
of where the setter collection (the collection that this setter is
part of) is applied. This is typically a named element that is within
the template that contains this setter.
Also, to achieve your need, you should set trigger to Button not for Border
<Border x:Name="border" Width="100" Height="30" HorizontalAlignment="Center" VerticalAlignment="Top" Background="#FFF2FFC6" Margin="0,20,0,0">
<Button x:Name="btn" Content="iApp" HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" >
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=border, Path=IsMouseOver}" Value="false">
<Setter Property="Button.Visibility" Value="Collapsed"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Border>

Simple WPF RadioButton Binding?

What is the simplest way to bind a group of 3 radiobuttons to a property of type int for values 1, 2, or 3?
I came up with a simple solution.
I have a model.cs class with:
private int _isSuccess;
public int IsSuccess { get { return _isSuccess; } set { _isSuccess = value; } }
I have Window1.xaml.cs file with DataContext set to model.cs. The xaml contains the radiobuttons:
<RadioButton IsChecked="{Binding Path=IsSuccess, Converter={StaticResource radioBoolToIntConverter}, ConverterParameter=1}" Content="one" />
<RadioButton IsChecked="{Binding Path=IsSuccess, Converter={StaticResource radioBoolToIntConverter}, ConverterParameter=2}" Content="two" />
<RadioButton IsChecked="{Binding Path=IsSuccess, Converter={StaticResource radioBoolToIntConverter}, ConverterParameter=3}" Content="three" />
Here is my converter:
public class RadioBoolToIntConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
int integer = (int)value;
if (integer==int.Parse(parameter.ToString()))
return true;
else
return false;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return parameter;
}
}
And of course, in Window1's resources:
<Window.Resources>
<local:RadioBoolToIntConverter x:Key="radioBoolToIntConverter" />
</Window.Resources>
I am very surprised nobody came up with this kind of solution to bind it against bool array. It might not be the cleanest, but it can be used very easily:
private bool[] _modeArray = new bool[] { true, false, false};
public bool[] ModeArray
{
get { return _modeArray ; }
}
public int SelectedMode
{
get { return Array.IndexOf(_modeArray, true); }
}
in XAML:
<RadioButton GroupName="Mode" IsChecked="{Binding Path=ModeArray[0], Mode=TwoWay}"/>
<RadioButton GroupName="Mode" IsChecked="{Binding Path=ModeArray[1], Mode=TwoWay}"/>
<RadioButton GroupName="Mode" IsChecked="{Binding Path=ModeArray[2], Mode=TwoWay}"/>
NOTE: you don't need two-way binding if you don't want to one checked by default. TwoWay binding is the biggest con of this solution.
Pros:
No need for code behind
No need for extra class (IValue Converter)
No need for extra enums
doesn't require bizarre binding
straightforward and easy to understand
doesn't violate MVVM (heh, at least I hope so)
Actually, using the converter like that breaks two-way binding, plus as I said above, you can't use that with enumerations either. The better way to do this is with a simple style against a ListBox, like this:
Note: Contrary to what DrWPF.com stated in their example, do not put the ContentPresenter inside the RadioButton or else if you add an item with content such as a button or something else, you will not be able to set focus or interact with it. This technique solves that. Also, you need to handle the graying of the text as well as removing of margins on labels or else it will not render correctly. This style handles both for you as well.
<Style x:Key="RadioButtonListItem" TargetType="{x:Type ListBoxItem}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<DockPanel LastChildFill="True" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Center" >
<RadioButton IsChecked="{TemplateBinding IsSelected}" Focusable="False" IsHitTestVisible="False" VerticalAlignment="Center" Margin="0,0,4,0" />
<ContentPresenter
Content = "{TemplateBinding ContentControl.Content}"
ContentTemplate = "{TemplateBinding ContentControl.ContentTemplate}"
ContentStringFormat = "{TemplateBinding ContentControl.ContentStringFormat}"
HorizontalAlignment = "{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment = "{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels = "{TemplateBinding UIElement.SnapsToDevicePixels}" />
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadioButtonList" TargetType="ListBox">
<Style.Resources>
<Style TargetType="Label">
<Setter Property="Padding" Value="0" />
</Style>
</Style.Resources>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="ItemContainerStyle" Value="{StaticResource RadioButtonListItem}" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextBlock.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="HorizontalRadioButtonList" BasedOn="{StaticResource RadioButtonList}" TargetType="ListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Background="Transparent" Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
You now have the look and feel of radio buttons, but you can do two-way binding, and you can use an enumeration. Here's how...
<ListBox Style="{StaticResource RadioButtonList}"
SelectedValue="{Binding SomeVal}"
SelectedValuePath="Tag">
<ListBoxItem Tag="{x:Static l:MyEnum.SomeOption}" >Some option</ListBoxItem>
<ListBoxItem Tag="{x:Static l:MyEnum.SomeOtherOption}">Some other option</ListBoxItem>
<ListBoxItem Tag="{x:Static l:MyEnum.YetAnother}" >Yet another option</ListBoxItem>
</ListBox>
Also, since we explicitly separated out the style that tragets the ListBoxItem rather than putting it inline, again as the other examples have shown, you can now create a new style off of it to customize things on a per-item basis such as spacing. (This will not work if you simply try to target ListBoxItem as the keyed style overrides generic control targets.)
Here's an example of putting a margin of 6 above and below each item. (Note how you have to explicitly apply the style via the ItemContainerStyle property and not simply targeting ListBoxItem in the ListBox's resource section for the reason stated above.)
<Window.Resources>
<Style x:Key="SpacedRadioButtonListItem" TargetType="ListBoxItem" BasedOn="{StaticResource RadioButtonListItem}">
<Setter Property="Margin" Value="0,6" />
</Style>
</Window.Resources>
<ListBox Style="{StaticResource RadioButtonList}"
ItemContainerStyle="{StaticResource SpacedRadioButtonListItem}"
SelectedValue="{Binding SomeVal}"
SelectedValuePath="Tag">
<ListBoxItem Tag="{x:Static l:MyEnum.SomeOption}" >Some option</ListBoxItem>
<ListBoxItem Tag="{x:Static l:MyEnum.SomeOtherOption}">Some other option</ListBoxItem>
<ListBoxItem Tag="{x:Static l:MyEnum.YetAnother}" >Ter another option</ListBoxItem>
</ListBox>
I know it's way way overdue, but I have an alternative solution, which is lighter and simpler. Derive a class from System.Windows.Controls.RadioButton and declare two dependency properties RadioValue and RadioBinding. Then in the class code, override OnChecked and set the RadioBinding property value to that of the RadioValue property value. In the other direction, trap changes to the RadioBinding property using a callback, and if the new value is equal to the value of the RadioValue property, set its IsChecked property to true.
Here's the code:
public class MyRadioButton : RadioButton
{
public object RadioValue
{
get { return (object)GetValue(RadioValueProperty); }
set { SetValue(RadioValueProperty, value); }
}
// Using a DependencyProperty as the backing store for RadioValue.
This enables animation, styling, binding, etc...
public static readonly DependencyProperty RadioValueProperty =
DependencyProperty.Register(
"RadioValue",
typeof(object),
typeof(MyRadioButton),
new UIPropertyMetadata(null));
public object RadioBinding
{
get { return (object)GetValue(RadioBindingProperty); }
set { SetValue(RadioBindingProperty, value); }
}
// Using a DependencyProperty as the backing store for RadioBinding.
This enables animation, styling, binding, etc...
public static readonly DependencyProperty RadioBindingProperty =
DependencyProperty.Register(
"RadioBinding",
typeof(object),
typeof(MyRadioButton),
new FrameworkPropertyMetadata(
null,
FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,
OnRadioBindingChanged));
private static void OnRadioBindingChanged(
DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
MyRadioButton rb = (MyRadioButton)d;
if (rb.RadioValue.Equals(e.NewValue))
rb.SetCurrentValue(RadioButton.IsCheckedProperty, true);
}
protected override void OnChecked(RoutedEventArgs e)
{
base.OnChecked(e);
SetCurrentValue(RadioBindingProperty, RadioValue);
}
}
XAML usage:
<my:MyRadioButton GroupName="grp1" Content="Value 1"
RadioValue="val1" RadioBinding="{Binding SelectedValue}"/>
<my:MyRadioButton GroupName="grp1" Content="Value 2"
RadioValue="val2" RadioBinding="{Binding SelectedValue}"/>
<my:MyRadioButton GroupName="grp1" Content="Value 3"
RadioValue="val3" RadioBinding="{Binding SelectedValue}"/>
<my:MyRadioButton GroupName="grp1" Content="Value 4"
RadioValue="val4" RadioBinding="{Binding SelectedValue}"/>
Hope someone finds this useful after all this time :)
I've come up with solution using Binding.DoNothing returned from converter which doesn't break two-way binding.
public class EnumToCheckedConverter : IValueConverter
{
public Type Type { get; set; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value != null && value.GetType() == Type)
{
try
{
var parameterFlag = Enum.Parse(Type, parameter as string);
if (Equals(parameterFlag, value))
{
return true;
}
}
catch (ArgumentNullException)
{
return false;
}
catch (ArgumentException)
{
throw new NotSupportedException();
}
return false;
}
else if (value == null)
{
return false;
}
throw new NotSupportedException();
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value != null && value is bool check)
{
if (check)
{
try
{
return Enum.Parse(Type, parameter as string);
}
catch(ArgumentNullException)
{
return Binding.DoNothing;
}
catch(ArgumentException)
{
return Binding.DoNothing;
}
}
return Binding.DoNothing;
}
throw new NotSupportedException();
}
}
Usage:
<converters:EnumToCheckedConverter x:Key="SourceConverter" Type="{x:Type monitor:VariableValueSource}" />
Radio button bindings:
<RadioButton GroupName="ValueSource"
IsChecked="{Binding Source, Converter={StaticResource SourceConverter}, ConverterParameter=Function}">Function</RadioButton>
This example might be seem a bit lengthy, but its intention should be quite clear.
It uses 3 Boolean properties in the ViewModel called, FlagForValue1, FlagForValue2 and FlagForValue3.
Each of these 3 properties is backed by a single private field called _intValue.
The 3 Radio buttons of the view (xaml) are each bound to its corresponding Flag property in the view model. This means the radio button displaying "Value 1" is bound to the FlagForValue1 bool property in the view model and the other two accordingly.
When setting one of the properties in the view model (e.g. FlagForValue1), its important to also raise property changed events for the other two properties (e.g. FlagForValue2, and FlagForValue3) so the UI (WPF INotifyPropertyChanged infrastructure) can selected / deselect each radio button correctly.
private int _intValue;
public bool FlagForValue1
{
get
{
return (_intValue == 1) ? true : false;
}
set
{
_intValue = 1;
RaisePropertyChanged("FlagForValue1");
RaisePropertyChanged("FlagForValue2");
RaisePropertyChanged("FlagForValue3");
}
}
public bool FlagForValue2
{
get
{
return (_intValue == 2) ? true : false;
}
set
{
_intValue = 2;
RaisePropertyChanged("FlagForValue1");
RaisePropertyChanged("FlagForValue2");
RaisePropertyChanged("FlagForValue3");
}
}
public bool FlagForValue3
{
get
{
return (_intValue == 3) ? true : false;
}
set
{
_intValue = 3;
RaisePropertyChanged("FlagForValue1");
RaisePropertyChanged("FlagForValue2");
RaisePropertyChanged("FlagForValue3");
}
}
The xaml looks like this:
<RadioButton GroupName="Search" IsChecked="{Binding Path=FlagForValue1, Mode=TwoWay}"
>Value 1</RadioButton>
<RadioButton GroupName="Search" IsChecked="{Binding Path=FlagForValue2, Mode=TwoWay}"
>Value 2</RadioButton>
<RadioButton GroupName="Search" IsChecked="{Binding Path=FlagForValue3, Mode=TwoWay}"
>Value 3</RadioButton>
Sometimes it is possible to solve it in the model like this:
Suppose you have 3 boolean properties OptionA, OptionB, OptionC.
XAML:
<RadioButton IsChecked="{Binding OptionA}"/>
<RadioButton IsChecked="{Binding OptionB}"/>
<RadioButton IsChecked="{Binding OptionC}"/>
CODE:
private bool _optionA;
public bool OptionA
{
get { return _optionA; }
set
{
_optionA = value;
if( _optionA )
{
this.OptionB= false;
this.OptionC = false;
}
}
}
private bool _optionB;
public bool OptionB
{
get { return _optionB; }
set
{
_optionB = value;
if( _optionB )
{
this.OptionA= false;
this.OptionC = false;
}
}
}
private bool _optionC;
public bool OptionC
{
get { return _optionC; }
set
{
_optionC = value;
if( _optionC )
{
this.OptionA= false;
this.OptionB = false;
}
}
}
You get the idea.
Not the cleanest thing, but easy.
Aviad P.s answer works very well. However I had to change the equality check to compare strings in OnRadioBindingChanged otherwise the enum was compared to the string value and no radio button was checked initially.
private static void OnRadioBindingChanged(
DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
BindableRadioButton rb = (BindableRadioButton) d;
if (rb.RadioValue.Equals(e.NewValue?.ToString()))
{
rb.SetCurrentValue(IsCheckedProperty, true);
}
}
Answer 2.0
While I provided the answer above that is quite powerful being a re-templated ListBox, it's still far from ideal for simple radio buttons. As such, I've come up with a much-simpler solution that instead uses a MarkupExtension subclass that implements IValueConverter and which is armed with the power of Binding.DoNothing, the magic sauce that makes two-way bindings work.
Binding to Scalar Values
Let's take a look at the converter itself for binding to scalars...
public class RadioButtonConverter : MarkupExtension, IValueConverter {
public RadioButtonConverter(object optionValue)
=> OptionValue = optionValue;
public object OptionValue { get; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
=> value.Equals(OptionValue);
public object ConvertBack(object isChecked, Type targetType, object parameter, CultureInfo culture)
=> (bool)isChecked
? OptionValue
: Binding.DoNothing; // Only send value back if this is the checked option, otherwise do nothing
public override object ProvideValue(IServiceProvider serviceProvider)
=> this;
}
The magic sauce is in the use of Binding.DoNothing in the ConvertBack function. Since with RadioButton controls, there can only be one active option per 'group' (i.e. only one with IsChecked set to true), we ensure only that RadioButton's binding updates the source. Those on the other RadioButton instances simply do nothing.
Here's how you use it to bind to an int value as the OP asked (below, 'cv' is the imported namespace where the converter code resides, and the value you pass to the converter is the value that particular RadioButton represents)...
<RadioButton Content="One" IsChecked="{Binding SomeIntProp, Converter={cv:RadioButtonConverter 1}}" />
<RadioButton Content="Two" IsChecked="{Binding SomeIntProp, Converter={cv:RadioButtonConverter 2}}" />
<RadioButton Content="Three" IsChecked="{Binding SomeIntProp, Converter={cv:RadioButtonConverter 3}}" />
Simplifying the Binding
While the above works, that's a lot of repeated code and for 90% of the time, you aren't doing anything special with the binding or converter. As such, let's try to simplify things with a RadioButtonBinding that sets up the converter for you. Here's the code...
public class RadioButtonBinding : Binding {
public RadioButtonBinding(string path, object optionValue)
: base(path)
=> Converter = new RadioButtonConverter(optionValue);
}
With this new binding, the call site is greatly simplified (here, 'b' is the imported namespace where the binding code resides)...
<RadioButton Content="One" IsChecked="{b:RadioButtonBinding SomeIntProp, 1}" />
<RadioButton Content="Two" IsChecked="{b:RadioButtonBinding SomeIntProp, 2}" />
<RadioButton Content="Three" IsChecked="{b:RadioButtonBinding SomeIntProp, 3}" />
Note: Make sure you don't also set the Converter argument or you will defeat the entire point of using this!
Binding to Enum Values
The above example dealt with basic scalars (e.g. 1, 2, 3.) However, what if the value we want to is an enumeration such as the following?
public enum TestEnum {
yes,
no,
maybe,
noIdea
}
The syntax is the same, but at the call-site, we need to be more specific about the value we're binding to making it much more verbose. (For instance, if you try and pass 'yes' by itself, it will be treated as a string, not an enum, so it will fail the equality check.)
Here's the converter version's call-site (here, 'v' is the imported namespace where the enum values reside)...
<RadioButton Content="Yes" IsChecked="{Binding SomeEnumProp, Converter={cv:RadioButtonConverter {x:Static v:TestEnum.yes}}}" />
<RadioButton Content="No" IsChecked="{Binding SomeEnumProp, Converter={cv:RadioButtonConverter {x:Static v:TestEnum.no}}}" />
<RadioButton Content="Maybe" IsChecked="{Binding SomeEnumProp, Converter={cv:RadioButtonConverter {x:Static v:TestEnum.maybe}}}" />
<RadioButton Content="No Idea" IsChecked="{Binding SomeEnumProp, Converter={cv:RadioButtonConverter {x:Static v:TestEnum.noIdea}}}" />
And while simpler, here's the binding version's call-site, better, but still verbose...
<RadioButton Content="Yes" IsChecked="{b:RadioButtonBinding SomeEnumProp, {x:Static v:TestEnum.yes}}" />
<RadioButton Content="No" IsChecked="{b:RadioButtonBinding SomeEnumProp, {x:Static v:TestEnum.no}}" />
<RadioButton Content="Maybe" IsChecked="{b:RadioButtonBinding SomeEnumProp, {x:Static v:TestEnum.maybe}}" />
<RadioButton Content="No Idea" IsChecked="{b:RadioButtonBinding SomeEnumProp, {x:Static v:TestEnum.noIdea}}" />
Enum-Type-Specific variants
If you know you will be binding to a particular enum type on many occasions, you can simplify the above by subclassing the earlier converter and binding to be enum-specific variants.
Below is doing exactly that with TestEnum defined above, like so...
// TestEnum-specific Converter
public class TestEnumConverter : RadioButtonConverter {
public TestEnumConverter(TestEnum optionValue)
: base(optionValue) {}
}
// TestEnum-specific Binding
public class TestEnumBinding : RadioButtonBinding {
public TestEnumBinding(string path, TestEnum value)
: base(path, value) { }
}
And here are the call sites...
<!- Converter Variants -->
<RadioButton Content="Yes" IsChecked="{Binding SomeTestEnumProp, Converter={cv:TestEnumConverter yes}}" />
<RadioButton Content="No" IsChecked="{Binding SomeTestEnumProp, Converter={cv:TestEnumConverter no}}" />
<RadioButton Content="Maybe" IsChecked="{Binding SomeTestEnumProp, Converter={cv:TestEnumConverter maybe}}" />
<RadioButton Content="No Idea" IsChecked="{Binding SomeTestEnumProp, Converter={cv:TestEnumConverter noIdea}}" />
<!- Binding Variants -->
<RadioButton Content="Yes" IsChecked="{b:TestEnumBinding SomeTestEnumProp, yes}" />
<RadioButton Content="No" IsChecked="{b:TestEnumBinding SomeTestEnumProp, no}" />
<RadioButton Content="Maybe" IsChecked="{b:TestEnumBinding SomeTestEnumProp, maybe}" />
<RadioButton Content="No Idea" IsChecked="{b:TestEnumBinding SomeTestEnumProp, noIdea}" />
As you can see, the XAML parser automatically handles the string-to-enum conversion for you making your code much simpler to read. Can't get much simpler than that! :)
Sidenote: One nice thing about the versions where you explicitly specify the enum value in its more-verbose declaration is you get auto-complete for the enum's cases. You don't get that with the enum-type-specific versions that convert the string for you. However, the latter will fail to compile if you use an invalid string value so the tradeoff is brevity vs auto-complete convenience.
I created an attached property based on Aviad's Answer which doesn't require creating a new class
public static class RadioButtonHelper
{
[AttachedPropertyBrowsableForType(typeof(RadioButton))]
public static object GetRadioValue(DependencyObject obj) => obj.GetValue(RadioValueProperty);
public static void SetRadioValue(DependencyObject obj, object value) => obj.SetValue(RadioValueProperty, value);
public static readonly DependencyProperty RadioValueProperty =
DependencyProperty.RegisterAttached("RadioValue", typeof(object), typeof(RadioButtonHelper), new PropertyMetadata(new PropertyChangedCallback(OnRadioValueChanged)));
private static void OnRadioValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is RadioButton rb)
{
rb.Checked -= OnChecked;
rb.Checked += OnChecked;
}
}
public static void OnChecked(object sender, RoutedEventArgs e)
{
if (sender is RadioButton rb)
{
rb.SetCurrentValue(RadioBindingProperty, rb.GetValue(RadioValueProperty));
}
}
[AttachedPropertyBrowsableForType(typeof(RadioButton))]
public static object GetRadioBinding(DependencyObject obj) => obj.GetValue(RadioBindingProperty);
public static void SetRadioBinding(DependencyObject obj, object value) => obj.SetValue(RadioBindingProperty, value);
public static readonly DependencyProperty RadioBindingProperty =
DependencyProperty.RegisterAttached("RadioBinding", typeof(object), typeof(RadioButtonHelper), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnRadioBindingChanged)));
private static void OnRadioBindingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is RadioButton rb && rb.GetValue(RadioValueProperty).Equals(e.NewValue))
{
rb.SetCurrentValue(RadioButton.IsCheckedProperty, true);
}
}
}
usage :
<RadioButton GroupName="grp1" Content="Value 1"
helpers:RadioButtonHelper.RadioValue="val1" helpers:RadioButtonHelper.RadioBinding="{Binding SelectedValue}"/>
<RadioButton GroupName="grp1" Content="Value 2"
helpers:RadioButtonHelper.RadioValue="val2" helpers:RadioButtonHelper.RadioBinding="{Binding SelectedValue}"/>
<RadioButton GroupName="grp1" Content="Value 3"
helpers:RadioButtonHelper.RadioValue="val3" helpers:RadioButtonHelper.RadioBinding="{Binding SelectedValue}"/>
<RadioButton GroupName="grp1" Content="Value 4"
helpers:RadioButtonHelper.RadioValue="val4" helpers:RadioButtonHelper.RadioBinding="{Binding SelectedValue}"/>

Resources