WPF Button如何在Content标签内同时定义形状与文本？

嘿，这个问题我之前踩过坑😉！先给你搞懂为啥会报错：

WPF里的Button控件的Content属性默认只能接受单个元素，你直接把文本OK和Ellipse标签放在<Button.Content>里，相当于试图给它赋值两个独立的内容，所以系统才会弹出The property 'Content' is set more than once的错误提示。

要实现同时显示文本和椭圆的效果，你只需要把这两个元素放到一个容器控件里，再把这个容器作为Button的Content就行。这里给你两个常用的方案：

方案1：用StackPanel实现并排布局 #

如果想让文本和椭圆横向/纵向排列，StackPanel是最方便的选择：

<Button Background="Orange">
    <Button.Content>
        <!-- Horizontal让元素横向排列，Vertical是纵向 -->
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock Text="OK" Margin="0 0 10 0"/> <!-- Margin调整文本和椭圆的间距 -->
            <Ellipse Height="40" Width="40" Fill="Wheat" />
        </StackPanel>
    </Button.Content>
</Button>

方案2：用Grid实现叠加布局 #

如果想让文本覆盖在椭圆上方（比如把文本放在椭圆中间），可以用Grid：

<Button Background="Orange">
    <Button.Content>
        <Grid Width="60" Height="40">
            <Ellipse Height="40" Width="40" Fill="Wheat" />
            <TextBlock Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Button.Content>
</Button>

除了StackPanel和Grid，你还可以用DockPanel、WrapPanel等其他容器控件，根据自己的布局需求选就行~

内容的提问来源于stack exchange，提问作者user4175265