4

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>
jsanalytics
  • 13,058
  • 4
  • 22
  • 43
someone
  • 425
  • 8
  • 16

1 Answers1

4

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>

enter image description here

jsanalytics
  • 13,058
  • 4
  • 22
  • 43