开发者

WPF Mouseover Trigger Effect for Child Controls

开发者 https://www.devze.com 2023-04-11 04:57 出处:网络
Lets say I have this bit of code: <Window> <Window.Resources> <Color x:Key=\"MyColor\" A=\"255\"

Lets say I have this bit of code:

<Window>
    <Window.Resources>
        <Color x:Key="MyColor"
               A="255"
               R="152"
               G="152"
               B="152" />
        <DropShadowEffect x:Key="MyEffect" 
                          ShadowDepth="0"
                          Color="{StaticResource MyColor}"
                          BlurRadius="10" />
        <Style x:Key="MyGridStyle"
               TargetType="{x:Type Grid}">
            <Setter Property="Height"
                    Value="200" />
            <Setter Property="Width"
                    Value="200" />
            <Style.Resources>
                <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Width"
                            Value="100" />
                </Style>
                <Style TargetType="{x:Type Image}">
                    <Setter Property="Height"
                            Value="100" />
                    <Setter Property="Width"
                            Value="100" />
                </Style>
            </Style.Resources>
            <Style.Trigge开发者_开发百科rs>
                <Trigger Property="IsMouseOver"
                         Value="true">
                    <!-- How do I apply my effect when this grid is hovered over to Image and TextBox, but not the grid itself? -->
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid Style="{StaticResource MyGridStyle}">
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Grid.Row="0"
               Grid.Column="0"
               Source="image.png" />
        <TextBlock Grid.Row="0"
                   Grid.Column="0"
                   Text="Hover Over Me" />
    </Grid>
</Window>

Basically I have a Style applied to the Grid that says any TextBlock or Image within it should be styles to a certain size.

I want to create a Trigger on the Grid that causes an effect to be applied to all TextBlocks and Images within the Grid, but not to the Grid itself.

I can apply the Trigger directly to TextBlock and/or Image, but then the effect only occurs on each element separately. I need to have the effect occur to any TextBlock and/or Image within the Grid despite which inner child element I am hovered over.

Can anyone help me with this?


You can do it the other way around. That is, add DataTriggers to Image and TextBlock and make them trigger on IsMouseOver for the ancestor Grid.

Note: If you want this effect to trigger as soon as the mouse is over the Grid you will need to set Background to a value, like Transparent. By default, the Background is null and this value isn't used in hit testing.

<Style x:Key="MyGridStyle" TargetType="{x:Type Grid}">
    <!--<Setter Property="Background" Value="Transparent"/>-->
    <Setter Property="Height" Value="200" />
    <Setter Property="Width" Value="200" />
    <Style.Resources>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Width" Value="200" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid},
                                               Path=IsMouseOver}" Value="True">
                    <Setter Property="Effect" Value="{StaticResource MyEffect}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type Image}">
            <Setter Property="Height" Value="200" />
            <Setter Property="Width" Value="200" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid},
                                               Path=IsMouseOver}" Value="True">
                    <Setter Property="Effect" Value="{StaticResource MyEffect}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Style.Resources>
</Style>


We once had a similar requirement of outer glowing ONLY the content of a row of a list box, not the row overall. We took help of this article... http://drwpf.com/blog/2008/03/25/itemscontrol-i-is-for-item-container.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号