具有图像触发鼠标悬停WPF按钮来改变形象 [英] WPF Button with image Trigger Mouseover to change Image

问题描述

我这样一个按钮

    <Button Content="Add">
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Button}">
                                    <StackPanel Orientation="Horizontal">
                                    <Image x:Name="image" Source="../Resources/Images/Icons/Pruefplan_Add_32_gray.png" Margin="8" />
                                        <TextBlock  x:Name="text" Text="ADD" Margin="3,0,3,0" VerticalAlignment="Center"></TextBlock>
                                    </StackPanel>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="true">
                                            <Setter TargetName="image" Property="Source" Value="../Resources/Images/Icons/Pruefplan_Add_32.png" />
                                            <Setter TargetName="text" Property="Opacity" Value=".5" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Button.Style>
            </Button>

该按钮有一个造型和触发器来改变鼠标悬停的形象。它的工作原理都很好。但我想使用全球资源的按钮。

This Button has a Styling and a Trigger to change the Image on MouseOver. It works all fine. But i want to use a global Resource for the Button.

    <Style x:Key="ButtonsMenue1" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#02FFFFFF" />

    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Padding" Value="1" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">

        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Grid Background="{TemplateBinding Background}">

                    <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                              Margin="10"
                                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                              RecognizesAccessKey="True"
                                                              TextBlock.FontFamily="Segoe WP Light"
                                                              TextBlock.Foreground="Black"
                                                              TextBlock.FontSize="14"

                                                              />

                    <Rectangle x:Name="border" 
                                                           SnapsToDevicePixels="True"
                                                           IsHitTestVisible="False" 
                                                           Opacity="0.25"
                                                           Width="10" Height="20" VerticalAlignment="Stretch" HorizontalAlignment="Right" 
                                                           Fill="DarkGray" Margin="15,0,0,0" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="contentPresenter" Property="Opacity" Value="1" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter TargetName="contentPresenter" Property="Opacity" Value=".5" />
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="true" />
                    <Trigger Property="ToggleButton.IsChecked" Value="true" />
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                        <Setter TargetName="border" Property="Rectangle.Width" Value="2"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

</Style>

我知道我可以使用

I know i can use

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource ButtonsMenue1}">

但它不会显示例如我的矩形作为分隔符。和它看起来并不好。你有我一个很好的解决方案？
好的祝愿

But it wont show for example my Rectangle as Separator. And it looks not good. Do you have a nice Solution for me ? nice Wishes

·曼努埃尔·

推荐答案

可惜你不能继承一个控件模板。您定义继承的样式模板将覆盖你的基本样式定义的模板。

Unfortunately you cannot inherit a ControlTemplate. The template you define for the inherited style will override the template you defined for the base style.

如果你想使用一个基本模板，然后要修改它，你将不得不找到一种方法与性能做到这一点。你会比必须定义具有的DependencyProperty处理特殊需求的定制控制。是这样的：

If you want to use a base template and then want to modify it you will have to find a way to do it with properties. You would than have to define a custom control which has a DependencyProperty to handle special requirements. Something like:

<Style TargetType="{x:Type Button}" BasedOn="{StaticResource ButtonsMenue1}">
    <Setter Property="ImageForMouseOver" Value="..." />
</Style>

这篇关于具有图像触发鼠标悬停WPF按钮来改变形象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！