Question

I’ve been recently playing with WPF and I’ve come across a number of problems that I can’t solve. I have the following code in my generic.xaml:

<Style TargetType="{x:Type local:ClearButton}">      
    <Style.Resources>
        <con:ValueConverter x:Key="converter" />
    </Style.Resources>
    <Setter Property="Width" Value="20" />
    <Setter Property="Height" Value="20" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ClearButton}">
                <Grid>

                    <Image Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                        <Image.Style>
                            <Style TargetType="{x:Type Image}">
                                <Setter Property="Source" Value="/WPF-Libraries;component/Resources/ClearEnabled.png" />
                                <Style.Triggers>   

                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="BitmapEffect">
                                            <Setter.Value>
                                                <OuterGlowBitmapEffect Opacity="0.5" GlowColor="Red" GlowSize="3" />
                                            </Setter.Value>
                                        </Setter>
                                    </Trigger>

                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter Property="Source" 
                                                Value="/WPF-Libraries;component/Resources/ClearDisabled.png" />
                                    </Trigger>

                                    <!--Binding #1-->
                                    <Trigger Property="{TemplateBinding local:ClearButton.IsPressed}" Value="True">
                                        <Setter Property="RenderTransform">
                                            <Setter.Value>
                                                <!--Binding #2-->
                                                <ScaleTransform CenterX="CONVERTER BINDING:PASS WIDTH TO CONVERTER" CenterY="CONVERTER BINDING:PASS HEIGHT TO CONVERTER" ScaleX="0.75" ScaleY="0.75" />
                                            </Setter.Value>
                                        </Setter>
                                    </Trigger>

                                </Style.Triggers>                        
                            </Style>
                        </Image.Style>
                    </Image>

                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    </Border>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I can’t get Binding #1 to work. I want to bind the trigger to the IsPressed property of the button, what should the binding be? Also what should the binding be for Binding #2 if I want to pass the button’s Width and Height to the converter?

Also I could set the trigger this way instead:

<Style TargetType="{x:Type local:ClearButton}">
    <Style.Resources>
        <con:ValueConverter x:Key="converter" />
    </Style.Resources>
    <Setter Property="Width" Value="20" />
    <Setter Property="Height" Value="20" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ClearButton}">
                <!--Abbreviated-->
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <!--Binding #1-->
        <Trigger Property="{TemplateBinding local:ClearButton.IsPressed}" Value="True">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <!--Binding #2-->
                    <ScaleTransform CenterX="CONVERTER BINDING" CenterY="CONVERTER BINDING" ScaleX="0.75" ScaleY="0.75" />
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

Which one is better and what would the binding be for Binding #1 and #2?

Answer 1

Both approaches are a little bit off. Your first approach is struggling to reach the IsPressed property using binding, however the Property property of the Trigger object is not a DependencyProperty so it doesn’t support binding.

Your second approach is closer to the mark but still wrong, again uses binding on the Property property of the Trigger.

Check this out instead:

<Style TargetType="Button" x:Key="ClearButtonStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <TextBlock 
                        Name="x" 
                        Text="I will change my color when ou press me"
                        TextAlignment="Center" 
                        VerticalAlignment="Center" 
                        Foreground="Red" 
                        TextWrapping="Wrap"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter 
                            TargetName="x" 
                            Property="Foreground" 
                            Value="Green"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Notice that I put the trigger logic on the control template level (specifying the target element), not on the individual element (the TextBlock in this case).