How do I use Scale= on buttons to make them smaller and keep tight spacing?

Question

When I use Scale= on buttons to make them smaller the spacing increases.

For example:
This shows the buttons on the same line spaced the way I want.

<ScrollView Orientation="Both">
    <VerticalStackLayout Padding="7,7" Spacing="2">
        <HorizontalStackLayout Margin="0" Spacing="2">
            <Button Text="Show Scans" HorizontalOptions="Start"     Scale="1.0" />
            <Button Text="Sync Scans" HorizontalOptions="Start"     Scale="1.0" />
            <Button Text="Export Scans" HorizontalOptions="Start"   Scale="1.0" />
        </HorizontalStackLayout>
    </VerticalStackLayout>
</ScrollView>

When I set the button Scale smaller it works but the spacing increases.

<ScrollView Orientation="Both">
    <VerticalStackLayout Padding="7,7" Spacing="2">
        <HorizontalStackLayout Margin="0" Spacing="2">
            <Button Text="Show Scans" HorizontalOptions="Start"     Scale="0.5" />
            <Button Text="Sync Scans" HorizontalOptions="Start"     Scale="0.5" />
            <Button Text="Export Scans" HorizontalOptions="Start"   Scale="0.5" />
        </HorizontalStackLayout>
    </VerticalStackLayout>
</ScrollView>

How would I get this spacing with Scale < 1.0?

Note. There is more space to the right of all of these button layouts so this doesn't have to do with the line being full with the larger buttons.

I read everything about buttons and searched, but could not find an answer specific to the spacing with Scale < 1.0.

Answer 1

I agree with Jason's comment that using a smaller font is a good start. Button probably has a default style set in Styles.xaml including minimums for Height and Width and this accounts for why the button size isn't shrinking the way you'd expect, and this is why I specified MinimumHeightRequest="0". You mentioned not being able to find anything on resizing buttons and so I also want to mention the HeightRequest and WidthRequest properties as another way to have control over button sizes.

There's also the option of putting the Scale factor in the HorizontalStackLayout which fixes the spacing problem but is suboptimal in that it doesn't compensate the left alignment.

<ScrollView>
    <VerticalStackLayout
        Padding="0,0"
        Spacing="25">
        <Image
            Source="dotnet_bot.png"
            HeightRequest="185"
            Aspect="AspectFit"
            SemanticProperties.Description="dot net bot in a race car number eight" />

        <VerticalStackLayout Padding="7,7" Spacing="2" >
            <HorizontalStackLayout Margin="0" Spacing="2">
                <Button Text="Show Scans" HorizontalOptions="Start"     Scale="1.0" />
                <Button Text="Sync Scans" HorizontalOptions="Start"     Scale="1.0" />
                <Button Text="Export Scans" HorizontalOptions="Start"   Scale="1.0" />
            </HorizontalStackLayout>
        </VerticalStackLayout>

        <VerticalStackLayout Padding="7,7" Spacing="2">
            <HorizontalStackLayout Spacing="2" Scale="0.5" HorizontalOptions="Start">
                <Button Text="Show Scans" HorizontalOptions="Start"  />
                <Button Text="Sync Scans" HorizontalOptions="Start" />
                <Button Text="Export Scans" HorizontalOptions="Start" />                    
            </HorizontalStackLayout>
        </VerticalStackLayout>

        <VerticalStackLayout Padding="7,7" Spacing="2">
            <HorizontalStackLayout Margin="0" Spacing="2" HorizontalOptions="Start">
                <Button Text="Show Scans" HorizontalOptions="Start" FontSize="7" Padding="7,5" MinimumHeightRequest="0" CornerRadius="4"/>
                <Button Text="Sync Scans" HorizontalOptions="Start" FontSize="7" Padding="7,5" MinimumHeightRequest="0" CornerRadius="4"/>
                <Button Text="Export Scans" HorizontalOptions="Start" FontSize="7" Padding="7,5" MinimumHeightRequest="0" CornerRadius="4"/>
            </HorizontalStackLayout>
        </VerticalStackLayout>

    </VerticalStackLayout>           
</ScrollView>