Mahapps and WPF - How to apply "enhance" effect when I pass the Mouse over a Tile

Question

I’m wearing a Framework called Mahapps in my project WPF and would like to apply a highlighting effect on Tile, when I passed the mouse over it.

Someone knows how to do?

<Page x:Class="SistemaComercial.Presentation.WPF.Views.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:SistemaComercial.Presentation.WPF.Views"
      xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
      xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
      mc:Ignorable="d"
      Foreground="{DynamicResource TextBrush}"
      d:DesignHeight="513"
      Title="MainPage" Width="1138">



    <Page.Resources>
        <Style x:Key="LargeTileStyle" TargetType="mah:Tile">
            <Setter Property="Width" Value="300" />
            <Setter Property="Height" Value="125" />
            <Setter Property="TitleFontSize" Value="16" />
        </Style>      

        <Style x:Key="SmallTileStyle" TargetType="mah:Tile">
            <Setter Property="Width" Value="147" />
            <Setter Property="Height" Value="125" />
            <Setter Property="TitleFontSize" Value="16" />
        </Style>


    </Page.Resources>

    <Grid Margin="0,0,-304,-68" HorizontalAlignment="Left" Width="1442" Height="581" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="87*"/>
            <ColumnDefinition Width="430*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="83*"/>
            <RowDefinition Height="259*"/>
        </Grid.RowDefinitions>

        <TextBlock
                   VerticalAlignment="Center"
                   Text="Start"
                   FontWeight="Light"
                   Foreground="Black"
                   FontSize="30"
                   FontFamily="Segoe UI" Grid.ColumnSpan="2" Margin="10,18,233,83" />
            <WrapPanel Height="382" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="940" Margin="0,-72,492,130" Grid.ColumnSpan="2" Grid.RowSpan="2">
                <mah:Tile Title="Mail" Style="{StaticResource LargeTileStyle}" Content="ImageHere" Background="Teal" Margin="3"/>
                <mah:Tile Title="Finance" Style="{StaticResource LargeTileStyle}" Background="Green"/>
                <mah:Tile Title="People" Style="{StaticResource LargeTileStyle}" Background="#D2691E" />
                <mah:Tile Title="Weather" Style="{StaticResource LargeTileStyle}" Background="#1E90FF" />
                <mah:Tile Title="Weather" Style="{StaticResource SmallTileStyle}" Background="#1E90FF" />
                <mah:Tile Title="Store" Style="{StaticResource SmallTileStyle}" Background="Green" />
            </WrapPanel>
    </Grid>
</Page>

Answer 1

All you need is one trigger which corresponds to the event IsMouseOver and change the background color when True, and use the original color when False.

1. Creating a Style for the Tile

We will create a style for the tile that will have the color setting of the Tile background, along with the Ismouveover event that will change the color of the tile background.

Access the file App.xaml within your project:

Inside the tag <Application.Resources> add the tag <ResourceDictionary> and add the following code:

<ResourceDictionary>
    <Style x:Key="LargeTileStyle" TargetType="Controls:Tile">
        <Setter Property="Background" Value="Blue" />
        <Style.Triggers>
           <Trigger Property="IsMouseOver" Value="True">
               <Setter Property="Background" Value="Gray" />
           </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

Note that I have selected the color Blue as standard color of background of Tile and the color Gray for the color of background when the mouse is over the Tile.

Your file will look like this:

2. Modifying the Tile

With the style created, we change the tile with the style servant:

<Controls:Tile Title="TileOne" Style="{StaticResource LargeTileStyle}" Margin="10,10,196,169" Width="Auto" />

3. Declaration of the Mahapps library

Note that I am using the name Controls to declare the library Mahapps, so much on the App.xaml how much in the class where the Tile, in my case MainWindow.xaml:

xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"