Jak zaktualizować kolor zawartości ToggleButton?

Question

Dla mojej aplikacji WP7, gdy przycisk ToggleButton jest w stanie sprawdzenia, oczekuję odwrócenia kolorów zawartości (przycisk zmienia kolor z czarnego na biały, a tekst z białego na czarny). Działa to świetnie, gdy zawartość jest tekstem, ponieważ ToggleButton dba o zmianę koloru. Nie dotyczy to jednak innych typów treści, takich jak obiekt Patch. Zastąpiłam zawartość mojego ToggleButton obiektem Path, a jego kolor się nie zmienia (w stanie zaznaczonym tło ToggleButton zmienia kolor z czarnego na biały, a obiekt Path pozostaje biały zamiast zamienia się w czarny).

Pierwszą rzeczą, którą zrobiłem, było powiązanie właściwości Wypełnienie obiektu Path z jego nadrzędnym kolorem pierwszego planu. Ale to też nie zadziałało. Mogę próbować użyć DataTrigger, ale Silverlight/WP ich nie obsługuje.

Zaktualizowałem tekst, aby użyć ścieżki (rysowanie symbolu pauzy), a kolor ścieżki nie jest zgodny z tym samym tekstem. Każdy pomysł, dlaczego? Jak mogę to naprawić?

<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

Spróbuj zrobić:

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

To powinno działać.

Answer 2

Muszę zgadywać, że istnieje styl definiujący zachowanie tekstu (TextBlock).

można osiągnąć to samo za pomocą następujące styl dla ścieżki:

<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

użytkowania Checked i Unchecked wydarzeń:

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

i zastosować ToogleButton tła i Path Wypełnienie:

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 jest używany (jeśli chcesz), aby wyłączyć zachowanie Microsoft_Windows_Themes:ButtonChrome gdy kursor znajduje się nad przyciskiem, czy to wciśnięty:

<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

Spróbuj użyć VisualStates w swoim stylu, można to zrobić bardzo łatwo z Expression Blend.

Na końcu mojego postu jest przykładem mojego stylu, w którym umieszczam pierwszy plan mojego prezentera treści na innym kolorze, gdy jest on wyłączony.

Jedną różnicą między przyciskiem a ToggleButton jest to, że ma stan "Toggled", w którym musisz dodać stan i zmienić swój pierwszy plan. Państwo będzie wyglądać mniej więcej tak:

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

Więc to na przykład mojej Button-stylu. Po prostu stwórz własny i przypisz go do swojego 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>