Question

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

Answer 1

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

Before Edit:

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

After Edit:

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

my problem solved successfully….
Thank you.