带有图标的按钮控件

Question

我想在我的一些按钮中显示一个图标。由于对齐按钮内的图像并不是很简单，我通过用户控件，派生控件或其他东西可以派上用场。所以我搜索了一下，尝试了一下，编译了一下，现在我想出了下面的代码。

不幸的是，我的属性没有绑定任何东西，我看不到文本和图像。我该如何做这项工作？缺失的是什么？我使用VS2010和.NET 4.0。

XAML：

<Button 
    x:Class="MyNS.IconButton" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"> 

    <Button.Template> 
    <ControlTemplate> 
     <StackPanel Orientation="Horizontal"> 
     <Image Source="{Binding IconSource}" Name="Icon" Width="{Binding IconSize}" Height="{Binding IconSize}" Margin="0,0,4,0"/> 
     <ContentPresenter/> 
     </StackPanel> 

     <ControlTemplate.Triggers> 
     <Trigger Property="Button.IsEnabled" Value="False"> 
      <Setter Property="Image.Opacity" Value="0.5"/> 
     </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
    </Button.Template> 
</Button> 

代码文件：

public partial class IconButton : Button 
{ 
    public static DependencyProperty IconSourceProperty = DependencyProperty.Register(
     "IconSource", 
     typeof(ImageSource), 
     typeof(IconButton)); 

    public static DependencyProperty IconSizeProperty = DependencyProperty.Register(
     "IconSize", 
     typeof(int), 
     typeof(IconButton), 
     new PropertyMetadata(11)); 

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

    public int IconSize 
    { 
     get { return (int) GetValue(IconSizeProperty); } 
     set { SetValue(IconSizeProperty, value); } 
    } 

    public IconButton() 
    { 
     InitializeComponent(); 
    } 
} 

Answer 1

它看起来像你的数据绑定可能是问题的根源。通过这些更改，我可以使用IconButton将图像显示在另一个页面中。

我做了以下修改：

<!-- Added x:Name="_this" --> 
<Button x:Class="ButtonTest.IconButton" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300" 
    x:Name="_this"> 
<Button.Template> 
    <ControlTemplate> 
     <StackPanel Orientation="Horizontal" 
        Background="Red"> 

      <!-- Bindings Changed Here --> 
      <Image Source="{Binding ElementName=_this, Path=IconSource}" 
       Name="Icon" 
       Width="{Binding ElementName=_this, Path=IconSize}" 
       Height="{Binding ElementName=_this, Path=IconSize}" Margin="0,0,4,0"/> 
      <ContentPresenter /> 
     </StackPanel> 
     <ControlTemplate.Triggers> 
      <Trigger Property="Button.IsEnabled" Value="False"> 
       <Setter Property="Image.Opacity" Value="0.5"/> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
</Button.Template>