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

Question

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?

Are you sure **PomodoroTimer** has a ``Background`` to bind to? — Andrew KeepCoding, Dec 29 '22 at 00:13

score 1 · Accepted Answer · answered Dec 29 '22 at 00:11

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.

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

1 Answers1