How can I bind this Textblock inside ControlTemplate in button style?

Question

I have a Button style and this style contains an icon and a text. I would like to bind the text. How can I achieve that?

<Style TargetType="{x:Type Button}" x:Key="ConnectedButton">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="FlowDirection" Value="LeftToRight"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Padding="5 0" 
                        Width="80"
                        Height="30"
                        Margin="5">
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="{Binding Connect}"  
                                   Margin="3 0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <TextBlock Text="{StaticResource ConnectIcon}" 
   
                                   Style="{StaticResource Icon_Text}"  Margin="3 0"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Use the style in MainWindow.xaml :

  <Button Style="{StaticResource ConnectedButton}" Margin="10,15,0,10" x:Name="cnct_btn" Content="{StaticResource Connect}"  Height="40" Width="80 " HorizontalAlignment="Left" VerticalAlignment="Center"  Click="Cnct_Click"/>

MainWindow.xaml.cs

bool test = false;
//...

if (test)
{
   cnct_btn.Content = "Connect";
}
else 
{
   cnct_btn.Content = "Not Connected";
}

I have tried Text={Binding Connect} but it doesn't work.

Answer 1

In a control template, you have to use a TemplateBinding to access a property on a templated control. In case of a Button , it is the Content property that you want to bind.

Implements a markup extension that supports the binding between the value of a property in a template and the value of some other exposed property on the templated control.

<TextBlock Text="{TemplateBinding Content}"  
           Margin="3 0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

A simple Binding will resolve a property on the current data context. You can also make this work, but you need to specify a RelativeSource using TemplatedParent .

TemplatedParent - Refers to the element to which the template (in which the data-bound element exists) is applied. This is similar to setting a TemplateBindingExtension and is only applicable if the Binding is within a template .

<TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"  
           Margin="3 0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Please note that in this scenario a TemplateBinding is sufficient, as it is only one way . In a two-way binding you would have to use the variant using RelativeSource and TemplatedParent .

A TemplateBinding is an optimized form of a Binding for template scenarios, analogous to a Binding constructed with {Binding RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay} . A TemplateBinding is always a one-way binding, even if properties involved default to two-way binding. Both properties involved must be dependency properties. In order to achieve two-way binding to a templated parent use the following binding statement instead {Binding RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Path=MyDependencyProperty} .