Question

我想在我的一些按钮中显示一个图标。由于在按钮内对齐图像并不是一件容易的事，因此我用户控件，派生控件或其他东西会派上用场。所以我用Google搜索，尝试，编译，现在我想出了以下代码。

不幸的是，我的属性没有任何约束，我看不到文本也没有图像。我怎样才能做到这一点？什么是遗失的东西？我正在使用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>

按钮控件中有一个图标

1 个答案: