如何更新ToggleButton内容的颜色？

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

接下来尝试做：

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

它应该有效。