Граница наведения мыши в пользовательском элементе управления для текстового блока - PullRequest
Новая
       5

Граница наведения мыши в пользовательском элементе управления для текстового блока

1 голос
/ 07 марта 2012

Я пытаюсь создать пользовательский элемент управления для текстового блока, чтобы при наведении курсора на нем появлялась рамка.Я довольно новичок в 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: 

<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"/>

1 Ответ

2 голосов
/ 07 марта 2012

Нет необходимости создавать UserControl. Мне удалось сделать это с помощью следующей разметки: 

<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>

EDIT:

До сих пор не понимаю, зачем вам UserControl (не называйте его пользовательским элементом управления - это разные вещи), но давайте рассмотрим ваш пример.

Когда вы пишете следующее 

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

вы фактически устанавливаете свойство MouseOverBorder.Content. Первоначально его содержимое определяется в файле MouseOverBorder.xaml. Таким образом, вы заменяете всю свою структуру UserControl на TextBlock. Но все же я понял вашу идею и нашел решение для нее.

Сначала добавьте пользовательский 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>
...