Develop Reference

Using {x: Bind} to bind to an XAML property, i.e. replacing {TemplateBinding XAMLProperty}

It is stated in MSDN that
Starting with Windows 10, version 1809, you can use the x:Bind markup extension anywhere you use TemplateBinding in a ControlTemplate.
However, when I try to replace TemplateBinding with {x:Bind} whilst defining the style of a custom control, as so,
<Style TargetType="local:PomodoroTimer" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:PomodoroTimer">
<Grid Width="300" Height="300" Background="{x:Bind Background}">
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I get the following error: Unable to resolve symbol 'Background'. What am I missing?

x:Bind needs code-behind. (see here)
So, thanks to MainWindow.xaml.cs, this works:
<Window
x:Class="Bindings.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:local="using:Bindings"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.Resources>
<Style
x:Key="CustomButtonStyle"
TargetType="Button">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
BorderBrush="{x:Bind BorderBrush, Mode=OneWay}"
BorderThickness="{x:Bind BorderThickness, Mode=OneWay}">
<ContentControl Content="{x:Bind Content, Mode=OneWay}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Grid.Resources>
<Button
BorderBrush="SkyBlue"
BorderThickness="1"
Content="Custom Button"
Style="{StaticResource CustomButtonStyle}" />
</Grid>
</Window>
For custom (templated) controls, I'd go with:
Text="{TemplateBinding Text}"
or
Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
for TwoWay bindings.
If you want to do x:Bind inside the ControlTemplate, this answer might help.

ComboBox selected item data triggers to collapse button on child user control

I am trying to figure out how to get data triggers to work between user controls - either between a window and a child user control (a user control embedded in the window), or between a user control that has a child user control.
The button control has 5 buttons but by default the 5th button is collapsed. When the combobox item "Fifth Button" is selected I want the Fourth button to collapse and the Fifth button to become visible. As you can see I have the triggers set to update the Label on the Mainwindow based on the combobox selection. I have no issue using triggers within the same window but I don't know how to make them work to communicate to a user control that is embedded in the same window. Or from one control to another.
<Window x:Class="ComboboxControlChange.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ComboboxControlChange"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ComboBox Grid.Row="0" x:Name="ButtonSelectCombobox" SelectedValuePath="Content" SelectedValue="{Binding ButtonSelection}" Height="24" Margin="150,0">
<ComboBoxItem x:Name="FirstButtonSelection" >First Button</ComboBoxItem>
<ComboBoxItem x:Name="SecondButtonSelection">Second Button</ComboBoxItem>
<ComboBoxItem x:Name="ThirdButtonSelection">Third Button</ComboBoxItem>
<ComboBoxItem x:Name="FourthButtonSelection">Fourth Button</ComboBoxItem>
<ComboBoxItem x:Name="FifthButtonSelection">Fifth Button</ComboBoxItem>
</ComboBox>
<StackPanel Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Orientation="Vertical">
<Label>You have selected button:</Label>
<Label HorizontalAlignment="Center">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Content" Value=""/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=FirstButtonSelection, Path=IsSelected}" Value="true">
<Setter Property="Content" Value="One" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=SecondButtonSelection, Path=IsSelected}" Value="true">
<Setter Property="Content" Value="Two" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=ThirdButtonSelection, Path=IsSelected}" Value="true">
<Setter Property="Content" Value="Three" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=FourthButtonSelection, Path=IsSelected}" Value="true">
<Setter Property="Content" Value="Four" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=FifthButtonSelection, Path=IsSelected}" Value="true">
<Setter Property="Content" Value="Five" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</StackPanel>
</Grid>
</Grid>
<Grid Grid.Row="1">
<local:ButtonControl />
</Grid>
</Grid>
</Window>
<UserControl x:Class="ComboboxControlChange.ButtonControl"
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"
xmlns:local="clr-namespace:ComboboxControlChange"
mc:Ignorable="d"
d:DesignHeight="160" d:DesignWidth="517">
<Grid Name="Link1MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" VerticalAlignment="Center" Margin="5,0" >
<TextBlock TextAlignment="Center">
First<LineBreak/>Button
</TextBlock>
</Button>
<Button Grid.Column="1" VerticalAlignment="Center" Margin="5,0">
<TextBlock TextAlignment="Center">
Second<LineBreak/>Button
</TextBlock>
</Button>
<Button Grid.Column="2" VerticalAlignment="Center" Margin="5,0">
<TextBlock TextAlignment="Center">
Third<LineBreak/>Button
</TextBlock>
</Button>
<Button Grid.Column="3" VerticalAlignment="Center" Margin="5,0" >
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=FifthButtonSelected, Path=IsSelected}" Value="true">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
<TextBlock TextAlignment="Center">
Fourth<LineBreak/>Button
</TextBlock>
</Button>
<Button Grid.Column="3" Margin="4,4,4,50" Visibility="Collapsed">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=FifthButtonSelected, Path=IsSelected}" Value="true">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
<TextBlock TextAlignment="Center">
Fifth<LineBreak/>Button
</TextBlock>
</Button>
</Grid>
</UserControl>
I've tried binding the buttons with ElementName, Path, and even relativeSource but have't had any success. I've also tried adding the triggers in the ButtonControl.Resources section of the control.
<DataTrigger Binding="{Binding ElementName=FifthButtonSelected, Path=IsSelected}" Value="true">
<DataTrigger Binding="{Binding RelativeSource={RelatvieSource FindAncestorType={x:Type ComboBoxItem}}, Path=IsSelected}" Value="true">
Any help would be appreciated!

This won't work because the element names that are in the window will not be in scope for the user control. MSDN says:
[...] the primary XAML namescope is defined at the XAML root element of a
single XAML production, and encompasses the elements that are
contained in that XAML production.
What that means, practically, is that when you define an x:Name for an element in a file, it can only be referenced in that file, and will be unknown outside of it.
Another way to go about this would be to create a Dependency Property on the user control, and use that as a way to pass information between the window and the control. A nice side affect is that this creates some abstraction and allows for more flexibility.
ButtonControl.xaml.cs: (Rename 'Feature' to something relevant)
public partial class ButtonControl : UserControl
{
...
public bool IsFeatureVisible
{
get { return (bool)GetValue(IsFeatureVisibleProperty); }
set { SetValue(IsFeatureVisibleProperty, value); }
}
// Using a DependencyProperty as the backing store for IsFeatureVisible. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsFeatureVisibleProperty =
DependencyProperty.Register("IsFeatureVisible", typeof(bool), typeof(ButtonControl), new UIPropertyMetadata(false));
...
}
Now you could wire up the trigger to use this property, but we're lucky in this case that you're dealing with booleans and Visibility, so we can make it simpler:
ButtonControl.xaml:
<UserControl x:Class="ComboboxControlChange.ButtonControl"
x:Name="Myself"
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"
xmlns:local="clr-namespace:ComboboxControlChange"
mc:Ignorable="d"
d:DesignHeight="160" d:DesignWidth="517">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="mBooleanToVisibilityConverter"/>
</UserControl.Resources>
<Grid Name="Link1MainGrid">
...
<Button Grid.Column="3" VerticalAlignment="Center" Margin="5,0" Visibility="{Binding ElementName=Myself, Path=IsFeatureVisible, Converter={StaticResource mBooleanToVisibilityConverter}}">
<TextBlock TextAlignment="Center">
Fourth<LineBreak/>Button
</TextBlock>
</Button>
...
</Grid>
</UserControl>
Lastly, in the Window, we need to provide a value for that property on the instance of our button control. We can use the FifthButtonSelection element name here just like you are in other parts of the file:
MainWindow.xaml
<local:ButtonControl IsFeatureVisible="{Binding ElementName=FifthButtonSelection, Path=IsSelected}"/>

WPF: Address nested styles by key

I have a fairly complex WPF UserControl that needs a lot of custom styling, and several different styles for the same control types. The same styles are not used in any other places.
I would like to use nested styles (using Style.Resources) as a sort of namespacing mechanism as follows:
Example user control:
<UserControl Style="{StaticResource AwesomeControl}>
<Grid>
<Button Style="{StaticResource ButtonA}"/>
<Button Style="{StaticResource ButtonB}"/>
</Grid>
</UserControl>
How I want to define my styles:
<ResourceDictionary>
<Style TargetType="UserControl" x:Key="AwesomeControl">
<Style.Resources>
<Style TargetType="Button" x:Key="ButtonA"> </Style>
<Style TargetType="Button" x:Key="ButtonB"> </Style>
</Style.Resources>
</Style>
</ResourceDictionary>
However, this does not work. From what I can tell, it does not seem possible to address nested styles by their key. (I have searched around a lot, but cannot find a single example doing something like this.)
I can make it work easily by removing the nesting of styles, keeping them all at top level. However, then I have to change their keys to something like AwesomeControlButtonA, etc. to distinguish them from other parts of the application
That does not seem ideal to me.
So my question is:
Is something like I am trying with the code above possible? If not, are there other ways of namespacing I can use to prevent awkward keys like AwesomeControlButtonA?

Maybe DynamicResource could solve your problem
<Grid>
<Button Style="{DynamicResource ButtonA}"/>
<Button Style="{DynamicResource ButtonB}"/>
</Grid>
In context:
<Grid>
<Grid.Resources>
<Style x:Key="AW" TargetType="UserControl">
<Style.Resources>
<Style TargetType="Button" x:Key="AB">
<Setter Property="Background" Value="Red" />
</Style>
<Style TargetType="Button" x:Key="BB">
<Setter Property="Background" Value="Yellow" />
</Style>
</Style.Resources>
</Style>
<Style x:Key="AR" TargetType="UserControl">
<Style.Resources>
<Style TargetType="Button" x:Key="AB">
<Setter Property="Background" Value="Green" />
</Style>
<Style TargetType="Button" x:Key="BB">
<Setter Property="Background" Value="Blue" />
</Style>
</Style.Resources>
</Style>
</Grid.Resources>
<StackPanel>
<UserControl Style="{StaticResource AW}">
<StackPanel>
<Button Content="A" Style="{DynamicResource AB}" />
<Button Content="A" Style="{DynamicResource BB}" />
</StackPanel>
</UserControl>
<UserControl Style="{StaticResource AR}">
<StackPanel>
<Button Content="A" Style="{DynamicResource AB}" />
<Button Content="A" Style="{DynamicResource BB}" />
</StackPanel>
</UserControl>
</StackPanel>
</Grid>

Replace control template in toggle button on change state

I would like to create a flexible toggle button control. On toggle button "IsChecked" property "true", I would add two another buttons.
I have obtained this result by setting control template. But now how can I set default toggle button template (in this case toggle template is parrent) after button clicked? Toggle button should has "IsChecked" property set to false after undo.
XAML code:
<ToggleButton Content="Delete">
<ToggleButton.Style>
<Style>
<Setter Property="ToggleButton.Content" Value="Stops" />
<Style.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="ToggleButton.Template">
<Setter.Value>
<ControlTemplate>
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="24" />
</Grid.ColumnDefinitions>
<Button Command="{Binding ConditionalAcceptCommand}" Grid.Column="0">
<Image Source="pack://application:,,,/Images/check_mark24.png"/>
</Button>
<Button Grid.Column="1">
<Image Source="pack://application:,,,/Images/delete24.png"/>
</Button>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
Thanks

WPF content control styling

I have a custom control which is basically a contentcontrol
public class PromoAlarmBox : ContentControl
{
static PromoAlarmBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(PromoAlarmBox), new FrameworkPropertyMetadata(typeof(PromoAlarmBox)));
}
}
I add it to the containing user control
<controls:PromoAlarmBox Grid.Row="9" Grid.Column="1" />
If I add the style to the containing usercontrols resources everything works fine
<UserControl.Resources>
<Style TargetType="{x:Type controls:PromoAlarmBox}">
<Setter Property="ContentControl.ContentTemplate">
<Setter.Value>
<DataTemplate >
<Rectangle Fill="Blue" Stroke="Black" Height="20" Width="20"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
But if I add it to generic.xaml in the custom controls project , nothing is show
<Style TargetType="{x:Type local:PromoAlarmBox}">
<Setter Property="ContentControl.ContentTemplate">
<Setter.Value>
<DataTemplate >
<Rectangle Fill="Blue" Stroke="Black" Height="20" Width="20"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I know the style is applied as I have other controls in same project whos styles are defined in generic.xaml, Anyone have any ideas?

A simple static should do the trick...
static PromoAlarmBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(PromoAlarmBox), new FrameworkPropertyMetadata(typeof(PromoAlarmBox)));
}

Although im not sure why there is a difference when you use a style as a local resource and when you use generic , this works for me
<Style TargetType="{x:Type local:PromoAlarmBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Rectangle VerticalAlignment="Stretch" Fill="Yellow" Stroke="Black" Height="20" Width="20"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>