UWP xaml：如何显示带有图标和文本的按钮？答案

【问题标题】：UWP xaml: How to display a button with icon and text in it?UWP xaml：如何显示带有图标和文本的按钮？
【发布时间】：2017-05-02 16:26:14
【问题描述】：

如何在按钮中显示图像/图标和文本？

<StackPanel Name="stackPanel" Orientation="Horizontal" Tapped="stackPanel_Tapped">
    <Button x:Name="button" FontFamily="Segoe MDL2 Assets" Content="&#xE779;" Width="50" Height="50" Background="Transparent" />
    <TextBlock Text="Grades" FontSize="18" VerticalAlignment="Center" />
</StackPanel>

我可以向堆栈面板添加一个 Taplistener，但这不会使堆栈面板具有像真正按钮那样的视觉效果。

我也试过了：

<Button FontFamily="Segoe MDL2 Assets" Width="50" Height="50" x:Name="button" Content="test">
   <Image x:Name="button" Source="Assets/test.png" />
</Button>

但是我不能两次设置内容。我想要按钮中的文本和图标，因此当用户单击它时，它将具有像按钮一样的视觉效果。这可能吗？或者还有其他人有其他方法可以实现吗？

感谢阅读。

【问题讨论】：

<Button><StackPanel><Image/><TextBlock/></StackPanel></Button>
@ChrisW。谢谢，工作！不知道你能做到。
@ChrisW。将其发布为答案，以便 Denny 接受。

标签： xaml uwp imagebutton uwp-xaml

【解决方案1】：

因此，由于我找不到直接重复的内容（我可以发誓这是以前被问过的问题类型），我想我会提供一个合法的答案。

按钮模板的核心是ContentPresenter，它允许您传入任何CLR 对象。不过需要注意的是，只能通过一个。但是，如果该对象是能够包含子对象的面板，那么它将作为内容传递所有内容。

所以在这种情况下，如果我们这样做：

<Button>
    <Image/>
    <TextBlock/>
</Button>

然后它会失败并抱怨一次只允许一个对象。

除非您提供父面板来容纳这些子面板，否则它会将所有内容视为内容，并将提供所需的结果作为示例：

<Button>
    <StackPanel>
        <Image/>
        <TextBlock/>
    </StackPanel>
</Button>

因此，既然StackPanel 是一个可以承载孩子的 CLR 对象，那么您就可以开始了。希望这会有所帮助，干杯！

【讨论】：

我也找不到直接的答案:(
很好的答案，使按钮完全灵活。