ToggleButton सामग्री का रंग कैसे अपडेट करें?

Question

मेरे WP7 ऐप के लिए, जब एक टॉगल बटन एक चेक किए गए राज्य में होता है, तो मुझे लगता है कि सामग्री रंग रिवर्स (बटन काला से सफेद और सफेद से काले रंग में बदल जाता है)। जब सामग्री टॉगलबटन रंग बदलने की देखभाल करता है तो सामग्री टेक्स्ट होती है जब यह बहुत अच्छा काम करता है। हालांकि, यह पैच ऑब्जेक्ट जैसी अन्य प्रकार की सामग्री के मामले में नहीं है। मैंने पथ टॉगल बटन की सामग्री को पथ ऑब्जेक्ट से बदल दिया है और इसका रंग बदल नहीं रहा है (जब चेक किए गए राज्य में, टॉगल बटन पृष्ठभूमि काला से सफेद हो जाती है और पथ ऑब्जेक्ट काला रंग के बजाय सफेद रहता है)।

पहली चीज मैंने पथ ऑब्जेक्ट की फिल प्रॉपर्टी को अपने मूल अग्रभूमि रंग में भरना है। लेकिन वह या तो काम नहीं किया। मैं डेटाट्रिगर का उपयोग करने की कोशिश कर रहा था, लेकिन सिल्वरलाइट/डब्ल्यूपी उनका समर्थन नहीं करता है।

मैंने पाठ का उपयोग करने के लिए पाठ को अद्यतन किया (विराम चिह्न का चित्रण) और पथ का रंग पाठ के समान व्यवहार का पालन नहीं करता है। कोई विचार क्यों? मैं इसे कैसे ठीक कर सकता हूं?

<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

कोशिश आगे क्या:

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

यह काम करना चाहिए।

Answer 2

मुझे यह अनुमान लगाना होगा कि पाठ (टेक्स्टब्लॉक) के व्यवहार को कहीं परिभाषित करने वाली शैली है।

आप पथ के लिए निम्नलिखित शैली का उपयोग करके एक ही लक्ष्य को हासिल कर सकते हैं:

<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

उपयोग Checked और Unchecked घटनाओं:

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

और ToogleButton पृष्ठभूमि लागू करते हैं और 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 प्रयोग किया जाता है (अगर आप चाहते हैं) Microsoft_Windows_Themes:ButtonChrome व्यवहार को निष्क्रिय करने के लिए जब कर्सर बटन खत्म हो गया है, या यह दबाया है:

<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

अपनी शैली में VisualStates उपयोग करने का प्रयास, आप इसे अभिव्यक्ति मिश्रण के साथ बहुत आसानी से कर सकते हैं।

मेरी पोस्ट के अंत में मेरी शैली का एक उदाहरण है जहां मैंने अक्षम होने पर अपने सामग्री प्रस्तुति के अग्रभूमि को दूसरे रंग पर रखा है।

बटन और टॉगल बटन के बीच एक अंतर यह है कि एक टॉगल-स्टेट है जहां आपको एक राज्य जोड़ना होगा और अपना अग्रभूमि बदलना होगा। राज्य इस तरह कुछ हद तक दिखेगा:

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

तो यह एक मेरे बटन शैली का एक उदाहरण। बस अपना खुद का बनाएँ और इसे अपने Toggle बटन पर असाइन करें।

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