UWP xaml: 如何显示带有图标和文字的按钮？

Question

如何在按钮中显示 image/icon AND 文本？

<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>

但是我无法设置两次内容。我希望按钮中既有文本又有图标，这样当用户单击它时，它就会像按钮一样具有视觉效果。这可能吗？或者还有其他人有其他方法可以实现吗？

感谢阅读。

Answer 1

所以因为我找不到直接的重复（我可以发誓这是以前问过的问题类型）我想我会提供一个合法的答案。

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

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

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

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

除非您提供 parent 面板来容纳那些 children，否则它会将所有内容视为内容，并将提供所需的结果，例如：

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

因此，由于 StackPanel 是一个可以托管 children 的 CLR object，您可以开始了。希望这对您有所帮助，干杯！

UWP xaml: 如何显示带有图标和文字的按钮？

UWP xaml: How to display a button with icon and text in it?

xaml

imagebutton

uwp

uwp-xaml