wp7：如何创建图像按钮并将模板绑定到 ImageSource 依赖属性

Question

我正在尝试创建一个 silverlight imagebutton 控件。 xaml 和代码隐藏将随之而来，但我的问题是当我尝试对图像的源属性进行 TemplateBinding 时出现“未指定的错误”。我希望有人能帮助我保存我最后的理智和头上的最后几根头发。

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>

代码背后：

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

我正在使用以下实现，其中包含显示文本的附加功能，但您可以将其排除：

ImageTextButtonControl 类

使用系统； 使用 System.Net； 使用 System.Windows； 使用 System.Windows.Controls； 使用 System.Windows.Controls.Primitives； 使用 System.Windows.Documents； 使用 System.Windows.Ink； 使用 System.Windows.Input； 使用 System.Windows.Media； 使用 System.Windows.Media.Animation； 使用 System.Windows.Media.Imaging； 使用 System.Windows.Shapes； 命名空间 SecureBox.Controls { 公共类 ImageTextButtonControl：按钮 { /// /// /// 公共静态只读 DependencyProperty ImageHeightProperty = DependencyProperty.Register("ImageHeight", typeof(double), typeof(ImageTextButtonControl), null); 公共双 ImageHeight { 获取{返回（双）GetValue（ImageHeightProperty）； } 设置 { SetValue(ImageHeightProperty, 值); } } /// /// /// 公共静态只读 DependencyProperty ImageWidthProperty = DependencyProperty.Register("ImageWidth", typeof(double), typeof(ImageTextButtonControl), null); 公共双 ImageWidth { 获取{返回（双）GetValue（ImageWidthProperty）； } 设置 { SetValue(ImageWidthProperty, value); } } /// /// /// 公共静态只读 DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(BitmapImage), typeof(ImageTextButtonControl), null); 公共位图图像图像源 { 获取 { 返回 (BitmapImage)GetValue(ImageSourceProperty); } 设置 { SetValue(ImageSourceProperty, value); } } /// /// /// 公共静态只读 DependencyProperty TextMarginProperty = DependencyProperty.Register("TextMargin", typeof(Thickness), typeof(ImageTextButtonControl), null); 公共厚度TextMargin { 得到 { 返回（厚度）GetValue（TextMarginProperty）; } 设置 { SetValue(TextMarginProperty, value); } } /// /// /// 公共静态只读 DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(ImageTextButtonControl), null); 公共字符串文本 { 获取{返回（字符串）GetValue（TextProperty）； } 设置 { SetValue(TextProperty, value); } } 公共 ImageTextButtonControl() { DefaultStyleKey = typeof(ImageTextButtonControl); } } }

Themes\generic.xaml 包含：

<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>

使用示例：

<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>

注意：

• 我从 Button 控件继承了该控件。这让我能够 使用 MVVMLight 框架订阅 Click 事件
• Xaml 代码位于特殊位置：Themes\generic.xaml 文件

我想您可以尝试检查这些注释是否可以解决您代码中的问题，或者改用我的。