Come aggiornare il colore del contenuto ToggleButton?

Question

Per la mia app WP7, quando un ToggleButton si trova in uno stato controllato, mi aspetto che il colore del contenuto si inverta (il pulsante passa dal nero al bianco e il testo dal bianco al nero). Funziona alla grande quando il contenuto è di testo poiché ToggleButton si occupa di cambiare il colore. Tuttavia, questo non è il caso per altri tipi di contenuto come un oggetto Patch. Ho sostituito il contenuto del mio ToggleButton con un oggetto Path e il suo colore non cambia (quando in uno stato controllato, lo sfondo ToggleButton passa dal nero al bianco e l'oggetto Path rimane bianco invece di diventare nero).

La prima cosa che ho fatto è associare la proprietà Fill dell'oggetto Path al suo colore principale in primo piano. Ma non ha funzionato neanche. Potrei provare a utilizzare DataTrigger, ma Silverlight/WP non li supporta.

Ho aggiornato il testo per utilizzare un percorso (disegno del simbolo di pausa) e il colore del percorso non segue lo stesso comportamento del testo. Qualche idea del perché? Come potrei aggiustarlo?

<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

Prova Operazioni successive:

<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> 

Dovrebbe funzionare.

Answer 2

Devo indovinare che esiste uno stile che definisce il comportamento del testo (TextBlock).

È possibile ottenere lo stesso utilizzando il seguente stile per il percorso:

<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

Usa Checked e Unchecked eventi:

<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> 

e applicare il ToogleButton di sfondo e il riempimento 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; 
} 

ToggleButtonStyle viene utilizzato (se si vuole) per disattivare il comportamento Microsoft_Windows_Themes:ButtonChrome quando il cursore si trova sopra il pulsante, o è premuto:

<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

Prova utilizzando VisualStates nel tuo stile, è possibile farlo molto facilmente con Expression Blend.

Alla fine del mio post è un esempio del mio stile in cui ho messo il primo piano del mio content presenter su un altro colore quando è disabilitato.

L'unica differenza tra un pulsante e ToggleButton è che ha uno stato Toggled in cui dovrai aggiungere uno stato e modificare il foreground. Lo Stato avrà un aspetto un po 'come questo:

<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> 

Quindi questo un esempio del mio Button-stile. Creane uno tuo e assegnalo al 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>