CODEWITHSUNDEEP
wpftriggersgridtextblock
AnjumSKhan
AnjumSKhan

Reputation: 9827

Mouse Over effect working only on TextBlock in WPF

I want to check effect of MouseOver on wpf controls. In my code it is working only on textblock and not on others. Code is correct and no error is generated. Where can I get property values of Triggers ? 

<Window x:Class="RoutedEventPr.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">

<Grid Width="200" Height="100" Background="AliceBlue" >
    <Grid.Style>
        <Style TargetType="{x:Type Grid}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
    <Ellipse Fill="#FF3AB0B0" StrokeThickness="4" Width="200" Height="100">
        <Ellipse.Effect>
            <DropShadowEffect/>
        </Ellipse.Effect>
        <Ellipse.Style>
            <Style TargetType="{x:Type Ellipse}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Fill" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
    <TextBlock Text="Press" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock.Style>
            <Style TargetType="{x:Type TextBlock}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</Grid>

Upvotes: 0

Views: 1960

Answers (1)

dkozl
dkozl

Reputation: 33364

Because TextBlock is the only control where you don't set manually the initial value as you do with Background against Grid and Fill against Ellipse. If you want Trigger to be able to overwrite default value you need to bring it into Style as Setter

<Grid Width="200" Height="100" >
    <Grid.Style>
        <Style TargetType="{x:Type Grid}">
            <Setter Property="Background" Value="AliceBlue"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
    <Ellipse StrokeThickness="4" Width="200" Height="100">
        <Ellipse.Effect>
            <DropShadowEffect/>
        </Ellipse.Effect>
        <Ellipse.Style>
            <Style TargetType="{x:Type Ellipse}">
                <Setter Property="Fill" Value="#FF3AB0B0"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Fill" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
    <TextBlock Text="Press" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock.Style>
            <Style TargetType="{x:Type TextBlock}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</Grid>

DependencyProperty follows source hierarchy and manual value takes priority over Style. You can read more under Dependency Property Setting Precedence List

Upvotes: 1

Related Questions