Question

对于我的WP7应用程序，当ToggleButton处于检查状态时，我希望内容颜色反转（按钮从黑色变为白色，文本从白色变为黑色）。当内容为文本时，这项工作非常有用，因为ToggleButton负责更改颜色。但是，对于其他类型的内容（例如Patch对象），情况并非如此。我用Path对象替换了我的ToggleButton的内容，它的颜色没有变化（当处于选中状态时，ToggleButton背景从黑色变为白色，Path对象保持白色而不是变黑）。

我做的第一件事是将Path对象的Fill属性绑定到它的父前景色。但这也不起作用。我可能尝试使用DataTrigger，但Silverlight / WP不支持它们。

我更新了文本以使用路径（暂停符号的绘制），并且路径的颜色不遵循文本的相同行为。知道为什么吗？我怎么能解决这个问题？

<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

使用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 2

我不得不猜测某个地方有一个定义文本行为的样式（TextBlock）。

您可以通过对路径使用以下样式来实现相同的目的：

    <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

尝试在您的风格中使用VisualStates，您可以使用Expression Blend轻松完成。

在我的帖子的最后是我的风格的一个例子，当我禁用时，我将内容演示者的前景放在另一种颜色上。

Button和ToggleButton之间的唯一区别是它具有Toggled状态，您必须在其中添加状态并更改前景。州将看起来像这样：

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

所以这是我的Button风格的一个例子。只需创建自己的并将其分配给您的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>

Answer 4

尝试下一步：

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

它应该有用。

如何更新ToggleButton内容的颜色？

4 个答案: