Question

I am trying to create a silverlight imagebutton control. the xaml and code-behind will follow, but my problem is that I get an ‘unspecified error’ when i try a TemplateBinding to the image’s source property. I’m hoping that someone can help me preserve my last shreds of sanity and last few scraps of hair on my head.

XAML:

    <Grid x:Name="LayoutRoot">

        <Button x:Name="btn" Click="Cancel_Click" Margin="0,0,10,10" 
                Width="{Binding ImageWidth}" Height="{Binding ImageHeight}"  >
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                                                                       Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                                    Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                                                                       Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                                    Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                                                                       Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                                                                       Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="{TemplateBinding Background}" 
                                CornerRadius="33" 
                                Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <Image x:Name="image" Source="{TemplateBinding IconSource}" 
                                   Width="{TemplateBinding Width}" 
                                   Height="{TemplateBinding Height}" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>

    </Grid>
</UserControl>

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace sltest.controls
{
    public partial class ImageButtonControl : UserControl
    {
        public ImageButtonControl()
        {
            InitializeComponent();
        }

        private void Cancel_Click(object sender, RoutedEventArgs e)
        {

        }

        public double ImageWidth { get; set; }
        public double ImageHeight { get; set; }

        public static readonly DependencyProperty IconSourceProperty =
            DependencyProperty.Register("IconSource", typeof(ImageSource), typeof(ImageButtonControl), null);

        public ImageSource IconSource
        {
            get { return base.GetValue(IconSourceProperty) as ImageSource; }
            set { base.SetValue(IconSourceProperty, value); }
        }

    }
}

Answer 1

I’m using the following implementation which contains additional functionality to display text, but you can exclude it:

ImageTextButtonControl class

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace SecureBox.Controls
{

    public class ImageTextButtonControl: Button
    {
        /// 
        /// 
        /// 
        public static readonly DependencyProperty ImageHeightProperty =
           DependencyProperty.Register("ImageHeight", typeof(double), typeof(ImageTextButtonControl), null);

        public double ImageHeight
        {
            get { return (double)GetValue(ImageHeightProperty); }
            set { SetValue(ImageHeightProperty, value); }
        }

        /// 
        /// 
        /// 
        public static readonly DependencyProperty ImageWidthProperty =
           DependencyProperty.Register("ImageWidth", typeof(double), typeof(ImageTextButtonControl), null);

        public double ImageWidth
        {
            get { return (double)GetValue(ImageWidthProperty); }
            set { SetValue(ImageWidthProperty, value); }
        }

        /// 
        /// 
        /// 
        public static readonly DependencyProperty ImageSourceProperty =
           DependencyProperty.Register("ImageSource", typeof(BitmapImage), typeof(ImageTextButtonControl), null);

        public BitmapImage ImageSource
        {
            get { return (BitmapImage)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }


        /// 
        /// 
        /// 
        public static readonly DependencyProperty TextMarginProperty =
           DependencyProperty.Register("TextMargin", typeof(Thickness), typeof(ImageTextButtonControl), null);

        public Thickness TextMargin
        {
            get { return (Thickness)GetValue(TextMarginProperty); }
            set { SetValue(TextMarginProperty, value); }
        }

        /// 
        /// 
        /// 
        public static readonly DependencyProperty TextProperty =
           DependencyProperty.Register("Text", typeof(string), typeof(ImageTextButtonControl), null);

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }


        public ImageTextButtonControl()
        {
            DefaultStyleKey = typeof(ImageTextButtonControl);
        }
    }
}

Themes\generic.xaml contains:

<Style TargetType="local:ImageTextButtonControl">
 <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="local:ImageTextButtonControl">
            <Grid Margin="{StaticResource PhoneTouchTargetOverhang}" toolkit:TiltEffect.IsTiltEnabled="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border BorderBrush="White" BorderThickness="0" Opacity="0.9" >
                    <Image Grid.Column="0" Width="{TemplateBinding ImageWidth}" Height="{TemplateBinding ImageHeight}" Source="{TemplateBinding ImageSource}" VerticalAlignment="Top" />
                </Border>
                <TextBlock Grid.Column="1" Margin="{TemplateBinding TextMargin}" Text="{TemplateBinding Text}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="{TemplateBinding FontSize}" />
            </Grid>
        </ControlTemplate>
    </Setter.Value>
 </Setter>
</Style>

Example of usage:

<local:ImageTextButtonControl ImageSource="/ImagePath/YourImage.png" Text="YourText" FontSize="50" ImageHeight="128" ImageWidth="128" TextMargin="20,0,0,0">
<i:Interaction.Triggers>
    <i:EventTrigger EventName="Click">
        <Command:EventToCommand 
        Command="{Binding GoTo}" CommandParameterValue="YourCommandParameter" />
    </i:EventTrigger>
</i:Interaction.Triggers>

Note:

• I’ve inherited the control from Button control. This allows me to
  subscribe to Click event using MVVMLight framework
• Xaml code is located in special place: Themes\generic.xaml file

I guess you can try to check whether these notes can fix your the issue in your code or use my one instead.