wp7: how to create image button and bind template to ImageSource dependency property
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.Vis开发者_运维知识库ualStateGroups>
<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); }
}
}
}
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.
精彩评论