改变按钮内容的刷子颜色。

huangapple go评论76阅读模式
英文:

Changing the brush color of the button content

问题

在你的 MyView.xaml 中,你尝试更改按钮的鼠标悬停时的图像颜色。你已经尝试过两种方法,但都没有奏效。看起来问题在于如何更改图像颜色。

首先,确保你在 MyDictionary.xaml 中定义了 crossOnMouseHoverDrawingImage,并使用不同的 Brush 颜色。

然后,在 MySettings 类的构造函数中确保初始化了 CrossOnMouseHoverIcon,类似于你对 CrossIcon 的初始化。

最后,在你的样式中,你需要将鼠标悬停时的 ContentSource 设置为 CrossOnMouseHoverIcon,而不是尝试更改前景颜色。样式应如下所示:

<ControlTemplate.Triggers>
    <Trigger Property="UIElement.IsMouseOver" Value="True">
        <Setter Property="Panel.Background" TargetName="border" Value="Red"/>
        <Setter Property="ContentPresenter.ContentSource" TargetName="contentPresenter" Value="{Binding UISettings.CrossOnMouseHoverIcon, UpdateSourceTrigger=PropertyChanged}"/>
    </Trigger>
</ControlTemplate.Triggers>

这应该可以在鼠标悬停时更改按钮图像的颜色。如果问题仍然存在,确保你没有其他影响按钮外观的样式或触发器。

英文:

In one of my views I have an WPF button that looks like below:

MyView.xaml:

&lt;Button Grid.Column=&quot;1&quot;
        Style=&quot;{StaticResource HoverOnCloseButton}&quot;
        Background=&quot;Transparent&quot;
        BorderBrush=&quot;Transparent&quot;
        Command=&quot;{Binding CancelBtnCommand}&quot;&gt;
    &lt;Button.Content&gt;
        &lt;Image Width=&quot;10&quot;
               Height=&quot;10&quot;
               MinWidth=&quot;10&quot;
               MinHeight=&quot;10&quot;
               Stretch=&quot;Uniform&quot;
               UseLayoutRounding=&quot;True&quot;
               SnapsToDevicePixels=&quot;True&quot;
               RenderOptions.BitmapScalingMode=&quot;HighQuality&quot;
               Source=&quot;{Binding MySettings.CrossIcon, UpdateSourceTrigger=PropertyChanged}&quot;/&gt;
    &lt;/Button.Content&gt;
&lt;/Button&gt;

The button content is an image which is loaded from a property "CrossIcon" defined and initialized within a class "MySettings" that implements INotifyPropertyChanged:

public class MySettings: INotifyPropertyChanged
{
    public ImageSource CrossIcon { get; private set; }

    public ResourceDictionary ResourceDict { get; set; }

    public MySettings()
    {
        InitializeDictionary();
        this.CrossIcon = ResourceDict[&quot;crossDrawingImage&quot;] as DrawingImage;
    }

    private void InitializeDictionary()
    {
            String url = String.Format(&quot;pack://application:,,,/myApp;component/Resources/Themes/Dark/MyDictionary.xaml&quot;);

            // Load resource dictionary
            ResourceDict = new ResourceDictionary
            {
                Source = new Uri(url, UriKind.RelativeOrAbsolute)
            };

    }
}

The MyDictionary.xaml defines the crossDrawingImage as below:

&lt;ResourceDictionary xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
                    xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
                    xmlns:core=&quot;clr-namespace:System;assembly=mscorlib&quot;&gt;

    &lt;DrawingImage x:Key=&quot;crossDrawingImage&quot;&gt;
        &lt;DrawingImage.Drawing&gt;
            &lt;DrawingGroup ClipGeometry=&quot;M0,0 V10 H10 V0 H0 Z&quot;&gt;
                &lt;GeometryDrawing Brush=&quot;#FF000000&quot; Geometry=&quot;F0 M10,10z M0,0z M4.33959,5L0,0.660409 0.660409,0 5,4.33959 9.33959,0 10,0.660409 5.66041,5 10,9.33959 9.33959,10 5,5.66041 0.660409,10 0,9.33959 4.33959,5z&quot; /&gt;
            &lt;/DrawingGroup&gt;
        &lt;/DrawingImage.Drawing&gt;
    &lt;/DrawingImage&gt;
&lt;/ResourceDictionary&gt;

Now, what I am trying to do is to change the Brush (#FF000000) of the DrawingImage from my view MyView.xaml using the Style bound to the button through a trigger set on IsMouseOver:

        &lt;Style x:Key=&quot;HoverOnCloseButton&quot; TargetType=&quot;{x:Type Button}&quot;&gt;
            &lt;Setter Property=&quot;Template&quot;&gt;
                &lt;Setter.Value&gt;
                    &lt;ControlTemplate TargetType=&quot;{x:Type ButtonBase}&quot;&gt;
                        &lt;Border Background=&quot;{TemplateBinding Panel.Background}&quot;
                                BorderBrush=&quot;Transparent&quot;  
                                Name=&quot;border&quot;
                                SnapsToDevicePixels=&quot;True&quot;&gt;
                            &lt;ContentPresenter Name=&quot;contentPresenter&quot;
                                              HorizontalAlignment=&quot;Center&quot; 
                                              VerticalAlignment=&quot;Center&quot;/&gt;
                        &lt;/Border&gt;
                        &lt;ControlTemplate.Triggers&gt;
                            &lt;Trigger Property=&quot;UIElement.IsMouseOver&quot; Value=&quot;True&quot;&gt;
                                &lt;Setter Property=&quot;Panel.Background&quot; TargetName=&quot;border&quot; Value=&quot;Red&quot;/&gt;
                                &lt;Setter Property=&quot;TextElement.Foreground&quot;
                                        TargetName=&quot;contentPresenter&quot;&gt;
                                    &lt;Setter.Value&gt;
                                        &lt;SolidColorBrush&gt;#FFFFFF&lt;/SolidColorBrush&gt;
                                    &lt;/Setter.Value&gt;
                                &lt;/Setter&gt;
                            &lt;/Trigger&gt;
                        &lt;/ControlTemplate.Triggers&gt;
                    &lt;/ControlTemplate&gt;
                &lt;/Setter.Value&gt;
            &lt;/Setter&gt;
        &lt;/Style&gt;

The setter below is not working:

        &lt;Setter Property=&quot;TextElement.Foreground&quot;
                TargetName=&quot;contentPresenter&quot;&gt;
            &lt;Setter.Value&gt;
                &lt;SolidColorBrush&gt;#FFFFFF&lt;/SolidColorBrush&gt;
            &lt;/Setter.Value&gt;
        &lt;/Setter&gt;

So how can I change the brush color of the drawingImage when the mouse is over the button?

ATTEMPT #2:

As explained here, it looks like there is no way to do this, the only possible solution seems to replace the entire DrawingImage by another one, so I have done the following by applying the following changes:

MyDictionary.xaml:
I create the same DrawingImage but with different Bush color.

    &lt;DrawingImage x:Key=&quot;crossOnMouseHoverDrawingImage&quot;&gt;
        &lt;DrawingImage.Drawing&gt;
            &lt;DrawingGroup ClipGeometry=&quot;M0,0 V10 H10 V0 H0 Z&quot;&gt;
                &lt;GeometryDrawing Brush=&quot;#FFFFFFFF&quot; Geometry=&quot;F0 M10,10z M0,0z M4.33959,5L0,0.660409 0.660409,0 5,4.33959 9.33959,0 10,0.660409 5.66041,5 10,9.33959 9.33959,10 5,5.66041 0.660409,10 0,9.33959 4.33959,5z&quot; /&gt;
            &lt;/DrawingGroup&gt;
        &lt;/DrawingImage.Drawing&gt;
    &lt;/DrawingImage&gt;
&lt;/ResourceDictionary&gt;

In MySettings class i create a new property and I initialize in the constructor in the following way:

    public ImageSource CrossOnMouseHoverIcon { get; private set; }

    public MySettings()
    {
        InitializeDictionary();
        this.CrossIcon = ResourceDict[&quot;crossDrawingImage&quot;] as DrawingImage;
        this.CrossOnMouseHoverIcon = ResourceDict[&quot;crossOnMouseHoverDrawingImage&quot;] as DrawingImage;
    }

Finally, I modify the Style replacing the trigger for IsMouseOver (for the rest I keep the same):

    &lt;ControlTemplate.Triggers&gt;
        &lt;Trigger Property=&quot;UIElement.IsMouseOver&quot; Value=&quot;True&quot;&gt;
            &lt;Setter Property=&quot;Panel.Background&quot; TargetName=&quot;border&quot; Value=&quot;Red&quot;/&gt;
            &lt;Setter Property=&quot;ContentPresenter.ContentSource&quot;
                    TargetName=&quot;contentPresenter&quot;
                    Value=&quot;{Binding UISettings.CrossOnMouseHoverIcon, UpdateSourceTrigger=PropertyChanged}&quot;/&gt;
        &lt;/Trigger&gt;
    &lt;/ControlTemplate.Triggers&gt;

But still not working, it does nothing when I hover on the mouse. What am I doing wrong? for sure I am setting the setter wrong, but I am not able to see what is failing.

答案1

得分: 1

或许是因为您将DrawingImage类型分配给ContentSource,但应该是Image。尝试以下按钮的实现:

<Button Width="50" Height="50" x:Name="btn" BorderBrush="Transparent">
    <Button.Content>
        <Image Width="10" Height="10" MinWidth="10" MinHeight="10" Stretch="Uniform" UseLayoutRounding="True" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="HighQuality">
            <Image.Style>
                <Style TargetType="{x:Type Image}">
                    <Setter Property="Source" Value="{StaticResource blackCrossDrawingImage}"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=btn, Path=IsMouseOver}" Value="True">
                            <Setter Property="Source" Value="{StaticResource redCrossDrawingImage}"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
    </Button.Content>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ButtonBase}">
                        <Border Background="{TemplateBinding Panel.Background}" BorderBrush="Transparent" Name="border" SnapsToDevicePixels="True">
                            <ContentPresenter Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

以及两个资源:

<DrawingImage x:Key="redCrossDrawingImage">
    <DrawingImage.Drawing>
        <DrawingGroup ClipGeometry="M0,0 V10 H10 V0 H0 Z">
            <GeometryDrawing Brush="Red" Geometry="F0 M10,10z M0,0z M4.33959,5L0,0.660409 0.660409,0 5,4.33959 9.33959,0 10,0.660409 5.66041,5 10,9.33959 9.33959,10 5,5.66041 0.660409,10 0,9.33959 4.33959,5z">
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingImage.Drawing>
</DrawingImage>

<DrawingImage x:Key="blackCrossDrawingImage">
    <DrawingImage.Drawing>
        <DrawingGroup ClipGeometry="M0,0 V10 H10 V0 H0 Z">
            <GeometryDrawing Brush="Black" Geometry="F0 M10,10z M0,0z M4.33959,5L0,0.660409 0.660409,0 5,4.33959 9.33959,0 10,0.660409 5.66041,5 10,9.33959 9.33959,10 5,5.66041 0.660409,10 0,9.33959 4.33959,5z">
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingImage.Drawing>
</DrawingImage>
英文:

Maybe because you assign a type of DrawingImage to ContentSource but it should be Image. Try the following implementation of a button

&lt;Button Width=&quot;50&quot; Height=&quot;50&quot; x:Name=&quot;btn&quot; 
            BorderBrush=&quot;Transparent&quot;&gt;
        &lt;Button.Content&gt;
            &lt;Image Width=&quot;10&quot;
           Height=&quot;10&quot;
           MinWidth=&quot;10&quot;
           MinHeight=&quot;10&quot;
           Stretch=&quot;Uniform&quot;
           UseLayoutRounding=&quot;True&quot;
           SnapsToDevicePixels=&quot;True&quot;
           RenderOptions.BitmapScalingMode=&quot;HighQuality&quot;&gt;
                &lt;Image.Style&gt;
                    &lt;Style TargetType=&quot;{x:Type Image}&quot;&gt;
                        &lt;Setter Property=&quot;Source&quot; Value=&quot;{StaticResource blackCrossDrawingImage}&quot;/&gt;
                        &lt;Style.Triggers&gt;
                            &lt;DataTrigger Binding=&quot;{Binding ElementName=btn, Path=IsMouseOver}&quot; Value=&quot;True&quot;&gt;
                                &lt;Setter Property=&quot;Source&quot; Value=&quot;{StaticResource redCrossDrawingImage}&quot;/&gt;
                            &lt;/DataTrigger&gt;
                        &lt;/Style.Triggers&gt;
                    &lt;/Style&gt;
                &lt;/Image.Style&gt;
            &lt;/Image&gt;
        &lt;/Button.Content&gt;
        &lt;Button.Style&gt;
            &lt;Style TargetType=&quot;{x:Type Button}&quot;&gt;
                &lt;Setter Property=&quot;Template&quot;&gt;
                    &lt;Setter.Value&gt;
                        &lt;ControlTemplate TargetType=&quot;{x:Type ButtonBase}&quot;&gt;
                            &lt;Border Background=&quot;{TemplateBinding Panel.Background}&quot;
                                    BorderBrush=&quot;Transparent&quot;  
                                    Name=&quot;border&quot;
                                    SnapsToDevicePixels=&quot;True&quot;&gt;
                                &lt;ContentPresenter Name=&quot;contentPresenter&quot;
                                                  HorizontalAlignment=&quot;Center&quot; 
                                                  VerticalAlignment=&quot;Center&quot;/&gt;
                            &lt;/Border&gt;
                        &lt;/ControlTemplate&gt;
                    &lt;/Setter.Value&gt;
                &lt;/Setter&gt;
            &lt;/Style&gt;
        &lt;/Button.Style&gt;
    &lt;/Button&gt;

and two resources

 &lt;DrawingImage x:Key=&quot;redCrossDrawingImage&quot;&gt;
    &lt;DrawingImage.Drawing&gt;
        &lt;DrawingGroup ClipGeometry=&quot;M0,0 V10 H10 V0 H0 Z&quot;&gt;
            &lt;GeometryDrawing Brush=&quot;Red&quot; Geometry=&quot;F0 M10,10z M0,0z M4.33959,5L0,0.660409 0.660409,0 5,4.33959 9.33959,0 10,0.660409 5.66041,5 10,9.33959 9.33959,10 5,5.66041 0.660409,10 0,9.33959 4.33959,5z&quot;&gt;
            &lt;/GeometryDrawing&gt;
        &lt;/DrawingGroup&gt;
    &lt;/DrawingImage.Drawing&gt;
&lt;/DrawingImage&gt;
&lt;DrawingImage x:Key=&quot;blackCrossDrawingImage&quot;&gt;
    &lt;DrawingImage.Drawing&gt;
        &lt;DrawingGroup ClipGeometry=&quot;M0,0 V10 H10 V0 H0 Z&quot;&gt;
            &lt;GeometryDrawing Brush=&quot;Black&quot; Geometry=&quot;F0 M10,10z M0,0z M4.33959,5L0,0.660409 0.660409,0 5,4.33959 9.33959,0 10,0.660409 5.66041,5 10,9.33959 9.33959,10 5,5.66041 0.660409,10 0,9.33959 4.33959,5z&quot;&gt;
            &lt;/GeometryDrawing&gt;
        &lt;/DrawingGroup&gt;
    &lt;/DrawingImage.Drawing&gt;
&lt;/DrawingImage&gt;

huangapple
  • 本文由 发表于 2023年4月11日 03:53:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75980258.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定