如何缩小WPF代码中Analyze与ShowMap按钮间的间距？

我试过各种方法缩小Analyze和ShowMap两个按钮的间距，但效果还是如图所示。相关代码如下：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Content="Plot File" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10" />
    <TextBox x:Name="txtMultiBox" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="10,0,10,10" TextWrapping="Wrap" AcceptsReturn="True"/>
    <Button Style="{StaticResource Highlight}"   Content="Browse" x:Name="btnBrowse" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10" Click="btnBrowse_Click" />
    <Button Style="{StaticResource Highlight}"  Content="Analyze" x:Name="btnAnalyze" Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="left" Margin="10,10,5,7.5" Click="btnAnalyze_Click" />
    <Button Style="{StaticResource Highlight}" Visibility="Hidden"  Content="ShowMap" x:Name="btnShowmap" Grid.Column="2" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="left" Margin="5,10,10,10"  Click="btnShowmap_Click" />
    <Label Content="Parcels" Grid.Column="0" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,7.5,10,0" />
    <TreeView SelectedItemChanged="tvSections_SelectedItemChanged"  x:Name="tvSections" Grid.Column="0" Grid.Row="4" Margin="10,0,10,10" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
    <Label Content="Assosiated Sections" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,7.5,10,0" />
    <ListView x:Name="lsParcels" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="4" Margin="10,0,10,10" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="FID"  DisplayMemberBinding="{Binding Fid}"/>
                <GridViewColumn Header="ParcelId"  DisplayMemberBinding="{Binding ParcelId}"/>
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

解决方法 #

问题核心是你把两个按钮分别放在了Grid的第1、2列，这两列都是宽度为*的等分列，按钮之间会隔着整列的空白空间。推荐以下两种高效的调整方式：

方法1：用StackPanel横向排列按钮（最灵活）

将两个按钮放在同一Grid列中，用StackPanel横向布局，通过Spacing属性直接控制按钮间距：

<!-- 替换原有的两个Button代码 -->
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Margin="10,10,10,10" Spacing="5">
    <Button Style="{StaticResource Highlight}" Content="Analyze" x:Name="btnAnalyze" VerticalAlignment="Center" Click="btnAnalyze_Click" />
    <Button Style="{StaticResource Highlight}" Visibility="Hidden" Content="ShowMap" x:Name="btnShowmap" VerticalAlignment="Center" Click="btnShowmap_Click" />
</StackPanel>

你可以根据需要修改Spacing的值来调整按钮间的距离。

方法2：调整Grid列宽度适配按钮

修改Grid的列定义，给按钮所在列设置自动宽度，避免多余空白：

<!-- 修改ColumnDefinitions -->
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<!-- 然后将两个按钮都放在第1列，调整Margin和排列 -->
<Button Style="{StaticResource Highlight}" Content="Analyze" x:Name="btnAnalyze" Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,10,5,7.5" Click="btnAnalyze_Click" />
<Button Style="{StaticResource Highlight}" Visibility="Hidden" Content="ShowMap" x:Name="btnShowmap" Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,10,10,10" Click="btnShowmap_Click" />

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