Create an custom button control in WP8

Question

...

---

Ok, thanks Scott Nimrod, I find a way: create a new project , add a new user control, build to dll and add reference to my app project

Here's my code, if anyone could need :)

In my app's xaml page (the click event worked but the 2 Image "sourceNormal" and "sourcePressed" not visible)

<local:ButtonImage Width="40" Height="40"
                         Click="ButtonImage_Click"
                         SourceNormal="/download_home.png"                             
                         SourcePressed="/download_nowplaying.png"/>

UserControl XAML

<UserControl x:Class="MyCustomControl.ButtonImage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"

DataContext="{Binding RelativeSource={RelativeSource Self}}"         
xmlns:ntd="clr-namespace:MyCustomControl">

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Button x:Name="Button_Image" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ImageNormal">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ImagePressed">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ImageNormal">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ImagePressed">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Image x:Name="ImageNormal" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{Binding SourceNormal}" Stretch="Uniform"/>
                    <Image x:Name="ImagePressed" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{Binding SourcePressed}" Stretch="Uniform"/>                        
                </Grid> 
            </ControlTemplate>
        </Button.Template>
    </Button>

</Grid>

UserControl code behind:

namespace MyCustomControl
{
public partial class ButtonImage : UserControl
{
    public ButtonImage()
    {
        InitializeComponent();            
        Button_Image.Click += ButtonImage_Click;
    }

    public ImageSource SourceNormal
    {
        get { return (ImageSource)GetValue(SourceNormalProperty);}
        set { SetValue(SourceNormalProperty, value); }
    }        
    public ImageSource SourcePressed
    {
        get { return (ImageSource)GetValue(SourcePressedProperty); }
        set { SetValue(SourcePressedProperty, value); }
    }

    public event EventHandler Click;
    void ButtonImage_Click(object sender, RoutedEventArgs e)
    {
        var eventHandler = this.Click;
        if (eventHandler != null)
        {
            eventHandler(this, e);
        }
    }



    /////////////////////// SourceNormal /////////////////////////////////////////////////////

    //----------------------------------------------------------------------------------------
    public static readonly DependencyProperty SourceNormalProperty = DependencyProperty.RegisterAttached(
        "SourceNormal",
        typeof(ImageSource),
        typeof(ButtonImage),
        new PropertyMetadata(null)
    );

    public static ImageSource GetSourceNormal(UIElement element)
    {
        if (element == null)
        {
            new ArgumentNullException("element");
        }
        return (ImageSource)element.GetValue(SourceNormalProperty);
    }

    public static void SetSourceNormal(UIElement element, ImageSource value)
    {
        if (element == null)
        {
            new ArgumentNullException("element");
        }

        element.SetValue(SourceNormalProperty, value);
    }
    //----------------------------------------------------------------------------------------

    /////////////////////// SourcePressed ////////////////////////////////////////////////////

    //----------------------------------------------------------------------------------------
    public static readonly DependencyProperty SourcePressedProperty = DependencyProperty.RegisterAttached(
        "SourcePressed",
        typeof(ImageSource),
        typeof(ButtonImage),
        new PropertyMetadata(null)
    );

    public static ImageSource GetSourcePressed(UIElement element)
    {
        if (element == null)
        {
            new ArgumentNullException("element");
        }
        return (ImageSource)element.GetValue(SourcePressedProperty);
    }

    public static void SetSourcePressed(UIElement element, ImageSource value)
    {
        if (element == null)
        {
            new ArgumentNullException("element");
        }

        element.SetValue(SourcePressedProperty, value);
    }
}

}

Answer 1

The answer is Yes.

Telerik does this with their RadControls.

Just create a separate project and add the major references that WPF relies on for UI. This is also a pattern when implementing Prism modules.

In your other projects, just add a reference to the dll that your style is defined in.