按钮内部的StackPanel的宽度非常窄。（WPF）

Question

我想制作一个按钮，其图像类似于以下内容：

我在xaml中写了以下内容：

<Button
  Style="{DynamicResource BotonRedondo2}"
  Width ="AUTO"
  Cursor="Hand"
  Background="#3b5998"
  Grid.Column="0">
  <StackPanel  Width ="Auto" Orientation="Horizontal"  >
    <Image  HorizontalAlignment="Left" Source="/Test;component/Imagenes/face.png"/>
    <TextBlock  HorizontalAlignment="Center" VerticalAlignment="Center" Text="LOGIN WITH XXXXX" />
  <StackPanel>
</Button>

但是结果如下：

[StackPanel的宽度与按钮的宽度不匹配。

关于如何解决问题的任何建议？

欢迎提出意见或问题

Answer 1

您需要设置Button的属性HorizontalContentAlignment="Stretch"。另外，考虑使用DockPanel或Grid代替StackPanel：

<Button HorizontalContentAlignment="Stretch">
    <DockPanel>
        <Image Source="/Test;component/Imagenes/face.png"/>
        <TextBlock
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            Text="LOGIN WITH XXXXX" />
    </DockPanel>
</Button>

但是如果<Button Width="Auto">表示Button的宽度适合其子宽度，则StackPanel也可以。

Answer 2

StackPanel方向上的[Horizontal]将项目彼此相邻堆叠。它基本上不关心其中的项目的HorizontalAlignment。

您可以改用网格：

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto"/>
       <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>

   <Image Grid.Column="0" HorizontalAlignment="Left" Source="/Test;component/Imagenes/face.png"/>
   <TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="LOGIN WITH XXXXX" />
</Grid>

以上将为您提供所需的外观。