模板绑定到背景和前景色？

I'm building a simple ControlTemplate for a Button. I want to draw a 2 color gradient, and bind the two colors so I don't need to hard code them in the template. But since Background and Foreground are Brushes and not just Colors, I'm not sure this will work.

我正在为Button构建一个简单的ControlTemplate。我想绘制一个2色渐变，并绑定两种颜色，所以我不需要在模板中硬编码。但由于背景和前景是画笔而不仅仅是颜色，我不确定这是否有效。

Can anyone tell me if there is a good way to do this? it seems simple enough. Thanks.

任何人都可以告诉我是否有一个很好的方法来做到这一点？看起来很简单。谢谢。

<ControlTemplate x:Key="ElipseButton" TargetType="Button">
  <Ellipse>
   <Ellipse.Fill>
    <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.8">
              <GradientStop Color="White" Offset="0"/>
     <GradientStop Color="Black" Offset="1"/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
 </ControlTemplate>

I want to replace the 'Black' and 'White' colors with TemplateBindings.

我想用TemplateBindings替换'Black'和'White'颜色。

2 个解决方案

#1

You can use attached properties to add some new Color properties that you can use on Button:

您可以使用附加属性添加一些可在Button上使用的新Color属性：

public class ColorExtensions
{
    public static readonly DependencyProperty ColorFrontProperty = DependencyProperty.RegisterAttached(
        "ColorFront",
        typeof(Color),
        typeof(ColorExtensions),
        new UIPropertyMetadata(Colors.White));

    public static Color GetColorFront(DependencyObject target)
    {
        return (Color)target.GetValue(ColorFrontProperty);
    }

    public static void SetColorFront(DependencyObject target, Color value)
    {
        target.SetValue(ColorFrontProperty, value);
    }

    public static readonly DependencyProperty ColorBackProperty = DependencyProperty.RegisterAttached(
        "ColorBack",
        typeof(Color),
        typeof(ColorExtensions),
        new UIPropertyMetadata(Colors.Black));

    public static Color GetColorBack(DependencyObject target)
    {
        return (Color)target.GetValue(ColorBackProperty);
    }

    public static void SetColorBack(DependencyObject target, Color value)
    {
        target.SetValue(ColorBackProperty, value);
    }
}

You can then set these on any instance and access them in your template using normal Bindings (TemplateBindings won't work here):

然后，您可以在任何实例上设置这些并使用常规绑定在模板中访问它们（TemplateBindings在此处不起作用）：

<Button Content="Click Me" local:ColorExtensions.ColorFront="Red">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Ellipse>
                <Ellipse.Fill>
                    <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.8">
                        <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:ColorExtensions.ColorFront)}" Offset="0"/>
                        <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:ColorExtensions.ColorBack)}" Offset="1"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </ControlTemplate>
    </Button.Template>
</Button>

#2

Personally, I would just put the entire Brush into your template. This gives you much more control, later, as it allows you to change (via template changes) the brush from a radial gradient to a linear gradient, etc.

就个人而言，我只需将整个画笔放入模板中。这为您提供了更多的控制，因为它允许您将画笔从径向渐变更改（通过模板更改）到线性渐变等。

#1