wpf中带有图像和文本的按钮模板答案

【问题标题】：Button template with image and text in wpfwpf中带有图像和文本的按钮模板
【发布时间】：2011-02-13 04:40:36
【问题描述】：

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

其中一个选项是使用模板。我看过类似的问题

Creating an image+text button with a control template?

但是有什么方法可以在不使用依赖属性或任何其他类的情况下绑定图像源？

【问题讨论】：

标签： wpf templates binding custom-controls

【解决方案1】：

不必那么复杂。将 StackPanel 放在按钮中这样简单的事情就可以解决问题：

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

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

【讨论】：

好的，但是如何设置下划线字符呢？如果我将“_My text here”放在此处，则会呈现下划线并且 alt+M 不再起作用。那么如何找回呢？
另外，你如何让它缩小图像，使按钮不会爆炸到你的图像大小（即，如果我有一个 40x40 的图像和一个任意大小的按钮按钮-- 我不想手动设置 -- 如何让图像缩小到合适的大小，而不是把我的按钮放大到超级大？
我想补充一点，您可能希望将StackPanel 的Orientation 设置为Horizontal 以让它们并排排列。请注意，如果您使用网格而不是 StackPanel，则必须使用边距来使按钮上的图像和文本水平居中（因此堆栈面板是要走的路）。
这就是答案
现在图像和文本在按钮内居中。我怎样才能让它们左对齐？

【解决方案2】：

我添加了一些东西来很好地排列它们

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

【讨论】：

这很好地给了我一个正常的按钮标签（即使用 alt+字母热键）——我测试了当我按下正确的组合时它会单击按钮。 -- 现在我只需要弄清楚如何将我的图像缩小到按钮的大小，并且不会导致按钮变得很大。
如何在 Button 内拉伸 StackPanel？ HorizontalAlignment="Stretch" 不起作用。附言WPF 是不可预测且愚蠢的。

【解决方案3】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

没有。您会将Image.Source 绑定到什么？为此，您需要一个 DependencyProperty。当然，您也可以定义一个包含两个属性的普通类：Text 和 ImageSource 或 Uri，然后使用 DataTemplate 来呈现此类的实例，但这将是更多的代码编写，并且有点“臭”。

您不想使用依赖属性或自定义类的原因是什么？

【讨论】：

唯一的原因是我想知道是否有任何其他简单的方法，或者你可以说“更少代码”的方法来做到这一点。使用 texblock 我可以使用我想知道为什么我不能对 Image 的 Source 属性做同样的事情？
但是在哪里你会把TemplateBinding放在哪里？您将绑定到哪个属性？
可以用'Tag'属性绑定吗？
我不确定。它可能会起作用。但是，就个人而言，我认为这是非常糟糕的代码，因为意图不明确，你没有任何类型安全......这取决于你。

【解决方案6】：

在 Sean 的回答中添加了 Stretch="Uniform"，以解决如果图像最初大于按钮大小的情况（我也遇到过他的 cmets 中提到的问题 BrainSlugs83）。在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 的答案而被拒绝。

【讨论】：

【解决方案7】：

对我来说，XCeed WPF 工具包（免费软件）的IconButton 可以解决问题。

【讨论】：