Question

I am trying to design a button-template, that swaps its colors, when pressed.

Unluckily I cant get it to work.

I am using the BorderBrush as a temporary variable. Most likely there are more sophisticated solutions possible.

Here is my code.

    <Style TargetType="{x:Type Button}">
        <Style.Setters>
            <Setter Property="Foreground"
                    Value="{StaticResource RahmenFarbe}" />
            <Setter Property="Background"
                    Value="{StaticResource HintergrundFarbe}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Width="{TemplateBinding Width}"
                              Height="{TemplateBinding Height}"
                              ClipToBounds="True">
                            <Border BorderBrush="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button, AncestorLevel=1}, Path=Foreground}"
                                    x:Name="ButtonBorder"
                                    CornerRadius="25"
                                    BorderThickness="4"
                                    Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button, AncestorLevel=1}, Path=Background}"
                                    RenderTransformOrigin="0.5,0.5">
                                <TextBlock  x:Name="ButtonTextBlock"
                                            Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button, AncestorLevel=1}, Path=Foreground}"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Center">
                                <ContentPresenter x:Name="myContentPresenter"
                                                  Content="{TemplateBinding Content}" />
                                </TextBlock>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed"
                                     Value="True">
                                <Setter Property="BorderBrush"
                                        Value="{Binding Mode=OneTime, Path=Foreground}" />
                                <Setter Property="Foreground"
                                        Value="{Binding Mode=OneTime, Path=Background}" />
                                <Setter Property="Background"
                                        Value="{Binding Mode=OneTime, Path=BorderBrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers >

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

Any help would be appreciated.

Regards Sebastian

Answer 1

Update

Finally understood what you really wanted to do. Here is how you get it done. Bind to the TemplatedParent‘s Background and Foreground and set TargetName in the setters. This way, the source for the colors will always stay the same and you can easily swap them

<ControlTemplate.Triggers>
    <Trigger Property="IsPressed" Value="True">
        <Setter TargetName="ButtonBorder"
                Property="Background"
                Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}" />
        <Setter TargetName="ButtonTextBlock"
                Property="Foreground"
                Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
    </Trigger>
</ControlTemplate.Triggers>

Optionally, you can also change the Bindings in your Template from

Background="{Binding Path=Background,
                     RelativeSource={RelativeSource FindAncestor,
                                                    AncestorType=Button,
                                                    AncestorLevel=1}}"

To just

Background="{TemplateBinding Background}"