wpf - 如何控制用户控件鼠标悬停时的可见性？答案

【问题标题】：wpf - How can i control visibility on mousehover of usercontrol?wpf - 如何控制用户控件鼠标悬停时的可见性？
【发布时间】：2015-12-18 01:55:44
【问题描述】：

我有一个用户控件，我想禁用 UserControl 中控件的可见性。我只希望当用户的光标悬停在用户控件的主要部分（即“橙色”矩形部分）上时它才可见。红圈是控件的一部分，应该只在“悬停”时可见

MainWindow.xaml

<Window x:Class="WpfApplication1.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"
        WindowStartupLocation="CenterScreen"
        xmlns:local="clr-namespace:WpfApplication1">
    <Grid>
        <Canvas >
            <Canvas.Background>
                <VisualBrush TileMode="Tile" Stretch="Uniform" Viewport="20,20,20,20" ViewportUnits="Absolute">
                    <VisualBrush.Visual>
                        <Rectangle Width="20" Height="20" Fill="sc#1,0.01,0.01,.01" Stroke="sc#1,0.02,0.02,.02" StrokeThickness="0.1"/>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Canvas.Background>

            <local:ShapeNode Canvas.Left="117" Canvas.Top="84"/>
            <local:ShapeNode Canvas.Left="242" Canvas.Top="183"/>

        </Canvas>
    </Grid>
</Window>

UserControl - ShapeNode.xaml

<UserControl x:Class="WpfApplication1.ShapeNode"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Ellipse Fill="Red" Opacity=".2" Height="150" Width="150"></Ellipse>
        <Border Margin="5" Height="50" Width="100" Background="#FFDE6119" CornerRadius="5"></Border>
        <TextBlock VerticalAlignment="Center" Background="Transparent" Text="Donuts" HorizontalAlignment="Center"></TextBlock>
    </Grid>
</UserControl>

【问题讨论】：

鼠标进入Border时是否显示椭圆？
带触发器。这是鼠标悬停触发答案：stackoverflow.com/a/2388563/424129
嘿，又是我的朋友 Ed。嘿！仅当鼠标在矩形范围内时才显示椭圆。

标签： c# wpf xaml user-controls

【解决方案1】：

我宁愿使用可以在 UserControl 中模板化的控件。我最喜欢的是一个按钮——如果有任何用处，这是因为点击事件。但是你可以使用其他的。

<UserControl x:Class="WpfApplication1.ShapeNode"
         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" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
  <Button>
    <Button.Template>
        <ControlTemplate>
            <Grid x:Name="MyGrid" >
                <Ellipse x:Name="MyEllipse" Visibility="Hidden" Fill="Red" Opacity=".2" Height="150" Width="150"/>
                <Border Margin="5" Height="50" Width="100" Background="#FFDE6119" CornerRadius="5"></Border>
                <TextBlock VerticalAlignment="Center" Background="Transparent" Text="Donuts" HorizontalAlignment="Center"></TextBlock>
            </Grid>
        <ControlTemplate.Triggers>
            <Trigger SourceName="MyGrid" Property="IsMouseOver" Value="True">
                <Setter TargetName="MyEllipse" Property="Visibility" Value="Visible"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
        </ControlTemplate>
     </Button.Template>
  </Button>
</UserControl>

【讨论】：

【解决方案2】：

您可以使用binding 来实现您的结果。绑定椭圆的可见性属性到ShapeNode.xaml中的Border

将您的 border 名称设置为例如“border1”并将可见性绑定设置为：

Visibility="{Binding Path=IsMouseOver, ElementName=border1, Converter={StaticResource boolToVisibillityConverter}}"

你必须创建一个 converter 来将你的布尔值更改为 visibility。使用以下转换器：

public class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool flag = false;
        if (value is bool)
        {
            flag = (bool)value;
        }
        return (flag ? Visibility.Visible : Visibility.Hidden);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

请注意，在您的情况下，您必须返回 hidden 而不是 collapsed。否则，当可见性改变时，您的边框会改变位置。

【讨论】：

这是最干净的解决方案 imo

【解决方案3】：

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

<Grid x:Name="Grid1" Width="200" Margin="176,197,248,114" d:LayoutOverrides="HorizontalAlignment, VerticalAlignment">
            <Ellipse Fill="Red" Opacity=".2" Height="150" Width="150" Margin="25,0,25,-19"/>
            <Border Margin="50,40.5" Height="50" Width="100" Background="#FFDE6119" CornerRadius="5"/>
            <TextBlock VerticalAlignment="Center" Background="Transparent" Text="Donuts" HorizontalAlignment="Center">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseEnter">
                        <ei:ChangePropertyAction TargetObject="{Binding ElementName=Grid1}" PropertyName="Visibility">
                            <ei:ChangePropertyAction.Value>
                                <Visibility>Collapsed</Visibility>
                            </ei:ChangePropertyAction.Value>
                        </ei:ChangePropertyAction>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </TextBlock>
        </Grid>

【讨论】：