¿Cómo actualizar el color del contenido de ToggleButton?

Question

Para mi aplicación WP7, cuando un ToggleButton está en un estado verificado, espero que el color del contenido se invierta (el botón cambia de negro a blanco y el texto de blanco a negro). Esto funciona muy bien cuando el contenido es texto, ya que ToggleButton se encarga de cambiar el color. Sin embargo, este no es el caso para otro tipo de contenido, como un objeto Patch. Reemplacé el contenido de mi ToggleButton con un objeto Path y su color no cambia (cuando está en estado verificado, el fondo ToggleButton cambia de negro a blanco y el objeto Path permanece en blanco en lugar de tornarse negro).

Lo primero que hice es enlazar la propiedad Fill del objeto Path con el color de primer plano de los padres. Pero eso tampoco funcionó. Podría intentar usar DataTrigger, pero Silverlight/WP no los admite.

Actualicé el texto para usar una ruta (dibujo del símbolo de pausa) y el color de la ruta no sigue el mismo comportamiento del texto. ¿Alguna idea de por qué? ¿Cómo podría arreglar eso?

<ToggleButton Grid.Column="0" x:Name="PauseButton"> 
    <ToggleButton.Content> 
     <Path Name="PauseIcon" Fill="White" 
       Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0" /> 
    </ToggleButton.Content> 
</ToggleButton> 

Answer 1

Intenta hacer a continuación:

<ToggleButton Grid.Column="0" x:Name="PauseButton"> 
    <ToggleButton.Content> 
     <Path Name="PauseIcon" Fill="{Binding ElementName=PauseButton, Path=Foreground}" 
       Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0" /> 
    </ToggleButton.Content> 
</ToggleButton> 

Se debe trabajar.

Answer 2

Tendría que adivinar que hay un estilo en alguna parte que define el comportamiento del texto (TextBlock).

Puede lograr el mismo utilizando el siguiente estilo de la ruta:

<ToggleButton Grid.Column="0" x:Name="PauseButton"> 
     <ToggleButton.Content> 
      <Path Name="PauseIcon" Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0"> 
       <Path.Style> 
        <Style TargetType="{x:Type Path}"> 
         <Setter Property="Fill" Value="White"></Setter> 
         <Style.Triggers> 
          <DataTrigger Binding="{Binding ElementName=PauseButton, Path=IsChecked}" Value="True"> 
           <Setter Property="Fill" Value="Black"></Setter> 
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </Path.Style> 
      </Path> 
     </ToggleButton.Content> 
    </ToggleButton> 

Answer 3

Uso Checked y Unchecked eventos:

<ToggleButton Grid.Column="0" x:Name="PauseButton" 
       Background="Black" 
       Checked="PauseButton_Checked" 
       Unchecked="PauseButton_Unchecked" 
       Style="{DynamicResource ToggleButtonStyle}"> 
    <Path x:Name="PauseIcon" Fill="White" 
     Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0" /> 
</ToggleButton> 

y aplicar el fondo ToogleButton y el relleno Path:

private void PauseButton_Checked(object sender, RoutedEventArgs e) 
{ 
    (sender as ToggleButton).Background = Brushes.White; 
    PauseIcon.Fill = Brushes.Black; 
} 

private void PauseButton_Unchecked(object sender, RoutedEventArgs e) 
{ 
    (sender as ToggleButton).Background = Brushes.Black; 
    PauseIcon.Fill = Brushes.White; 
} 

The ToggleButtonStyle se utiliza (si lo desea) para desactivar el comportamiento Microsoft_Windows_Themes:ButtonChrome cuando el cursor se encuentra sobre el botón, o no lo presiona:

<Style x:Key="ButtonFocusVisual"> 
    <Setter Property="Control.Template"> 
     <Setter.Value> 
      <ControlTemplate> 
       <Rectangle Stroke="Black" StrokeDashArray="1 2" 
          StrokeThickness="1" Margin="2" 
          SnapsToDevicePixels="true"/> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"> 
    <GradientStop Color="#F3F3F3" Offset="0"/> 
    <GradientStop Color="#EBEBEB" Offset="0.5"/> 
    <GradientStop Color="#DDDDDD" Offset="0.5"/> 
    <GradientStop Color="#CDCDCD" Offset="1"/> 
</LinearGradientBrush> 
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/> 
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}"> 
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/> 
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> 
    <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Padding" Value="1"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ToggleButton}"> 
       <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" SnapsToDevicePixels="true" 
                 Background="{TemplateBinding Background}" 
                 BorderBrush="{TemplateBinding BorderBrush}" 
                 RenderDefaulted="{TemplateBinding Button.IsDefaulted}"> 
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
             Margin="{TemplateBinding Padding}" 
             VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
             RecognizesAccessKey="True"/> 
       </Microsoft_Windows_Themes:ButtonChrome> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="#ADADAD"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 4

Trate de usar VisualStates en su estilo, puede hacerlo muy fácilmente con Expression Blend.

Al final de mi publicación hay un ejemplo de mi estilo en el que coloco el primer plano de mi presentador de contenido en otro color cuando está deshabilitado.

La única diferencia entre un Botón y ToggleButton es que tiene un estado Revertido en el que deberá agregar un estado y cambiar su primer plano. El estado se verá algo como esto:

<VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"> 
               <EasingColorKeyFrame KeyTime="0" Value="#FF7052A8"/> 
              </ColorAnimationUsingKeyFrames> 
             <ColorAnimation Duration="0" To="#FFbab0c7" Storyboard.TargetName="contentPresenter" 
                     Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" /> 
             </Storyboard> 
            </VisualState> 

Así que este un ejemplo de mi botón de estilo. Simplemente crea el tuyo y asígnalo a tu ToggleButton.

<Style TargetType="{x:Type Button}"> 
     <Setter Property="Padding" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <ColorAnimation Duration="0" To="White" Storyboard.TargetName="contentPresenter" 
                    Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"> 
              <EasingColorKeyFrame KeyTime="0" Value="#FF532B8C"/> 
             </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="contentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static HorizontalAlignment.Center}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"> 
             <EasingColorKeyFrame KeyTime="0" Value="#FF6137ae"/> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"> 
              <EasingColorKeyFrame KeyTime="0" Value="#FF7052A8"/> 
             </ColorAnimationUsingKeyFrames> 
            <ColorAnimation Duration="0" To="#FFbab0c7" Storyboard.TargetName="contentPresenter" 
                    Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 

         <Rectangle x:Name="rectangle" Fill="#FF371C69" RadiusX="10" RadiusY="10"/> 

        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"/> 

       </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsKeyboardFocused" Value="true"/> 
         <Trigger Property="ToggleButton.IsChecked" Value="true"/> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>