如何缩小Xamarin.Forms中Label与Button的垂直间距？

Let’s break down the common causes of that excessive vertical gap and walk through concrete fixes tailored to your XAML structure.

1. Tighten StackLayout’s Default Spacing #

If your Label and Button are direct children of the StackLayout, the platform-default Spacing value (usually 10 on Android, 6 on iOS) is likely adding extra space. Set a smaller value (or zero) to shrink the gap:

<ScrollView>
    <!-- Adjust Spacing to a compact value like 2 or 0 -->
    <StackLayout Padding="5" Spacing="2">
        <!-- Your Grid, Label, Button elements here -->
    </StackLayout>
</ScrollView>

2. Trim Unnecessary Margin from Controls #

Labels and Buttons often come with default margins that contribute to spacing. Override these to remove vertical padding:

<!-- Example: Label with only a tiny bottom margin, Button with no margin -->
<Label Text="Your Label Content" Margin="0,0,0,2" />
<Button Text="Click Me" Margin="0" />

3. Control Grid Row Spacing (if using Grid for layout) #

If your Label and Button live in separate Grid rows, adjust the RowSpacing property and ensure rows use Auto to fit content (instead of taking extra space):

<Grid RowSpacing="2"> <!-- Reduce space between rows -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" /> <!-- Fits Label exactly -->
        <RowDefinition Height="Auto" /> <!-- Fits Button exactly -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".3*" />
        <ColumnDefinition Width=".5*" />
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Grid.Column="0" Text="Label Text" Margin="0" />
    <Button Grid.Row="1" Grid.Column="0" Text="Action" Margin="0" />
</Grid>

4. Use LayoutOptions for Precise Alignment #

Avoid letting controls stretch unnecessarily with VerticalOptions. Use Start or Center to keep elements tight to their content:

<Label Text="Hello" VerticalOptions="Center" Margin="0" />
<Button Text="Submit" VerticalOptions="Center" Margin="0" />

Full Modified Example #

Here’s how your XAML might look with all fixes applied for a clean, compact layout:

<ScrollView>
    <StackLayout Padding="5" Spacing="2">
        <Grid RowSpacing="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=".3*" />
                <ColumnDefinition Width=".5*" />
            </Grid.ColumnDefinitions>
            
            <Label Grid.Row="0" Grid.Column="0" 
                   Text="Your Label Text" 
                   Margin="0" 
                   VerticalOptions="Center" />
            
            <Button Grid.Row="1" Grid.Column="0" 
                    Text="Take Action" 
                    Margin="0" 
                    VerticalOptions="Center" />
            
            <!-- Add other elements to the second column as needed -->
        </Grid>
    </StackLayout>
</ScrollView>

Key takeaways: Always check Spacing on layout containers, Margin on individual controls, and ensure row/column definitions use Auto for content-sized elements instead of wasting space with *.

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