Question

我正在尝试创建一个silverlight图像按钮控件。 xaml和代码隐藏将会跟随，但我的问题是当我尝试使用TemplateBinding到图像的source属性时，我得到一个'未指定的错误'。我希望有人可以帮助我保留我最后的理智，并在头上留下一些头发。

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 类

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);
        }
    }
}

主题\ 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 框架

单击

Xaml代码位于特殊位置： Themes \ generic.xaml 文件

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

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

1 个答案: