RoundButtonTemplate 변경된 배경 및 아이콘 색상

Question

음악 플레이어의 재생 및 일시 중지 단추와 같은 단추를 가져 오는 RoundButtonTemplate이 있습니다. 버튼을 전경색과 배경색을 변경해야 ContentPresenter에를 통해 표시 또는 투명성을 얻을 수있는 아이콘으로 변경해야합니다 버튼의 배경을 누르면

<ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button"> 
     <Grid Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}"> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualState x:Name="Pressed"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="ButtonBackground"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Normal"/> 
        <VisualState x:Name="Disabled"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonBackground"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonBorder"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonContent"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="MouseOver"/> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="FocusStates"/> 
      </VisualStateManager.VisualStateGroups> 
      <Border x:Name="ButtonBorder" BorderBrush="White" BorderThickness="3" Background="Transparent" CornerRadius="100"> 
       <Ellipse x:Name="ButtonBackground" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{TemplateBinding Background}" /> 
      </Border> 
      <ContentPresenter x:Name="ButtonContent" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
     </Grid> 
    </ControlTemplate> 

.

버튼의 배경을 전경색으로 변경하는 것은 쉽지만 ContentPresenter에서 이미지의 색상을 변경하는 방법을 모르겠습니다.

Answer 1

Rescue에 첨부 된 속성!

1 단계 :

가 연결된 속성을 보유하고 정적 클래스를 만듭니다.

public static class Design 
{ 
    public static readonly DependencyProperty AlternateContentProperty = DependencyProperty.RegisterAttached(
     "AlternateContent", 
     typeof (object), 
     typeof (Design), 
     null 
    ); 

    public static void SetAlternateContent(DependencyObject element, object value) 
    { 
     element.SetValue(AlternateContentProperty, value); 
    } 

    public static object GetAlternateContent(DependencyObject element) 
    { 
     return element.GetValue(AlternateContentProperty); 
    } 
} 

2 단계 :

붕괴 시작합니다 다른 ContentPresenter에서 템플릿에 대체 내용을 추가합니다. 그런 다음 Pressed 시각적 상태에서 원래 내용을 축소하고 다른 내용을 표시하십시오.

<ControlTemplate x:Key="RoundButtonTemplate" 
        TargetType="Button"> 
    <Grid Background="Transparent" 
      Margin="{StaticResource PhoneTouchTargetOverhang}"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualState x:Name="Pressed"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" 
                 Storyboard.TargetName="ButtonBackground"> 
          <DiscreteObjectKeyFrame KeyTime="0" 
                Value="{StaticResource PhoneAccentBrush}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                 Storyboard.TargetName="ButtonContentAlternate"> 
          <DiscreteObjectKeyFrame KeyTime="0"> 
           <DiscreteObjectKeyFrame.Value> 
            <Visibility>Visible</Visibility> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                 Storyboard.TargetName="ButtonContent"> 
          <DiscreteObjectKeyFrame KeyTime="0"> 
           <DiscreteObjectKeyFrame.Value> 
            <Visibility>Collapsed</Visibility> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Normal" /> 
       <VisualState x:Name="Disabled"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" 
                 Storyboard.TargetName="ButtonBackground"> 
          <DiscreteObjectKeyFrame KeyTime="0" 
                Value="0.5" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" 
                 Storyboard.TargetName="ButtonBorder"> 
          <DiscreteObjectKeyFrame KeyTime="0" 
                Value="0.5" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" 
                 Storyboard.TargetName="ButtonContent"> 
          <DiscreteObjectKeyFrame KeyTime="0" 
                Value="0.5" /> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="MouseOver" /> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="FocusStates" /> 
     </VisualStateManager.VisualStateGroups> 
     <Border x:Name="ButtonBorder" 
       BorderBrush="White" 
       BorderThickness="3" 
       Background="Transparent" 
       CornerRadius="100"> 
      <Ellipse x:Name="ButtonBackground" 
         HorizontalAlignment="Stretch" 
         VerticalAlignment="Stretch" 
         Fill="{TemplateBinding Background}" /> 
     </Border> 
     <ContentPresenter x:Name="ButtonContent" 
          Content="{TemplateBinding Content}" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" /> 

     <ContentPresenter x:Name="ButtonContentAlternate" 
          Content="{TemplateBinding Local:Design.AlternateContent}" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          Visibility="Collapsed" /> 
    </Grid> 
</ControlTemplate> 

3 단계 :

이 개 내용을 제공해야이 템플릿을 사용하는 모든 버튼을 클릭합니다.

<Button VerticalAlignment="Top" 
     Template="{StaticResource RoundButtonTemplate}"> 

    <Local:Design.AlternateContent> 
     <Rectangle Fill="Red" 
        Height="40" 
        Width="40" /> 
    </Local:Design.AlternateContent> 

    <Rectangle Fill="Yellow" 
       Height="40" 
       Width="40" /> 
</Button> 

그게 전부 야! 나는 희망

이 문제 :

Answer 2

이 시도 :

<Style x:Key="RoundButtonTemplate" TargetType="Button"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonContent"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonBorder"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Opacity)" Storyboard.TargetName="ButtonContent"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0.5"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="MouseOver"/> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="FocusStates"/> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="ButtonBorder" BorderBrush="White" BorderThickness="3" Background="Transparent" CornerRadius="100"> 
          <Ellipse x:Name="ButtonBackground" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{TemplateBinding Background}" /> 
         </Border> 
         <ContentPresenter x:Name="ButtonContent" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

버튼을 누르면 버튼의 배경은 전경의 색깔이되고의 내용은 50 %에 불투명도의 수정합니다.

아, 템플릿 대신 "스타일"을 만들었으므로 다음과 같이 호출 할 수 있습니다. 다른 옵션은 현재 VisualState Pressed를 변경하는 것입니다.