Change Label forground on Stackpanel mouseover

105 views Asked by At

How can I change the foreground of the Label and the TextBlock in my code with just xaml?

Or is it even possible to change the Label foreground as soon as the Stackpanel IsMouseOver event takes place, with just with xaml?

<Window x:Class="MouseOverTest.MainWindow"
            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:local="clr-namespace:MouseOverTest"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
    
        <Window.Resources>
            <!--Color-->
            <SolidColorBrush x:Key="BorderDesign" Color="#A73838"/>
    
            <LinearGradientBrush x:Key="ColorDesign" StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#A73838" Offset="0"/>
                <GradientStop Color="#D87878" Offset="1"/>
            </LinearGradientBrush>
    
            <LinearGradientBrush x:Key="ColorMouseOverDesign" StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#D87878" Offset="0"/>
                <GradientStop Color="#A73838" Offset="1"/>
            </LinearGradientBrush>
        </Window.Resources>
        
        <Grid>
            
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="7*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="7*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
    
            
            <StackPanel x:Name="SP" Orientation="Vertical" Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <StackPanel.Resources>
                    <Style TargetType="{x:Type StackPanel}">
                        <Setter Property="Background" Value="{StaticResource ColorDesign}"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{StaticResource ColorMouseOverDesign}"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                    
                    <Style TargetType="{x:Type Label}">
                        <Setter Property="Foreground" Value="Black"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
    
                    <Style TargetType="{x:Type TextBlock}">
                        <Setter Property="Foreground" Value="Black"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </StackPanel.Resources>
                <Button x:Name="BT" Content="TestButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="50" Margin="0,10,0,5"/>
                <Label x:Name="L" Content="Test Label" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="50" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
                <TextBlock x:Name="TB" Text="This is a Test, a Test TextBlock..." VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="50"/>
            </StackPanel>
    
        </Grid>
</Window>

The only way I have found so far, was to change it with C# Methods. But as an result i had for 4 StackPanels 8 Methods...

I canĀ“t find of a proper way to solve this, i would appreciate your help on this problem.

Thanks in advants.

1

There are 1 answers

1
Stan1k On

First Question: You can use the Foreground property inside your Label or TextBlock.
Second Question: I've just took one of your Styles and modified it a bit:

<Style TargetType="Label">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="Blue"/>
        </Trigger>
    </Style.Triggers>
</Style>  

<Label Margin="10" HorizontalAlignment="Center" Content="Your text" FontSize="20"/>

If you now use a Label as soon as you hover over the Label the Foreground color changes.