ControlTemplate의 속성에 브러시 색상 바인딩

Question

Button에서 파생 된 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 : 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"/> 

편집 : 대답 "그이 내 코드입니다 does not work "는 TestCustomControl이 완전히 투명하다는 것을 의미합니다.

Answer 1

명백한 문제 (AFAIK), 나는이 코드 조각을 바꿀 것 없다 :

UIPropertyMetadata(new Color()) 

UIPropertyMetadata(Colors.White) 

에와 그것의 새로운 색상() '즉, 문제가 있다면 볼은

편집 -

경우 위의 디 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>