WPF MaterialDesign中自定义控件的悬停效果

Question

我想为一个控件添加悬停效果（更改边框或背景颜色即可）。我找到了许多相关的答案，比如这个： WPF：在鼠标悬停在特定控件上时，增加其大小并重叠在其他控件上 问题是，我正在使用自定义控件（我正在专门为 WPF 使用 materialdesign）。我甚至不知道该在 TargetType 上放什么。 更新： 这是我目前所做的。我已经删除了无关的代码。

正如我所说，我不知道该在 TargetType 上放什么，所以我尝试将其放在 Control 上，但它没有起作用。

<md:Card 
    Margin="4 4 4 4" 
    Width="100" 
    Height="220"
    >
    <md:Card.Style>
        <Style TargetType="{x:Type Control}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </md:Card.Style>
    <Grid>
    </Grid>
</md:Card>

- someone

---

你自己试过了吗？如果你展示一下你的代码会更有用。 - esote

我已经编辑了我的问题。 - someone

Answer 1

试试这个：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" 
    xmlns:conv="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
    xmlns:local="clr-namespace:WpfApplication1"
    x:Class="WpfApplication1.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="300" Width="300">
<Window.Resources>


    <Style x:Key="CardStyle1" TargetType="{x:Type materialDesign:Card}">
        <Setter Property="Background" Value="#2fff0000"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type materialDesign:Card}">
                    <Grid Margin="{TemplateBinding Margin}" Background="Transparent">
                        <AdornerDecorator>
                            <AdornerDecorator.CacheMode>
                                <BitmapCache EnableClearType="True" SnapsToDevicePixels="True"/>
                            </AdornerDecorator.CacheMode>
                            <Border Effect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(materialDesign:ShadowAssist.ShadowDepth), Converter={x:Static conv:ShadowConverter.Instance}}"
                    CornerRadius="{TemplateBinding UniformCornerRadius}">
                                <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" 
                        x:Name="PART_ClipBorder"
                        Clip="{TemplateBinding ContentClip}" />
                            </Border>
                        </AdornerDecorator>
                        <ContentPresenter 
            x:Name="ContentPresenter"                    
            Margin="{TemplateBinding Padding}"
            Clip="{TemplateBinding ContentClip}"
            Content="{TemplateBinding ContentControl.Content}" 
            ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
            ContentTemplateSelector="{TemplateBinding ContentControl.ContentTemplateSelector}" 
            ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}">
                        </ContentPresenter>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="PART_ClipBorder" Property="Background" Value="#4fff0000" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>
<Grid>

    <materialDesign:Card Style="{DynamicResource CardStyle1}" 
                         Content="My Sample Card" 
                         HorizontalAlignment="Center" 
                         Margin="0" 
                         VerticalAlignment="Center" 
                         Width="100" 
                         Height="100" />

</Grid>

- jsanalytics

---

对不起，我忘了。当时我没有点赞的权限。 - someone