user1006203
user1006203

Reputation: 13

Control Template for a button to be displayed as an image.png

Iam have been working on the control templates since few days,iam successfull in changing a button to the ellipse ,but when iam about to create a control template for button to be displyed as a image,i am not Successful.If any one can know it ,please help me out.

Upvotes: 0

Views: 447

Answers (1)

Erik Öjebo
Erik Öjebo

Reputation: 10871

The following xaml shows a button with a ControlTemplate consisting of only an image:

<Button>
    <Button.Template>
        <ControlTemplate>
            <Image Source="/arrow_down_blue.png" Stretch="None" />
        </ControlTemplate>
    </Button.Template>
</Button>

If you cannot get it to work, make sure that the path to your image is valid. The easiest way is to add the image to your solution and mark it as Resource, by right clicking the image in the solution explorer and setting Build Action to Resource. You can then reference the image by using a so called pack URI on the form:

/FolderName/OtherFolderName/FileName.png

The path above is relative to the root of the current project.

The ControlTemplate could also be set though a Style or by setting the Template property of the button to a StaticResource:

<Grid>
    <Grid.Resources>
        <ControlTemplate x:Key="ImageButtonTemplate">
            <Image Source="/arrow_down_blue.png" Stretch="None" />
        </ControlTemplate>

        <Style TargetType="Button" x:Key="ImageButtonStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Image Source="/arrow_down_blue.png" Stretch="None" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>

    <StackPanel>
        <Button Template="{StaticResource ImageButtonTemplate}" />

        <Button Style="{StaticResource ImageButtonStyle}" />

    </StackPanel>
</Grid>

An example of how to add triggers to your control template can be found in this question.

Upvotes: 3

Related Questions