I want to add hover effect to a control (changing border or background color will do). I have found many answers about it such as this one: WPF: On Mouse hover on a particular control, increase its size and overlap on the other controls
The problem is I am using custom control (I am using materialdesign
for wpf specifically). I don't even know what to put on the TargetType
.
UPDATE: Here is what I have done so far. I have removed irrelevant code.
As I have said, I don't know what to put on the TargetType
, so I tried to put Control
but it is not working.
<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>
Try this:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With