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.

`Connect` should be a property in something (view model in MVVM terms) what is accessible via `DataContext` (inherited by `TextBlock` from its container). You haven't show any other bindings, do you have one already? Is `DataContext` propertly set, etc? You can also [access control in style](https://stackoverflow.com/q/8126700/1997232) from code-behind, but bindings are better. — Sinatr, May 04 '21 at 10:29
No , I didn't used MVVM , it's just binding to simple variable — , May 04 '21 at 13:47
@abdou31: What variable are you trying to "bind" to? Your example is rather confusing. — mm8, May 04 '21 at 15:44

thatguy · Answer 1 · 2021-05-04T10:43:58.807

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}.

The problem is that I don't have used the architecture MVVM as known ( Model view viewmodel , ) I'm using View, Model and Controllers ( MVC but with binding ) — , May 04 '21 at 13:49
@abdou31 The template binding is only relevant for transferring the value assigned to the `Content` property to the `TextBlock` inside of the control template. How you assign the `Content` property - be it through a binding, resource reference, code-behind or literal value - does not matter. — thatguy, May 04 '21 at 13:56

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

1 Answers1