Как создать CustomControl с определенной формой, унаследованной от элемента управления Button? - PullRequest
0 голосов
/ 28 мая 2020

Я создал MenuBarButton.cs CustomControl, в котором я наследую от класса Button, чтобы добавить изображение и текст к кнопке, как показано на рисунке ниже.

enter image description here

Вот мой класс управления:

public class MenuBarButton : Button
{
    public static readonly DependencyProperty ItemNameProperty =
        DependencyProperty.Register(
            "ItemName",             // Property name
            typeof(string),         // Property type
            typeof(MenuBarButton)   // Property owner
            );
    public string ItemName
    {
        get { return (string)GetValue(ItemNameProperty); }
        set { SetValue(ItemNameProperty, value); }
    }

    public static readonly DependencyProperty SourceProperty =
        DependencyProperty.Register(
            "Source",               // Property name
            typeof(ImageSource),    // Property type
            typeof(MenuBarButton)   // Property owner
            );
    public ImageSource Source
    {
        get { return (ImageSource)GetValue(SourceProperty); }
        set { SetValue(SourceProperty, value); }
    }
    static MenuBarButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(
            typeof(MenuBarButton),
            new FrameworkPropertyMetadata(typeof(MenuBarButton))
            );
    }
}

И стиль - вот где я немного застрял. Пока у меня есть это:

<Style TargetType="{x:Type local:MenuBarButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MenuBarButton}">
                <Button>
                    <Grid HorizontalAlignment="Center">
                        <Image Source="{TemplateBinding Source}" />
                        <TextBlock Text="{TemplateBinding ItemName}" />
                    </Grid>
                </Button>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Но в идеале я хотел бы определить пользовательскую форму для кнопки, сохранив при этом остальные функции, такие как наведение курсора и нажатие кнопки. Я действительно хотел сделать это с помощью настраиваемого элемента управления, потому что мне надоело создавать кнопки с Image и TextBlock внутри снова и снова.

Нужно ли мне определять отдельный стиль для формы кнопки явно или есть способ сделать это внутри словаря MenuBarButtonStyle?

1 Ответ

0 голосов
/ 29 мая 2020

Вы можете скопировать шаблон по умолчанию для Button, а затем отредактировать в соответствии с вашими требованиями. Самый простой способ сделать это - добавить элемент <Button /> в исходный файл XAML в Visual Studio, переключиться в режим разработки, щелкнуть правой кнопкой мыши Button и выбрать Edit Template, а затем Edit a copy ....

Затем вы можете, например, заменить элемент Border в шаблоне по умолчанию на Ellipse.

Ниже приведен пример:

<Style x:Key="FocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
    <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Width" Value="200" />
    <Setter Property="Height" Value="200" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                    <Ellipse x:Name="border" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Fill="{TemplateBinding Background}" SnapsToDevicePixels="true"
                                 Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsDefaulted" Value="true">
                        <Setter Property="Stroke" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                        <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                        <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                        <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Использование:

<Button Style="{StaticResource ButtonStyle1}" Content="Button..." />

Внешний вид:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...