WPF中带图像和文本的按钮模板

Question

我想创建带有图像和文本的按钮。例如，我将为“浏览文件夹”和“导入”等按钮使用不同的图像和文本。

其中一种选项是使用模板。我查看了类似的问题

如何创建一个带有图像和文本的按钮模板？

但是否有办法在不使用依赖属性或其他类的情况下绑定图像的来源？

- Archie

Answer 1

不必那么复杂。只需在按钮中放置一个StackPanel就可以实现：

<Button>
  <StackPanel>
    <TextBlock>My text here</TextBlock>
    <Image Source="some.jpg" Stretch="None" />
  </StackPanel>
</Button>

然后你可以配置 StackPanel 控制文本的位置、对齐方式等等。

- Marshal

---

好的，但是你如何设置下划线字符呢？如果我输入“_我的文本”，它会渲染下划线并且alt+M不再起作用。那么你该如何恢复它呢？ - BrainSlugs83

另外，您如何使其缩小图像，以便按钮不会扩展到图像的大小（即，如果我有一个40x40的图像和一个任意大小的按钮 - 我不想手动设置它 - 如何使图像缩小到正确的大小，而不是将我的按钮放大到非常大？ - BrainSlugs83

我想补充一点，您可能希望将 StackPanel 的 Orientation 设置为 Horizontal 以使它们侧边对齐。请注意，如果您使用的是 Grid 而不是 StackPanel，则必须通过调整边距在水平方向上将图像和文本居中到按钮上（因此，StackPanel 是最好的选择）。 - The Muffin Man

这就是答案。 - Khalil Khalaf

现在图像和文本都居中显示在按钮内。我该如何将它们左对齐？ - saidfagan

在互联网上有很多冗长的代码来回答这个问题，但是你提出了一个简单而短小的想法，没有人想到过，哈哈，好样的。 - RAMM-HDR

Answer 2

我添加了一些内容以使它们排列整齐

<Button>
   <StackPanel Orientation="Horizontal">
       <Image Source="/ApplicationName;component/Images/MyImage.ico"/>
       <Label Padding="0">My Button Text</Label>
   </StackPanel>
</Button>

- Sean

---

好的，这可以为我提供一个正常的按钮标签（即带有alt +字母热键） - 我测试它可以在我按下正确组合时点击按钮。 - 现在我只需要弄清楚如何将我的图像缩小到按钮的大小，并且不会导致它使按钮变得巨大。 - BrainSlugs83

如何将 StackPanel 拉伸到按钮内部？HorizontalAlignment="Stretch" 无效。顺便说一句，WPF 很不可预测且愚蠢。 - saidfagan

Answer 3

    <Button>
        <StackPanel Orientation="Horizontal">
            <Image Source="Resources/add.png" Stretch="None" />
            <TextBlock Margin="5,0,0,0">Add</TextBlock>
        </StackPanel>
    </Button>

- mpen

Answer 4

<Button x:Name="MyCoolButton"Width="200" Height="75">
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="Pete-Brown-Silverlight-in-Action.png" Margin="5" Grid.Column="0" />
        <StackPanel Grid.Column="1" Margin="5">
            <TextBlock Text="Buy My Book!" FontWeight="Bold" />
            <TextBlock Text="Pete is writing THE Silverlight 4 book" TextWrapping="Wrap" />
        </StackPanel>
    </Grid>
</Button>

- daniel

Answer 5

不行。你需要为此绑定“Image.Source”创建一个DependencyProperty。当然，你也可以定义一个普通类，其中包含两个属性：“Text”和“ImageSource”或“Uri”，然后使用DataTemplate来呈现此类的实例，但是这将需要编写更多的代码，并且有点“不好”。你不想使用DependencyProperty或自定义类的原因是什么？

- gehho

---

唯一的原因是我想知道是否有其他简单的方法或者可以说是“少代码”的方法来做到这一点。使用TextBlock，我可以使用<TextBlock Text = "{TemplateBinding Content}" />。我想知道为什么不能用Image的Source属性做同样的事情？ - Archie

但是你会把那个TemplateBinding放在哪里呢？绑定到哪个属性上呢？ - gehho

我可以使用“标签”属性来绑定它吗？ - Archie

我不确定。它可能会起作用。然而，就个人而言，我认为这是相当糟糕的代码，因为意图不明确，你没有任何类型安全性...这取决于你。 - gehho

Answer 6

在Sean的答案中添加了Stretch="Uniform"来解决图片最初大于按钮大小的情况（这是BrainSlugs83在评论中提到的问题，我也遇到了）。更多Stretch选项的详细信息请参见MSDN。

<Button>
    <StackPanel Orientation="Horizontal">
        <Image Source="/ApplicationName;component/Images/MyImage.ico" Stretch="Uniform"/>
        <Label Padding="0">My Button Text</Label>
    </StackPanel>
</Button>

想把这个作为评论添加到BrainSlugs83的答案下面，但由于缺乏积分而无法实现，同时也被拒绝编辑Sean的答案。

- userN45290

Answer 7

对我来说，XCeed WPF Toolkit（免费软件）的IconButton很好用。

- marsh-wiggle