XAML의 상태에 따라 이미지와 색상을 버튼 배경으로 번갈아 표시

Question

버튼에 대한 배경 이미지가 있습니다. 버튼이 비활성화 된 경우, 특정 색상 (이 경우 #FFCCCCCC)이 필요하지만 활성화되어 있으면 이미지를 배경으로 사용하고 싶습니다. 이것이 가능한가? Expression Blend에서 템플릿을 수정하고 있지만 올바른 조합을 찾을 수 없습니다. 버튼에 이미지 배경이나 배경색이 있지만 상태에 따라 바꿀 수없는 것 같습니다.

저는 Windows Phone 7/Silverlight를 사용하고 있습니다.

내 XAML은 다음과 같습니다 :

<Style x:Key="SiteKeyButtonStyle" TargetType="Button"> 
     <Setter Property="VerticalAlignment" Value="Top" /> 
     <Setter Property="HorizontalAlignment" Value="Center" /> 
     <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" /> 
     <Setter Property="FontSize" Value="24" /> 
     <Setter Property="Foreground" Value="#FFFFFF" /> 
     <Setter Property="BorderThickness" Value="0" /> 
     <Setter Property="MinWidth" Value="140" /> 
     <Setter Property="Height" Value="50" /> 
     <Setter Property="Padding" Value="24, 0, 24, 0" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid Background="Transparent"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"/> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" > 
               <DiscreteObjectKeyFrame.Value> 
                <SolidColorBrush Color="#FFCCCCCC"/> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <DoubleAnimation Duration="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" To="1" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" > 
          <Border.Background> 
           <ImageBrush ImageSource="/ProjectName;component/Images/Icons/button-background.png" Stretch="Fill"/> 
          </Border.Background> 
          <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Answer 1

이런 종류의 물건에 대한 일반적인 접근 방식은이 같은 코어 설계에 Rectangle 요소를 추가하는 것입니다 : -

    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" > 
         <Rectangle x:Name="BackgroundElement"> 
          <Rectangle.Fill> 
           <ImageBrush ImageSource="/ProjectName;component/Images/Icons/button-background.png" Stretch="Fill"/> 
          </Rectangle.Fill> 
         </Rectangle> 
         <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
        </Border> 

이제 장애인 VisualState을 변경할 수 있습니다 그래서 그 배경이 투명이 아니라 #FFCCCCCC. 또한 DoubleAnimation을 추가하여 Disabled 및 Pressed 상태에서 "BackgroundElement"의 Opacity을 0으로 설정합니다.

이렇게 설정하면 사각형의 이미지가 콘텐츠 컨테이너의 콘텐츠를 볼 수 있습니다. 비활성화되면 이미지가 투명 해지고 #FFCCCCCC 색상이 표시됩니다. 눌렀을 때 PhoneForegroundBrush 색이 보입니다.

Answer 2

는이 같은 있도록 트리거에 전체의 ControlTemplate을 변경할 수 있습니다. 나는 이것을 테스트하지는 않았지만 잘하면 그것이 어떻게되는지에 대한 좋은 아이디어를 줄 것이다.

<Style TargetType="{x:Type Button}"> 
    <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 

        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
    <Style.Triggers> 
       <Trigger Property="IsEnabled" Value="False"> 
        <ControlTemplate TargetType="{x:Type Button}"> 

        </ControlTemplate> 
       </Trigger> 
    </Style.Trigger> 
    </Style>