wpf keep base style in custom control

Question

Hello,

I have created a custom button as i wanted an image and a text inside it as follows:

<Style TargetType="{x:Type Local:ImageButton}">
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="{x:Type Local:ImageButton}">
                  <StackPanel Height="Auto" Orientation="Horizontal">
                       <Image Margin="0,0,3,0" Source="{TemplateBinding ImageSource}"/>
                       <TextBlock Text="{TemplateBinding Content}" /> 
                   </StackPanel>
             </ControlTemplate>
          </Setter.Value>
     </Setter>
</Style>

Here, ImageButton is a class which inherits from Button class and has ImageSource as a dependency property.

But i want to keep the look and feel of the original button. How can i do it? Thanks.

Answer 1

You could use the Style.BasedOn property:

<Style TargetType="{x:Type Local:ImageButton}" BasedOn="{StaticResource {x:Type Button}}">
    <!-- ... -->
</Style>

Answer 2

Ok, my first try at this was wrong. What you need to do in your code snippet above is instead of overriding the Template, you need to override the ContentTemplate. That should still leave the look and feel of your original Button, but the Content inside your ImageButton will be the text and image. You may also need to do what gehho suggested, just to make sure it knows that everything else comes from your implicit button style.

Answer 3

you can create a button from the Simple Style and modify it. just try this, i don't know whether it will suite you. sorry for the long answer(if it didn't suite your case)

    <!-- SimpleStyles.XAML defines a set of control styles which are simplified starting points for creating your own controls -->

    <!-- Brushes : These are used to define the color for background, foreground, selection, enabled etc of all controls
If you want to change the color of a control you can just chnage the brush; if you want to add a new shape or change arrangement then also edit the template -->

    <!-- NormalBrush is used as the Background for SimpleButton, SimpleRepeatButton -->
    <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#EEE" Offset="0.0"/>
        <GradientStop Color="#CCC" Offset="1.0"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#CCC" Offset="0.0"/>
        <GradientStop Color="#444" Offset="1.0"/>
    </LinearGradientBrush>

    <!-- LightBrush is used for content areas such as Menu, Tab Control background -->
    <LinearGradientBrush x:Key="LightBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFF" Offset="0.0"/>
        <GradientStop Color="#EEE" Offset="1.0"/>
    </LinearGradientBrush>

    <!-- MouseOverBrush is used for MouseOver in Button, Radio Button, CheckBox -->
    <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFF" Offset="0.0"/>
        <GradientStop Color="#AAA" Offset="1.0"/>
    </LinearGradientBrush>

    <!-- PressedBrush is used for Pressed in Button, Radio Button, CheckBox -->
    <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#BBB" Offset="0.0"/>
        <GradientStop Color="#EEE" Offset="0.1"/>
        <GradientStop Color="#EEE" Offset="0.9"/>
        <GradientStop Color="#FFF" Offset="1.0"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#444" Offset="0.0"/>
        <GradientStop Color="#888" Offset="1.0"/>
    </LinearGradientBrush>

    <!-- SelectedBackgroundBrush is used for the Selected item in ListBoxItem, ComboBoxItem-->
    <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD"/>

    <!-- Disabled Brushes are used for the Disabled look of each control -->
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888"/>
    <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE"/>
    <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA"/>

    <!-- Used for background of ScrollViewer, TreeView, ListBox, Expander, TextBox, Tab Control -->
    <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF"/>

    <!-- DefaultedBorderBrush is used to show KeyBoardFocus -->
    <LinearGradientBrush x:Key="DefaultedBorderBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#777" Offset="0.0"/>
        <GradientStop Color="#000" Offset="1.0"/>
    </LinearGradientBrush>

    <SolidColorBrush x:Key="SolidBorderBrush" Color="#888"/>
    <SolidColorBrush x:Key="LightBorderBrush" Color="#AAA"/>
    <SolidColorBrush x:Key="LightColorBrush" Color="#DDD"/>

    <!-- Used for Checkmark, Radio button, TreeViewItem, Expander ToggleButton glyphs -->
    <SolidColorBrush x:Key="GlyphBrush" Color="#444"/>


    <!-- Style and Template pairs are used to define each control Part -->
    <!-- The Style provides default values on the control; the Template gives the elements for each control -->

    <!-- SimpleButtonFocusVisual is used to show keyboard focus around a SimpleButton control -->
    <Style x:Key="SimpleButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Margin="2" Stroke="#60000000" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Simple Button - This control sets brushes on each state. Note that these brushes must be listed above since they are static resources -->
    <Style TargetType="{x:Type Local:MyButton}">
        <Setter Property="FocusVisualStyle" Value="{DynamicResource SimpleButtonFocusVisual}"/>
        <Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Local:MyButton}">

                    <!-- We use Grid as a root because it is easy to add more elements to customize the button -->
                    <Grid x:Name="Grid">
                        <Border x:Name="Border" CornerRadius="3" Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Padding="{TemplateBinding Padding}"/>

                        <!-- Content Presenter is where the text content etc is placed by the control -->
                        <!-- The bindings are useful so that the control can be parameterized without editing the template -->
                        <StackPanel Height="Auto" Orientation="Horizontal">
                            <Image Source="{TemplateBinding ImageSource}" Width="24" Height="24" Stretch="Fill"/>
                            <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Left" Foreground="{DynamicResource TaskButtonTextBrush}" FontWeight="Bold"  Margin="5,0,0,0" VerticalAlignment="Center" FontSize="12" />
                        </StackPanel>
                    </Grid>

                    <!--Each state sets a brush on the Border in the template -->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="BorderBrush" Value="{DynamicResource DefaultedBorderBrush}" TargetName="Border"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" Value="{DynamicResource MouseOverBrush}" TargetName="Border"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" Value="{DynamicResource PressedBrush}" TargetName="Border"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource PressedBorderBrush}" TargetName="Border"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="true"/>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
                            <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--<Style TargetType="{x:Type Local:MyButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Local:MyButton}">
                    <StackPanel Height="Auto" Orientation="Horizontal">
                        <Image Source="{TemplateBinding ImageSource}" Width="24" Height="24" Stretch="Fill"/>
                        <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Left" Foreground="{DynamicResource TaskButtonTextBrush}" FontWeight="Bold"  Margin="5,0,0,0" VerticalAlignment="Center" FontSize="12" />
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>-->



<Grid>
    <Local:MyButton ImageSource="/WpfApplication1;component/MoveRight.png" Margin="33,101,131,127">
        Kishore
    </Local:MyButton>

</Grid>

Answer 4

Please refer to link for the full code:

http://stackoverflow.com/questions/2734825/custom-button-template-in-wpf