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

我想创建一个silverlight imagebutton控件。 xaml和代码隐藏将遵循，但我的问题是，当我尝试TemplateBinding到图像的源属性时，出现'未指定的错误'。我希望有人能够帮助我保存最后一丝理智，并在头上留下几缕头发。wp7：如何创建图像按钮并将模板绑定到ImageSource依赖项属性

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

    } 
}

来源

2011-09-30 yamspog

任何特定的原因，你绑定图像源，而不是像Uri更友好的XAML？ –

我用下面的实现包含额外的功能来显示文字，但可以排除：

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

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

注：

我从继承了控件按钮控件。这让我订阅点击使用MVVMLight事件框架
XAML代码位于特殊的地方：主题\ generic.xaml文件

我想你可以尝试检查是否这些笔记可以在您的代码中修复您的问题，或者使用我的代码。

来源

2011-12-15 13:03:26

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

回答

相关问题