default style of custom control in wpf

See more:

C#

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

    }
}

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

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

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>

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