将控件模板中的属性绑定到画笔的颜色

Question

我试图制作一个从按钮派生的CustomControl，该按钮仅显示为彩色的矩形。我想在控件上设置两个属性，我可以设置它们，它们指定普通颜色（ColdColor），以及鼠标悬停在控件上时使用的另一种颜色（HotColor）。

我想不出如何获得刷子颜色和控件属性之间的绑定设置。这是我的代码：

Generic.xaml：

<Style TargetType="{x:Type local:TestCustomControl}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:TestCustomControl}"> 
       <Border BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         Name="MyBorder"> 
        <Border.Background> 
         <!-- This works: --> 
         <!--<SolidColorBrush Color="Green" />--> 

         <!-- This doesn't work: --> 
         <SolidColorBrush Color="{TemplateBinding ColdColor}" /> 
        </Border.Background> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <!-- This works: --> 
            <!--<ColorAnimation Storyboard.TargetProperty="Background.Color" Storyboard.TargetName="MyBorder" To="Red" Duration="0:0:0.2"/>--> 

            <!-- This doesn't work: --> 
            <ColorAnimation Storyboard.TargetProperty="Background.Color" Storyboard.TargetName="MyBorder" To="{TemplateBinding HotColor}" Duration="0:0:0.2"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

TestCustomControl.cs：

public class TestCustomControl : Button 
{ 
    static TestCustomControl() 
    { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof(TestCustomControl), new FrameworkPropertyMetadata(typeof(TestCustomControl))); 
    } 

    public Color HotColor 
    { 
     get { return (Color)GetValue(HotColorProperty); } 
     set { SetValue(HotColorProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for HotColor. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty HotColorProperty = 
     DependencyProperty.Register("HotColor", typeof(Color), typeof(TestCustomControl), new UIPropertyMetadata(new Color())); 

    public Color ColdColor 
    { 
     get { return (Color)GetValue(ColdColorProperty); } 
     set { SetValue(ColdColorProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for ColdColor. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty ColdColorProperty = 
     DependencyProperty.Register("ColdColor", typeof(Color), typeof(TestCustomControl), new UIPropertyMetadata(new Color())); 
} 

用法在MainWindow.xaml：

<my:TestCustomControl ColdColor="#FF0000AF" HotColor="#FFFF00AF"/> 

编辑：如果说“不起作用“意味着TestCustomControl完全透明。

Answer 1

没有明显的问题（据我所知），我会改变这段代码：

UIPropertyMetadata(new Color()) 

到

UIPropertyMetadata(Colors.White) 

，看看它的“新颜色（）”这就是问题所在

EDIT -

如果上述二DNT工作，尝试改变这个

<SolidColorBrush Color="{TemplateBinding ColdColor}" /> 

这个

<SolidColorBrush Color="{Binding 
    RelativeSource={RelativeSource TemplatedParent}, 
    Path=ColdColor}" /> 

Answer 2

的视觉状态管理器有一个相关的局限性：它不能与动画的结合设置属性。所以你只是想做一些无法做到的事情。

您可以做的是复制元素并使用不透明度进行过渡。下面显示了如何用VSM和混浊做到这一点：考虑到与依赖属性

Color ColorOne 
Color ColorTwo 

，并用可视状态自定义控件TwoColorBox

：

ColorOne 
ColorTwo 

下面的控制模板将做你想要的没有透明度流血通过

<ControlTemplate TargetType="{x:Type view:TwoColorBox}"> 
    <Grid Background="{TemplateBinding Background}"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="ColorStates"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="0:0:1"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="ColorOne"/> 
       <VisualState x:Name="ColorTwo"> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames 
          Storyboard.TargetProperty="(UIElement.Opacity)" 
          Storyboard.TargetName="borderTwo"> 
          <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <Border 
      x:Name="borderOne" 
      BorderThickness="{TemplateBinding BorderThickness}"> 
      <Border.BorderBrush> 
       <SolidColorBrush 
        Color="{Binding ColorOne, RelativeSource={RelativeSource TemplatedParent}}"/> 
      </Border.BorderBrush> 
     </Border> 
     <Border 
      x:Name="borderTwo" 
      BorderThickness="{TemplateBinding BorderThickness}" Opacity="0"> 
      <Border.BorderBrush> 
       <SolidColorBrush 
        Color="{Binding ColorTwo, RelativeSource={RelativeSource TemplatedParent}}"/> 
      </Border.BorderBrush> 
     </Border> 
    </Grid> 
</ControlTemplate>