如何将WPF效果颜色绑定到ControlTemplate的前台或背景 [英] How to bind WPF Effect Color to Foreground or Background of ControlTemplate

问题描述

我看到一些奇怪的行为，当涉及到绑定到一个控件模板内的影响的Color属性。当直接设置值，我可以把颜色定义为一个字符串（如红）或十六进制值（如＃FFFF0000）。

I am seeing some odd behaviour when it comes to Binding to the Color property of an Effect within a ControlTemplate. When setting the value directly, I can define the color as a string (eg. "Red") or as a Hex value (eg. #FFFF0000).

不过，使用绑定时，只有颜色被定义为一个字符串，这是一个控件模板风格的问题的作品，因为我想用TemplateParent属性，坐上开往为十六进制值的颜色。

However, when using binding, it ONLY works if the color is defined as a String, which is an issue in a ControlTemplate style, as I would like to use the colors of the TemplateParent properties, which get bound to as Hex values.

例如。看看下面的XAML（抱歉，我知道这是漫长的，但我想证明所有情况下）：

For example. Take a look at the following XAML (sorry I know it is long but I wanted to show all cases):

<Window x:Class="EffectTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <!-- 
        STYLE 1 
        This works, as the Color is hard coded, but note that the hard 
        coded value is identicle to the value in Style 2 (which doesn't work).
        -->
        <Style x:Key="Style1" TargetType="{x:Type Button}">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Width="{TemplateBinding Width}"
                                    Height="{TemplateBinding Height}"
                                    Background="{TemplateBinding Foreground}">
                                <Border.Effect>
                                    <DropShadowEffect Color="#FFFF0000"/>
                                </Border.Effect>
                                <TextBlock Foreground="White" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>

        <!--
        STYLE 2
        This fails (the dropshadow appears black) even through the value being bound to is the same as Style 1.
        -->
        <Style x:Key="Style2" TargetType="{x:Type Button}">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Width="{TemplateBinding Width}"
                                    Height="{TemplateBinding Height}"
                                    Background="{TemplateBinding Foreground}">
                                <Border.Effect>
                                    <!--NOTE: TemplateBinding does not work at all... <DropShadowEffect Color="{TemplateBinding Background}"/>-->
                                    <DropShadowEffect Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"/>
                                </Border.Effect>
                                <TextBlock Foreground="White" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>

        <!--
        STYLE 3
        This works, but note that I am binding to "Name" for the Color, which just happens to be a valid color "Red".
        -->
        <Style x:Key="Style3" TargetType="{x:Type Button}">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Width="{TemplateBinding Width}"
                                    Height="{TemplateBinding Height}"
                                    Background="{TemplateBinding Foreground}">
                                <Border.Effect>
                                    <DropShadowEffect Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Name}"/>
                                </Border.Effect>
                                <TextBlock Foreground="White" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Name}"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <StackPanel Width="150">
        <Button Style="{StaticResource Style1}" Foreground="LightBlue" Background="Red"></Button>
        <Separator Visibility="Hidden" Height="5"/>
        <Button Style="{StaticResource Style2}" Foreground="LightBlue" Background="Red"></Button>
        <Separator Visibility="Hidden" Height="5"/>
        <Button Style="{StaticResource Style3}" Foreground="LightBlue" Name="Red"></Button>
    </StackPanel>
</Window>

结果：

Results in:

这是为什么？有没有办法解决它？我希望能够使用的背景及其控制模板的效果里面按钮的前景属性。

Why is this? Is there a way around it? I would like to be able to use the Background and Foreground properties of Button inside the control template's effect.

推荐答案

是的，背景是一个Brush对象，如果你的模板的背景属性是纯色则是可行的你颜色属性绑定到后台的像
颜色属性{结合的RelativeSource = {的RelativeSource TemplatedParent}，路径= Background.Color} $ b $ 。b或您可以使用一个转换器

Yes,Background is a Brush object and if your template background property is a pure color then it is feasible for you to bind Color property to Background's color property like {Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background.Color} Or you can either use a converter.

更新代码示例：

<Style x:Key="Style2" TargetType="{x:Type Button}">
    <Style.Setters>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            Background="{TemplateBinding Foreground}">
                        <Border.Effect>
                            <!-- Now uses Background.Color -->
                            <DropShadowEffect Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background.Color}"/>
                        </Border.Effect>
                        <TextBlock Foreground="White" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background.Color}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style.Setters>
</Style>

这篇关于如何将WPF效果颜色绑定到ControlTemplate的前台或背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！