从 UserControl 中的元素绑定或公开 IsMouseOver 或任何其他 ReadOnly DependencyProperty

Bind to or Expose IsMouseOver or any other ReadOnly DependencyProperty from element inside UserControl

我有一个带有 UserControl 的 window,该 UserControl 有一个元素。 如果我将鼠标移到 UserControl 内的元素上,我希望 Window 内的其他一些元素做出反应(例如:隐藏它们)。

<Window x:Class="WpfApplication4.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"
    xmlns:local="clr-namespace:WpfApplication4"
    >
<DockPanel>
    <Grid Width="50" Height="50" Background="Yellow">
        <Grid.Style>
            <Style TargetType="Grid">
                <Style.Triggers>

                    <!-- When hovering innerControl inside userControl  this grid should become invisible, of course this doesn't work, it hides the element if I move the mouse over any part of the usercontrol-->

                    <DataTrigger Binding="{Binding userControl.IsMouseOver, ElementName=userControl}" Value="True">
                        <Setter Property="Visibility" Value="Collapsed" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
    </Grid>
    <local:userControl x:Name="userControl" Width="300" Height="300"/>
</DockPanel>

用户控件

<UserControl x:Class="WpfApplication4.userControl"
         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"
         Background="Red"
         >
    <Grid>
    <Grid x:Name="innerControl" Background="Blue" Width="100" Height="100"/>
</Grid>

public partial class userControl : UserControl
{
    public userControl()
    {
        InitializeComponent();
    }

    //This is far from working

    public new bool  IsMouseOver
    {
        get { return (bool)GetValue(IsMouseOverProperty); }
        set { SetValue(IsMouseOverProperty, value); }
    }

    public new static readonly DependencyProperty IsMouseOverProperty =
        Border.IsMouseOverProperty.AddOwner(typeof(Border));
}

我知道我必须使用依赖属性,但我无法调整我找到的示例来解决这个问题。

以防万一有人关心,这是解决方案

改编自此答案:

在 UserControl 中公开子控件属性:

public partial class userControl : UserControl
{
    public userControl()
    {
        InitializeComponent();
        DependencyPropertyDescriptor descriptor = DependencyPropertyDescriptor.FromProperty(FrameworkElement.IsMouseOverProperty, typeof(FrameworkElement));
        descriptor.AddValueChanged(this.innerControl, new EventHandler(OnIsMouseOverChanged));

    }

    // Dependency Property Declaration
    private static DependencyPropertyKey ElementIsMouseOverPropertyKey = DependencyProperty.RegisterReadOnly("ElementIsMouseOver", typeof(bool),typeof(userControl), new PropertyMetadata());
    public static DependencyProperty ElementIsMouseOverProperty = ElementIsMouseOverPropertyKey.DependencyProperty;


    public bool ElementIsMouseOver
    {
        get { return (bool)GetValue(ElementIsMouseOverProperty); }
    }
    private void SetIsMouseOver(bool value)
    {
        SetValue(ElementIsMouseOverPropertyKey, value);
    }

    // Dependency Property Callback
    // Called when this.MyElement.ActualWidth is changed
    private void OnIsMouseOverChanged(object sender, EventArgs e)
    {
        this.SetIsMouseOver(this.innerControl.IsMouseOver);
    }


}

这样使用:

<Window x:Class="WpfApplication4.MainWindow"
  ...
    xmlns:local="clr-namespace:WpfApplication4"
    >
<DockPanel>
    <Grid DockPanel.Dock="Left" Width="100" Height="100" Background="Yellow">
        <Grid.Style>
            <Style TargetType="Grid">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementIsMouseOver, ElementName=userControl}" Value="True">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
    </Grid>

    <local:userControl x:Name="userControl" Width="300" Height="300"/>

</DockPanel>