ControlTemplateのプロパティにブラシの色をバインドします。

Question

Buttonから派生したCustomControlを作成しようとしていますが、これは単に色付きの矩形として表示されます。私は、通常の色（ColdColor）とマウスがコントロール（HotColor）の上にあるときに使用される別の色を指定することができます私のコントロール上に私のコントロール上の2つのプロパティを持っています。

私は、ブラシの色とコントロールのプロパティの間でバインディングを設定する方法を理解できません。これは私のコードです：

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：MainWindow.xamlで

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())); 
} 

は使用方法：

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

EDIT：それを言うために」 does not work "は、TestCustomControlが完全に透明であることを意味します。

Answer 1

明らかな問題は（私の知る限り）、私はこのコードの一部変更でしょうがありません：

UIPropertyMetadata(Colors.White) 

に

UIPropertyMetadata(new Color()) 

をし、問題だその「新色（」）かどうかを確認

EDIT -

場合は、上記のジDNTの作業、ビジュアル状態マネージャは、関連する制限を有し、この

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

Answer 2

この

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

を変更してみてください：それが結合して設定されたプロパティをアニメーション化することができません。だからあなたはできないことをやろうとしているだけです。

あなたができることは、要素を複製して、不透明度を使ってトランジションを行うことです。

依存関係プロパティ

Color ColorOne 
Color ColorTwo 

と視覚的な状態で使用してカスタムコントロールTwoColorBox考える：次は、VSMと不透明度でこれを行う方法を示し

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>