如何在XAML中对齐垂直按钮数组内的图片？

问题描述 #

我尝试用以下XAML代码创建垂直按钮数组，但按钮内的图片始终无法左对齐（见配图）。调整Margin、Padding属性，以及添加FlowDirection属性都没有效果。

<Window x:Class="SystemManager.Views.ServerSettings"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SystemManager.Views"
        mc:Ignorable="d"
        Title="Server Settings" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="220" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Margin="20,20,5,5">
            <Button Margin="5" Click="PS_Click" >
                <StackPanel Orientation="Horizontal" FlowDirection="LeftToRight" Margin="0">
                    <Image Source="/Views/ps_small.png" Height="30" HorizontalAlignment="Left" Margin="5" />
                    <TextBlock Text="Production Server" VerticalAlignment="Center" Margin="0" />
                </StackPanel>
            </Button>
            <Button Margin="5" Click="IS_Click" >
                <StackPanel Orientation="Horizontal" FlowDirection="LeftToRight" Margin="0">
                    <Image Source="/Views/is_small.png" Height="30" HorizontalAlignment="Left" Margin="5" />
                    <TextBlock Text="Imaging Server" VerticalAlignment="Center" Margin="0" />
                </StackPanel>
            </Button>
            <Button Margin="5" Click="NP_Click" >
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Views/netpub_small.png" Height="30" HorizontalAlignment="Left" Margin="10" />
                    <TextBlock Text="NetPub/WatchFolder" VerticalAlignment="Center" Margin="0" />
                </StackPanel>
            </Button>
            <Button Margin="5" Click="MS_Click" >
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Views/RSMIcon.png" Height="30" HorizontalAlignment="Left" Margin="10" />
                    <TextBlock Text="Messaging Server" VerticalAlignment="Center" Margin="0" />
                </StackPanel>
            </Button>
            <Button Margin="5" Click="BS_Click" >
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Views/bs_small.png" Height="30" HorizontalAlignment="Left" Margin="10" />
                    <TextBlock Text="Bridge Server" VerticalAlignment="Center" Margin="0" />
                </StackPanel>
            </Button>

        </StackPanel>
    </Grid>
</Window>

解决方法 #

问题核心是Button控件默认模板会强制内部内容居中对齐，所以单独给内部元素设置左对齐无效，需要修改Button本身的内容对齐属性：

方法1：直接设置Button的HorizontalContentAlignment属性 #

给每个Button添加HorizontalContentAlignment="Left"，让按钮内部内容整体靠左排列：

<Button Margin="5" Click="PS_Click" HorizontalContentAlignment="Left">
    <StackPanel Orientation="Horizontal" Margin="0">
        <Image Source="/Views/ps_small.png" Height="30" Margin="5" />
        <TextBlock Text="Production Server" VerticalAlignment="Center" />
    </StackPanel>
</Button>

如果所有按钮都需要这个效果，建议用Style统一设置，避免重复代码：

<StackPanel Grid.Column="0" Margin="20,20,5,5">
    <StackPanel.Resources>
        <Style TargetType="Button">
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="Margin" Value="5"/>
        </Style>
    </StackPanel.Resources>
    <Button Click="PS_Click" >
        <StackPanel Orientation="Horizontal">
            <Image Source="/Views/ps_small.png" Height="30" Margin="5" />
            <TextBlock Text="Production Server" VerticalAlignment="Center" />
        </StackPanel>
    </Button>
    <!-- 其余按钮可省略重复属性 -->
</StackPanel>

方法2：用Grid替代StackPanel实现精确布局（可选） #

如果需要更严格的布局控制，可改用Grid作为按钮内部容器，通过列定义固定Image的位置：

<Button Margin="5" Click="PS_Click" HorizontalContentAlignment="Left">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" Source="/Views/ps_small.png" Height="30" Margin="5" />
        <TextBlock Grid.Column="1" Text="Production Server" VerticalAlignment="Center" Margin="5,0,0,0"/>
    </Grid>
</Button>

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