Xamarin.Forms：如何让带TapRecognizer的返回按钮与居中Logo对齐

你的核心问题是返回按钮需要和动态高度的Logo垂直居中对齐，之前用固定Constant=50的RelativeLayout约束肯定不行——毕竟Logo高度是绑定计算的，不同设备上高度差异会导致对齐失效。我推荐用Grid来实现，它在处理元素相对对齐时比RelativeLayout更直观，代码也更干净。

实现代码 #

<ContentPage.Content>
    <ScrollView>
        <StackLayout Padding="{Binding MainStackSidePadding}" Spacing="15">
            <!-- 用Grid替代原来的RelativeLayout -->
            <Grid Padding="{Binding MainStackSidePadding}" BackgroundColor="Red">
                <Grid.ColumnDefinitions>
                    <!-- 第一列自适应返回按钮宽度 -->
                    <ColumnDefinition Width="Auto"/>
                    <!-- 中间列占满剩余宽度，用来放居中的Logo -->
                    <ColumnDefinition Width="*"/>
                    <!-- 第三列占位，保证Logo完全居中 -->
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <!-- 返回按钮：第一列，垂直居中对齐 -->
                <Image x:Name="backButton" Source="back.png" HeightRequest="30" 
                       VerticalOptions="Center"
                       Grid.Column="0">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding GoBackCommand}"/>
                    </Image.GestureRecognizers>
                </Image>

                <!-- Logo：中间列，水平+垂直居中 -->
                <Image x:Name="logo" Source="testbar.png" 
                       HeightRequest="{Binding LogoSmallHeight}"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"
                       Grid.Column="1"/>
            </Grid>

            <!-- 其他元素 -->
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

为什么这个方案可行？ #

• Grid的三列布局让Logo始终处于页面水平中心，返回按钮固定在左上角第一列，完全符合你的布局需求
• VerticalOptions="Center"会让返回按钮和所在行的垂直中心对齐，而Logo也设置了同样的垂直居中属性，所以不管Logo的动态高度怎么变化，两者都会自动保持垂直居中对齐

如果你坚持用RelativeLayout的改进方案 #

如果你不想更换布局，也可以修改RelativeLayout的约束，让返回按钮的垂直中心和Logo的垂直中心对齐：

<Image x:Name="backButton" Source="back.png" HeightRequest="30"
       RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.025, Constant=0}"
       <!-- 计算逻辑：Logo的Y坐标 + Logo高度的一半 - 返回按钮自身高度的一半 -->
       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=logo, Property=Y, Factor=1, Constant=0} + {ConstraintExpression Type=RelativeToView, ElementName=logo, Property=Height, Factor=0.5, Constant=0} - {ConstraintExpression Type=RelativeToView, ElementName=backButton, Property=Height, Factor=0.5, Constant=0}">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding GoBackCommand}"/>
    </Image.GestureRecognizers>
</Image>

不过这种写法比Grid复杂很多，后期维护起来也麻烦，所以更推荐Grid方案。

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