ToggleButton içeriğinin rengi nasıl güncellenir?

Question

WP7 uygulamasında, bir ToggleButton işaretli durumda olduğunda, içeriğin renginin tersine dönmesini beklerim (düğme siyahtan beyaza ve metinden beyazdan siyaha döner). ToggleButton, rengi değiştirmeye özen gösterdiğinden bu, içerik metin olduğunda harika çalışır. Ancak, bu bir Patch nesnesi gibi diğer içerik türleri için geçerli değildir. ToggleButton içeriğimi bir Path nesnesiyle değiştirdim ve rengi değişmiyor (kontrol edilen bir durumda olduğunda ToggleButton arka planı siyahtan beyaza döner ve Yol nesnesi siyahı çevirmek yerine beyaz kalır).

Yaptığım ilk şey, Path nesnesinin Fill özelliğini ana ön plan rengine bağlamaktır. Ama bu da işe yaramadı. DataTrigger'ı kullanmaya çalışabilirdim, ancak Silverlight/WP bunları desteklemiyor.

Bir Yol kullanmak (duraklama simgesi çizimi) için metni güncelledim ve yolun rengi metnin aynı davranışını takip etmiyor. Bir fikrin neden? Bunu nasıl düzeltebilirim?

<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

deneyin sonraki yapı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> 

O çalışmalıdır.

Answer 2

Metnin davranışını tanımlayan bir yerde bir stil olduğunu tahmin etmem gerekir (TextBlock).

Sen yolu için aşağıdaki stil kullanarak aynı elde edebilirsiniz:

<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

Kullanım Checked ve Unchecked olaylar:

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

Ve ToogleButton arka planı uygulamak ve Path dolgu:

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(İsterseniz)imleç düğmenin üzerindeyken Microsoft_Windows_Themes:ButtonChrome davranışı devre dışı bırakmak için kullanılır, ya da basılı oluyor:

<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

senin tarzında VisualStates kullanmayı deneyin, Expression Blend ile çok kolay bir şekilde yapabilirsiniz.

Gönderiimin sonunda, içerik sunucumun ön planını devre dışı bırakıldığında başka bir renge koyduğum stilimin bir örneği var.

Düğme ve ToggleButton arasındaki tek fark, bir durum eklemeniz ve ön planınızı değiştirmeniz gereken bir Geçiş durumuna sahip olmasıdır. devlet biraz bu gibi görünecektir:

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

Yani bu benim Düğme-tarzının bir örneğidir. Sadece kendiniz oluşturun ve ToggleButton'unuza atayın.

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