Xamarin Forms中Syncfusion带日历图标按钮与输入框对齐问题求助

调整方案 #

你遇到的间距过大和对齐问题主要是三个冗余配置导致的：StackLayout默认子元素间距、SfButton内部Grid的多余内边距和列定义、同时配置按钮Text和自定义Content的冲突，按以下步骤修改即可：

• 给水平排列的StackLayout设置Spacing属性，自定义输入框和按钮的间距（比如设为8，可按需调整），同时给Entry和SfButton都添加VerticalOptions="Center"保证垂直方向居中对齐
• 删除SfButton的Text、ShowIcon、HorizontalTextAlignment属性，自定义Content时这些属性会触发多余的布局计算，反而撑宽按钮
• 简化SfButton内部的Grid配置，删除多余的列定义，调小Padding，把图片的垂直对齐改为Center

修改后的代码如下：

<Label Text="Please select a start date below"></Label>
<StackLayout Orientation="Horizontal" Spacing="8">
    <Entry x:Name="txtDateStartEntry" WidthRequest="200" VerticalOptions="Center"></Entry>
    <syncfusion:SfButton x:Name="btnPickStartDate" 
                         CornerRadius="10" 
                         Clicked="btnPickStartDate_Clicked"
                         FontSize="24" 
                         BorderThickness="2" 
                         BackgroundColor="White"
                         WidthRequest="46"
                         HeightRequest="40"
                         VerticalOptions="Center">
        <syncfusion:SfButton.Content>
            <Grid Padding="8">
                <Image WidthRequest="30" HeightRequest="30" Source="cal16.png" VerticalOptions="Center" HorizontalOptions="Center"/>
            </Grid>
        </syncfusion:SfButton.Content>
    </syncfusion:SfButton>
</StackLayout>

如果还需要微调间距，直接修改StackLayout的Spacing值即可，按钮的宽高也可以根据Entry的实际高度对应调整，保证二者视觉上高度一致。

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