wpf中自定义控件的默认样式 [英] default style of custom control in wpf

问题描述

你好我的朋友们..
我想在wpf中设计一个灵活的imagebutton.
首先，我在名称空间"ImageButton"中创建一个WPF自定义控件库，如下所示:

hello my friends..
i want to design a flexible imagebutton in wpf.
first,i create a WPF Custom Control Library in nameSpace ''ImageButton'' like below:

namespace ImageButton
{

    public class ImageButton : Button
    {

        static ImageButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
        }


        #region DisplayMode
        [System.ComponentModel.Category("ImageButton")]
        
        public ImageDisplayMode DisplayMode
        {
            get { return (ImageDisplayMode)GetValue(DisplayModeProperty); }
            set { SetValue(DisplayModeProperty, value); }
        }

        public static readonly DependencyProperty DisplayModeProperty =
            DependencyProperty.Register("DisplayMode", typeof(ImageDisplayMode), typeof(ImageButton), new FrameworkPropertyMetadata(ImageDisplayMode.ImageAboveText), displaymodevalidate);

        public static bool displaymodevalidate(object value)
        {
            return value is ImageDisplayMode;
        }


        #endregion

    }
}

在命名空间"ImageButton"中，我定义了一个名为"ImageDisplayMode"的枚举，如下所示:

in the namespace "ImageButton" i define a enum named ''ImageDisplayMode'' like below:

public enum ImageDisplayMode
{
    ImageAboveText = 1,
    TextAboveImage = 2,
    ImageBeforeText = 3,
    TextBeforeImage = 4
}

并将Generic.xaml文件修改如下:

and the Generic.xaml file modified like below:

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="clr-namespace:ImageButton">
    <Style x:Name="style1" TargetType="{x:Type local:ImageButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ImageButton}">
                    <Button Background="Transparent">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Image Grid.ColumnSpan="2" Name="img1" Width="{TemplateBinding ImageWidth}" Stretch="{TemplateBinding ImageStretch}" Height="{TemplateBinding ImageHeight}"  Source="{TemplateBinding Image}"/>
                            <TextBlock Grid.ColumnSpan="2" Grid.Row="1" Name="lbl1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Text="{TemplateBinding Text}"/>
                           
                        </Grid>
                    </Button>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

上面代码的结果如下图:

[图片]
文字

我想要:
当我更改imagebutton的"DisplayMode"属性的值时，对于每个可能的值，控件都会更改为以下形式:

1 -------------------------------------
[图片]
文字
2 -------------------------------------
文字
[图片]
3 -------------------------------------
[Image]文字
4 --------------------------------------
文字[图片]


我想，我必须在Generic.xaml代码中的网格中定义触发器，如下所示:

the result of above code is below figure:

[Image]
Text

i want:
when i change the value of ''DisplayMode'' property of imagebutton,for each possible value ,control changes to below forms:

1-------------------------------------
[Image]
Text
2-------------------------------------
Text
[Image]
3-------------------------------------
[Image]Text
4--------------------------------------
Text[Image]


i guess ,i must define trigger in the grid in Generic.xaml codes like below:

<Grid.Triggers>
    <Trigger Property="DisplayMode" Value="2">
        <Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
        <Setter Property="Grid.Row" TargetName="img1" Value="1"/>
    </Trigger>
</Grid.Triggers>

请告诉我:
我该怎么办?

非常感谢

please tell me :
How can i do it?

Thank you Very Much

推荐答案

我将触发器移至ControlTemplate.Triggers并将Trigger.Value从"2"更改为"ImageAboveText"(我的自定义枚举项之一)如下所示:

编辑前:

I move my triggers to ControlTemplate.Triggers and change Trigger.Value from "2" to "ImageAboveText" ( one of my custom enum items ) like below:

Before

<Trigger Property="DisplayMode" Value="2">
     <Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
     <Setter Property="Grid.Row" TargetName="img1" Value="1"/>
 </Trigger>

编辑后:

After

<ControlTemplate.Triggers>
    <Trigger Property="DisplayMode" Value="ImageAboveText">
        <Setter Property="Grid.RowSpan" TargetName="lbl1" Value="1"/>
        <Setter Property="Grid.RowSpan" TargetName="img1" Value="1"/>

        <Setter Property="Grid.ColumnSpan" TargetName="lbl1" Value="2"/>
        <Setter Property="Grid.ColumnSpan" TargetName="img1" Value="2"/>

        <Setter Property="Grid.Row" TargetName="img1" Value="0"/>
        <Setter Property="Grid.Row" TargetName="lbl1" Value="1"/>

        <Setter Property="Grid.Column" TargetName="img1" Value="0"/>
        <Setter Property="Grid.Column" TargetName="lbl1" Value="0"/>
    </Trigger>
</ControlTemplate.Triggers>

这篇关于wpf中自定义控件的默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！