0

In simple words, how to add a control template to my WPF Application? I am using Visual studio 2010 with .net 4.

Below are a few questions.

1) According to my understanding, a custom template is something that is used for re-defining an already defined default settings of a control. Am I right In this case ?

2) If we want the button to be with an image whenever I drag and drop from tool-box, then I should have over-ridden the XAML code for the button somewhere.

For example, I have got a control template code below that re-defines how the progress bar should be

[1. A simple example from stack overflow] WPF progressbar style

<ControlTemplate x:Key="CustomProgressBar" TargetType="ProgressBar" >
    <Grid Name="TemplateRoot" SnapsToDevicePixels="True">
        <Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
        <Border CornerRadius="0,0,0,0" Margin="1,1,1,1">
            <Border.Background>
                <SolidColorBrush Color="Transparent"/>                       
            </Border.Background>
        </Border>
        <Border BorderThickness="0,0,0,0" BorderBrush="Transparent" Margin="1,1,1,1">
            <Border.Background>
                <SolidColorBrush Color="Transparent"/>                        
            </Border.Background>
        </Border>
        <Rectangle Name="PART_Track" Margin="1,1,1,1" />
        <Decorator Name="PART_Indicator" Margin="1,1,1,1" HorizontalAlignment="Left">
            <Grid Name="Foreground">
                <Rectangle Fill="Transparent" Name="Indicator" />
                <Grid Name="Animation" ClipToBounds="True">
                    <Border Name="PART_GlowRect" Width="100"  Margin="0,0,0,0" HorizontalAlignment="Left" Background="LightBlue"/>                                                            
                </Grid>
                <Grid Name="Overlay">                         
                </Grid>
            </Grid>
        </Decorator>
        <Border BorderThickness="0" CornerRadius="0,0,0,0" BorderBrush="Transparent" />
    </Grid>           
</ControlTemplate>

Also , I tried creating a custom control. Projects->New->Custom control and the VS-2010 produces two files Customcontrol.cs and customcontroldesigner.cs. What should I do afterwards ? (Say I need a button with an image hence always).

Thanks.

Improve this question

1 Answer 1

Reset to default
1

(1) Control Templates

From the MSDN (source):

"The ControlTemplate allows you to specify the visual structure of a control. The control author can define the default ControlTemplate and the application author can override the ControlTemplate to reconstruct the visual structure of the control."

You can create a control template in xaml yourself or you can use Expression Blend to create a copy to edit and overwrite the existing template with.

(2) A Button Template

The default control template for a button is as follows:

<ControlTemplate TargetType="{x:Type Button}">
      <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
       <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="true">
        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonHoverBorder}"/>
        <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
       </Trigger>
       <Trigger Property="IsKeyboardFocused" Value="true">
        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonHoverBorder}"/>
        <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
       </Trigger>
       <Trigger Property="IsPressed" Value="true">
        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ToolBarButtonPressedBorder}"/>
        <Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonPressed}"/>
       </Trigger>
       <Trigger Property="IsEnabled" Value="false">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>

To alter it to show different content you would add/change items near the border/ presenter tags. Image does not support direct content so you wont be able to write:

            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                <Image Source="/project;component/Images/image.png">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Image>
            </Border>

(3) Create a control with a button that has an image in it

To do this you can create a UserControl and add a button like below with an image:

<UserControl x:Class="ImageButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Button >
            <Image Source="/project;component/Images/image.png"></Image>
        </Button>
    </Grid>
</UserControl>

This will create a control with an Image in it that is drag-able from the toolbox. Obviously the image source is a static value but you can change it in code, pass the class a path parameter, or create a property to access it.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.