Develop Reference

Binding Data to Button Style with DataTrigger

I'm building a menu with WPF but I want to simplify the code creating a new style.
At the moment, the menu is working great:
<Button Name="btnMenu1" Grid.Row="0" Content="Button One" Click="BtnMenu1_Click">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding [0].Selected}" Value="True">
<Setter Property="Foreground" Value="Yellow" />
</DataTrigger>
<DataTrigger Binding="{Binding [0].Selected}" Value="False">
<Setter Property="Foreground" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button Name="btnMenu2" Grid.Row="1" Content="Button Two" Click="BtnMenu2_Click">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding [1].Selected}" Value="True">
<Setter Property="Foreground" Value="Yellow" />
</DataTrigger>
<DataTrigger Binding="{Binding [1].Selected}" Value="False">
<Setter Property="Foreground" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Imagine that I need to add 10 or 15 buttons to the menu, can you imagine the amount of code?
My idea is to simplify the code:
<Button Name="btnMenu1" Grid.Row="0" Style="{StaticResource StyleButtonMenu}" Content="Button One" Click="BtnMenu1_Click"/>
<Button Name="btnMenu2" Grid.Row="1" Style="{StaticResource StyleButtonMenu}" Content="Button Two" Click="BtnMenu2_Click"/>
<Button Name="btnMenu3" Grid.Row="2" Style="{StaticResource StyleButtonMenu}" Content="Button Three" Click="BtnMenu3_Click"/>
<Button Name="btnMenu4" Grid.Row="3" Style="{StaticResource StyleButtonMenu}" Content="Button Four" Click="BtnMenu4_Click"/>
<Button Name="btnMenu5" Grid.Row="4" Style="{StaticResource StyleButtonMenu}" Content="Button Five" Click="BtnMenu5_Click"/>
And the code style could be something like this:
<Style x:Key="StyleButtonMenu" TargetType="Button">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Cursor" Value="Hand" />
<Style.Triggers>
<DataTrigger Binding="{Binding Selected}" Value="True">
<Setter Property="Foreground" Value="Yellow"/>
</DataTrigger>
<DataTrigger Binding="{Binding Selected}" Value="False">
<Setter Property="Foreground" Value="Blue"/>
</DataTrigger>
</Style.Triggers>
</Style>
My problem here is: How can I work with Bindings in DataTrigger to treat the property Selected?
I have a List with properties and when some property change, I need to update UI.
As I said at the top, the code works great, I just want to create a generic style and treat bindings in DataTrigger.

For your pretty static example, your could bind the Tag in your style using a DataTrigger.
<Style x:Key="StyleButtonMenu" TargetType="Button">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Foreground" Value="Blue"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Tag.Selected, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="Foreground" Value="Yellow"/>
</DataTrigger>
</Style.Triggers>
</Style>
Then, you could bind the concrete data context to the Tag of each button.
<Button Name="btnMenu1" Grid.Row="0" Tag="{Binding [0]}" Style="{StaticResource StyleButtonMenu}" Content="Button One" Click="BtnMenu1_Click"/>
<Button Name="btnMenu2" Grid.Row="1" Tag="{Binding [1]}" Style="{StaticResource StyleButtonMenu}" Content="Button Two" Click="BtnMenu2_Click"/>
<Button Name="btnMenu3" Grid.Row="2" Tag="{Binding [2]}" Style="{StaticResource StyleButtonMenu}" Content="Button Three" Click="BtnMenu3_Click"/>
<Button Name="btnMenu4" Grid.Row="3" Tag="{Binding [3]}" Style="{StaticResource StyleButtonMenu}" Content="Button Four" Click="BtnMenu4_Click"/>
<Button Name="btnMenu5" Grid.Row="4" Tag="{Binding [4]}" Style="{StaticResource StyleButtonMenu}" Content="Button Five" Click="BtnMenu5_Click"/>
However, there is a better way. Whenever you try to display a collection of data items, consider using an ItemsControl or any derived type that is appropriate for your use-case. Here, you could use an ItemsControl with a data template, since you do not need selection or anything special.
<Style x:Key="MenuButtonStyle" TargetType="Button">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Foreground" Value="Blue"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Selected}" Value="True">
<Setter Property="Foreground" Value="Yellow"/>
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="MenuItemTemplate">
<Button Style="{StaticResource MenuButtonStyle}"
Content="{Binding Name}"
Command="{Binding DoSomething}"
CommandParameter="{Binding}">
</Button>
</DataTemplate>
This data template assumes that your menu item data types contain a Name, DoSomething and the Selected property from your question. Depending on your requirements, the DoSomething command might also be definded on the parent data context. This command would handle the button click.
Instead of a Grid with hard-coded buttons, you can now bind the items collection (here MenuItems) to an ItemsControl with the aforementioned data template for your items.
<ItemsControl ItemsSource="{Binding MenuItems}"
ItemTemplate="{StaticResource MenuItemTemplate}"/>

WPF Radio Button Group How to enable a TextBox when any item gets selected?

I have no issues getting this functionality to work with textboxes and comboboxes by simply binding the IsEnabled Property of the control I want to stay hidden until something is selected to the .Text Property, like so:
<Label Content="Please Select the status for this client:" Margin="0,0,65,0" IsEnabled="{Binding CBCustomer.Text}" />
So basically this item will not show until someone selects something in the ComboBox.
How do I get the same functionality to work with a group of radio buttons? Basically I have a stackpanel that I want the IsEnabled property(shown as XXXXXX) to be bound to a Boolean value of whether any button was selected.
<StackPanel Orientation="Horizontal" Canvas.Left="54" Canvas.Top="40" Margin="0,0,0,50">
<Label Content="Please Select the RAG Status for this client:" Margin="0,0,65,0" IsEnabled="{Binding CBCustomer.Text}" />
<RadioButton GroupName="RAGGroup" Margin="0,8,0,0" Background="Red" Foreground="Red" IsEnabled="{Binding CBCustomer.Text}">Red</RadioButton>
<RadioButton GroupName="RAGGroup" Margin="10,8,0,0" Background="DarkGoldenrod" Foreground="DarkGoldenrod" IsEnabled="{Binding CBCustomer.Text}">Amber</RadioButton>
<RadioButton GroupName="RAGGroup" Margin="10,8,0,0" Background="Green" Foreground="Green" IsEnabled="{Binding CBCustomer.Text}">Green</RadioButton>
</StackPanel>
<StackPanel Margin="55,80,0,0" IsEnabled="{Binding XXXXXXX}">
Use a Multi-Binding? I see examples that show how to get the value back from the button that was selected but I don't care about that, I simply need to see whether the value was selected or not.

If you want to bind to other elements, you can use DataTriggers:
<RadioButton x:Name="RB1"/>
<RadioButton x:Name="RB2"/>
<RadioButton x:Name="RB3"/>
<StackPanel>
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="IsEnabled" Value="False"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=RB1, Path=IsChecked}" Value="True">
<Setter Property="IsEnabled" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=RB2, Path=IsChecked}" Value="True">
<Setter Property="IsEnabled" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=RB3, Path=IsChecked}" Value="True">
<Setter Property="IsEnabled" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
But I almost always bind to the data layer, like:
<RadioButton IsChecked="{Binding RAG, Converter=...}"/>
<RadioButton IsChecked="{Binding RAG, Converter=...}"/>
<RadioButton IsChecked="{Binding RAG, Converter=...}"/>
<StackPanel>
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="IsEnabled" Value="True"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RAG}" Value="{x:Null}">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>

How to properly apply a DataTrigger binding inside a WPF style for a different component type?

I'm still a little green when it comes to WPF. I'm currently working on a WPF form that has several text boxes on it. Each of those TextBoxes are paired with a TextBlock sitting in the same x,y coord, acting as GhostText. Once you click inside the TextBox the GhostText disappears.
Below is an example of how the binding was originally setup in the form's XAML (this same code is duplicated for all text boxes thus the reasoning behind using a style) :
<TextBox Grid.Column="0" Width="40" Height="25" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name= "RecordMinutesTextBox" Padding="12,5,5,0" Text ="{Binding RecordMinute}" Margin="0,25,5,1" PreviewTextInput="CheckNumberValidation" Background="{Binding ElementName=FireWashingtonResponseTimeReport,Path=DataContext.RequiredFieldColor}"/>
<TextBlock Grid.Column="0" Width="40" IsHitTestVisible="False" Text="MIN" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="DarkGray" Margin="8,25,0,1" >
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=RecordMinutesTextBox}" Value="">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
*Note the name of one of the many text boxes,"RecordMinutesTextBox", used as the ElementName for the DataTrigger Binding.
Here is the code from inside my WPF Style template:
<Style x:Key="MinuteAndSecondsGhostText" TargetType="TextBlock">
<Setter Property="Width" Value="40"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Foreground" Value="DarkGray"/>
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=??WhatDoIPutHere??}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>enter code here
So my question really comes down to this. What should I use in the DataTrigger Binding as the ElementName for this style? Considering that I have multiple TextBoxes with different names on my form. Thanks in advance.

I give you an idea... and you can change your codes base on it.
In my following sample you see the TextBlock shows state of IsFocused property of the TextBox. So you can put the pair of your elements in a parent like StackPanel and access to properties of one child in another child by RelativeSource instead of ElementName...
Just put this codes in your window and focus in TextBox, What you see inside the TextBlock?
<StackPanel Orientation="Horizontal" Background="White" Margin="20">
<TextBox Text="" Name="TextBox" Background="DarkSalmon" Width="100" Height="30"/>
<TextBlock Text="{Binding Path=Children[0].IsFocused,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type StackPanel}}}"
Margin="20,0"/>
</StackPanel>
Edit:
Base on my above idea you can use RelativeSource instead of ElementName to resolve your problem like the following sample:
<Style x:Key="MinuteAndSecondsGhostText" TargetType="TextBlock">
<Setter Property="Width" Value="40"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Foreground" Value="DarkGray"/>
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Children[0].Text,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type StackPanel}}}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
And in your Window body:
<StackPanel x:Name="Pair1" Orientation="Horizontal" Background="White" Margin="20">
<!--TextBox should be first child of StackPanel-->
<TextBox Text="" Name="TextBox1" Background="DarkSalmon" Width="100" Height="30"/>
<TextBlock Text="Sample Text" Style="{StaticResource MinuteAndSecondsGhostText}" Margin="20,0"/>
</StackPanel>
<StackPanel x:Name="Pair2" Orientation="Horizontal" Background="White" Margin="20">
<!--TextBox should be first child of StackPanel-->
<TextBox Text="" Name="TextBox2" Background="DarkSalmon" Width="100" Height="30"/>
<TextBlock Text="Sample Text" Style="{StaticResource MinuteAndSecondsGhostText}" Margin="20,0"/>
</StackPanel>

Wpf DataTrigger not working

I have a button where is enabled property should happen twice. In the viewmodel if the IsEnabled property is set to false the button should be disabled which works fine. On the other hand when the Validate button in the UI is disabled, this button should also be disabled that is not working which indicates that the Data Trigger is not working. Please help.
<Button x:Name="BtnValidate" Content="Validate" Height="24" VerticalAlignment="Top" Grid.Column="2" Width="83" Command="{Binding ValidateCommand}" IsEnabled="{Binding IsValidateEnabled}" HorizontalAlignment="Left" Margin="8,28,0,0" />
<Button Name="BtnReload" IsEnabled="{Binding IsEnabled}" HorizontalAlignment="Left" Width="123" Grid.Row="0" Grid.Column="5" Content="Reload" Command="{Binding DateCommand}" Margin="8,24,0,32">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=BtnValidate,Path=IsEnabled}" Value="False">
<Setter Property="IsEnabled" Value="False"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>

Properites set in the <Tag> of the object take precendence over any property set in a <Style>, so in your case the IsEnabled="{Binding IsEnabled}" is always going to be used. See MSDN's Dependency Property Precedence List for more information.
The solution would be to move the IsEnabled property out of the tag definition and into the style, since properties set in a Trigger take precedence over properties set in the <Style>
<Button Name="BtnReload" Content="Reload" Command="{Binding DateCommand}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=BtnValidate,Path=IsEnabled}" Value="False">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>

WPF Bind to selected Radio Button

I have a Radiobutton group:
<RadioButton Name="_CreateGraph" GroupName="MapOrGraph" Content="Create Graph" />
<RadioButton Name="_CreateMap" GroupName="MapOrGraph" Content="Create Map" />
How do I bind the content of a label to the selected radio button's content?
e.g. the label should say Create Graph or Create Map depending on which radio box is created?

<Label Content="{Binding SelectedValue.Content, ElementName=list}" />
<ListBox x:Name="list" SelectedIndex="1" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem" >
<RadioButton GroupName="a" Content="{TemplateBinding Content}" IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent} }" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem>Create Graph</ListBoxItem>
<ListBoxItem>Create Map</ListBoxItem>
</ListBox>
I think you can make it shorter than what I did.

If you have only two RadioButtons, this is a quick & dirty solution:
<Label>
<Label.Style>
<Style TargetType="{x:Type Label}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=_CreateGraph}" Value="True">
<Setter Property="Content" Value="{Binding Content, ElementName=_CreateGraph}" />
</DataTrigger>
<DataTrigger Binding="{Binding IsChecked, ElementName=_CreateMap}" Value="True">
<Setter Property="Content" Value="{Binding Content, ElementName=_CreateMap}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>