XAML button template

Question

0.00/5 (No votes)

See more:

I have code like that, now what i wanna to ask is, can i reuse this code to set different picture for different button but to use same template, and in resources somehow to add more picutes, and let button choose picture based on some button ID.

What I have tried:

<Window.Resources>
        <!--Image Resources-->
        <BitmapImage x:Key="DefaultImage"
                     UriSource="/WPF_LogIn_Terminal;component/Images/Loginbtn.png" />
        <BitmapImage x:Key="OnClickImage"
                     UriSource="/WPF_LogIn_Terminal;component/Images/Loginbtn_clicked.png" />
 <!-- Button Style-->
        <ControlTemplate x:Key="ButtonTemplate"
                         TargetType="Button">
            <Grid Width="95"
                  Height="32"
                  Background="Transparent">
                <Image Name="defaultImage"
                       Source="{StaticResource DefaultImage}"
                       Stretch="Uniform"
                       Visibility="Visible" />
                <Image Name="clickedImage"
                       Source="{StaticResource OnClickImage}"
                       Stretch="Uniform"
                       Visibility="Collapsed" />
                <Label x:Name="ContentLabel"
                       Content="{Binding Content,RelativeSource={RelativeSource AncestorType=Button}}"
                       Foreground="{Binding Foreground,RelativeSource={RelativeSource AncestorType=Button}}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="{Binding FontSize,RelativeSource={RelativeSource AncestorType=Button}}" />

            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed"
                         Value="true">
                    <Setter TargetName="ContentLabel"
                            Property="Foreground"
                            Value="White" />
                    <Setter TargetName="defaultImage"
                            Property="Visibility"
                            Value="Collapsed" />
                    <Setter TargetName="clickedImage"
                            Property="Visibility"
                            Value="Visible" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

    </Window.Resources>

Posted 23-Feb-17 21:18pm

Wannabe Pro

Updated 23-Feb-17 21:55pm

v3

Add a Solution

2 solutions

Solution 2

Here is a quick custom control (not tested).

C#

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;

namespace WpfFlyoutMock3.Control
{
    public class ImageButton : Button
    {
        static ImageButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(BitmapImage), 
                new FrameworkPropertyMetadata(typeof(BitmapImage)));
        }

        #region Properties

        public static readonly DependencyProperty PathDataProperty = DependencyProperty.Register
            (
                "Image",
                typeof(BitmapImage),
                typeof(ImageButton),
                new PropertyMetadata(null)
            );

        public BitmapImage Image
        {
            get { return (BitmapImage)GetValue(PathDataProperty); }
            set { SetValue(PathDataProperty, value); }
        }

        #endregion
    }
}

Posted 23-Feb-17 21:55pm

Graeme_Grant

Comments

Wannabe Pro 24-Feb-17 3:59am

Thanks, im familiar with custom control, but i tought that i can avoid them for this scenario, but apparently i cant. I'll just stick with them then:)

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jimmson · Accepted Answer · 2017-02-23T21:36:00

Solution 1

Hi,

yes, it is possible, what you need is custom control. In this custom control, you can create dependency property for the image path and than use it in your template.

I recommend you to look at these "how to" articles about how to create custom controls:
MSDN: Try it: Create a custom WPF control
WPF tutorial: How to Create a WPF Custom Control

Posted 23-Feb-17 21:36pm

jimmson

Comments

Wannabe Pro 24-Feb-17 3:42am

Thanks for your quick answer. Im trying to avoid custom control becouse it i not something that i will reuse, it's just for starting page, and not for whole project. Other buttons are made with custom control but there i update picture dynamicly, and i tought becouse these pictures are static that i dont need some extra job just to call them. Maybe to seperate them in some XAML.Resources, but then i dont know how to call them specificly for each button.

jimmson 24-Feb-17 3:52am

As I understand, you use the button multiple times on this starting page - you just want to change image for each button. I still think the custom control is the best way and it's easy to create one. It doesn't matter if you reuse control in just one place or not. It's also the clean way how to solve this problem.

Wannabe Pro 24-Feb-17 3:56am

Thanks, i think i'll try that :)

jimmson 24-Feb-17 3:57am

You're welcome. Happy coding :)