Question

我已经触发了一个视图框，当鼠标悬停在视图框上时，内容会发生变化。

这样可行，但由于视图框的内容很小，我希望在视图框周围有一个边框，它也会触发鼠标悬停事件。

<Viewbox Width="50" x:Name="ActionIconBox1" Height="40.5">
    <ContentControl>
        <ContentControl.Style>
            <Style TargetType="{x:Type ContentControl}">
                    <Setter Property="Content" Value="{StaticResource action_message}"/>
                    <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Viewbox,AncestorLevel=1}, Path=IsMouseOver}" Value="True" >
                                <Setter Property="Content" Value="{StaticResource action_message_focus}"/>
                            </DataTrigger>
                    </Style.Triggers>
            </Style>
        </ContentControl.Style>
    </ContentControl>
</Viewbox>

仅当鼠标位于内容控件上时才有效，而不是鼠标进入Viewbox时。

资源是画布

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_message" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="38" Height="39.75" Canvas.Left="19" Canvas.Top="22" Stretch="Fill" Fill="#FF1BA1E2" Data="F1 M 33,51L 36.4167,61.75L 24,51L 19,51L 19,22L 57,22L 57,51L 33,51 Z "/> </Canvas>

为什么绑定不起作用？

Answer 1

您将Trigger放在ContentControl上，所以当然它只适用于此。只需将ContentControl的尺寸设置为与ViewBox相同的尺寸，即可删除边框＆＃39;正如你所说的那样。

Answer 2

只需将其放入边框并更改AncestorType。

    <Viewbox Width="50" x:Name="ActionIconBox1" Height="40.5" >
        <Border BorderThickness="2" BorderBrush="Red">
            <ContentControl>
                <ContentControl.Style>
                    <Style TargetType="{x:Type ContentControl}">
                        <Setter Property="Content" Value="{StaticResource action_message}"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Border,AncestorLevel=1}, Path=IsMouseOver}" Value="True" >
                                <Setter Property="Content" Value="{StaticResource action_message_focus}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentControl.Style>
            </ContentControl>
        </Border>
    </Viewbox>

在父鼠标悬停时更改样式

2 个答案: