文本块的自定义控件中的鼠标悬停边框答案

【问题标题】：Mouseover border in a custom control for a textblock文本块的自定义控件中的鼠标悬停边框
【发布时间】：2012-03-07 17:42:39
【问题描述】：

我正在尝试为文本块创建一个自定义控件，当鼠标悬停时，会出现一个边框。我对 WPF 很陌生，只做了一些非常简单的自定义控件。我需要在 XAML UserControl 中实现它。

任何建议将不胜感激。再次感谢 StackOverflow。

编辑：我将不得不将持久性属性绑定到几个不同的控件，所以我真的需要在自定义控件中执行此操作。这就是我所拥有的，但它不起作用：

xmlns:customControls="clr-namespace:****.CustomControls"
....
<customControls:MouseOverBorder>
        <TextBlock Style="{StaticResource ResourceKey=HomePageButtonText}"
                   Height="100"
                   Width="100"
                   Margin="5"
                   Text="View Reports" />
</customControls:MouseOverBorder>

还有用户控件：

<UserControl 
x:Class="****.MouseOverBorder"
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">

<UserControl.Resources>
    <ResourceDictionary>
        <Style x:Key="MouseOverBorder" TargetType="{x:Type Border}">
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="CornerRadius" Value="3" />
            <Style.Triggers>
                <Trigger Property="Border.IsMouseOver" Value="true">
                    <Setter Property="BorderBrush" Value="White" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ResourceDictionary>
</UserControl.Resources>
<Border Style="{DynamicResource MouseOverBorder}" BorderThickness="1" CornerRadius="3" SnapsToDevicePixels="True"/>

【问题讨论】：

创建一个Style，并为IsMouseOver 创建一个Trigger。（这不需要自定义控件，顺便说一句）

标签： wpf xaml user-controls textblock

【解决方案1】：

无需制作用户控件。我已经设法通过以下标记实现了这一点：

<Border Style="{DynamicResource BorderStyle1}" BorderThickness="1" CornerRadius="3" >
    <TextBlock Text="TextBlock" />
</Border>

风格如下：

<Style x:Key="BorderStyle1" TargetType="{x:Type Border}">
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="CornerRadius" Value="3"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="#FF123BBA"/>
        </Trigger>
    </Style.Triggers>
</Style>

编辑：

仍然不明白为什么需要 UserControl（请不要将其称为自定义控件 - 这些是不同的东西），但让我们考虑一下您的示例。

当你写以下内容时

<customControls:MouseOverBorder>
    <TextBlock Style="{StaticResource ResourceKey=HomePageButtonText}"
               Height="100"
               Width="100"
               Margin="5"
               Text="View Reports" />
</customControls:MouseOverBorder>

您实际上是在设置 MouseOverBorder.Content 属性。最初它的内容是在 MouseOverBorder.xaml 文件中定义的。因此，您将使用 TextBlock 替换所有 UserControl 结构。但我还是明白了你的想法并有解决方案。

首先，将自定义的 DependencyProperty 和 CLR 包装器添加到 MouseOverBorder 类：

public static readonly DependencyProperty MyContentTemplateProperty =
    DependencyProperty.Register("MyContentTemplate", typeof(DataTemplate), typeof(MouseOverBorder), null);

[Browsable(true)]
[Category("Other")]
public DataTemplate MyContentTemplate
{
    get { return (DataTemplate)GetValue(MyContentTemplateProperty); }
    set { SetValue(MyContentTemplateProperty, value); }
}

其次，让 MouseOverBorder 里面的东西使用这个属性，例如

<ContentPresenter ContentTemplate="{Binding MyContentTemplate, ElementName=userControl}"/>
<!-- userControl is the Name of MouseOverBorder, defined in xaml -->

最后，您可以按如下方式使用您的 UserControl：

<customControls:MouseOverBorder>
    <customControls:MouseOverBorder.MyContentTemplate>
        <DataTemplate>
            <TextBlock Style="{StaticResource ResourceKey=HomePageButtonText}"
                       Height="100"
                       Width="100"
                       Margin="5"
                       Text="View Reports" />
        </DataTemplate>
    </customControls:MouseOverBorder.MyContentTemplate>
</customControls:MouseOverBorder>

【讨论】：