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

Navigation
1

I'm using a Framework named Mahapps in my project WPF and would like to apply a highlighting effect to Tile when I hover over it.

Does anyone know how to do it? 

<Pagex: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>
    
asked by anonymous 04.08.2017 / 00:33

1 answer

2

All you need is a trigger that 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 definition of the Tile background, along with the IsMouveOver event that will change the color of the tile.

Access the App.xaml file within your project:

Withinthe<Application.Resources>tagaddthe<ResourceDictionary>tagandaddthefollowingcode:

<ResourceDictionary><Stylex: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 the default color of the background of the Tile and the Gray color for the% color of% when the mouse is on background .

Your file looks like this:

2.ModifyingtheTile

WithTilecreated,wechangestylewithtilecreated:

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

3. MahApps Library Statement

Note that I am using the Controls name to declare the MahApps library, both in style and in the class where App.xaml : 

xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    
04.08.2017 / 14:57
Save visit cookie on page Select Chained