Xamarin ListView图片内按钮居中及加载背景异常问题求助

嘿，我来帮你搞定这两个头疼的问题！咱们一个一个来解决：

问题1：按钮无法相对于图片居中 #

你的布局结构里，按钮所在的AbsoluteLayout和图片所在的StackLayout是同级的，而且LayoutBounds设置成了1,1,1,1，这会让按钮区域占满整个父布局，而不是相对于图片居中。咱们可以调整布局结构，把图片和按钮放在同一个容器里，让按钮直接相对于图片定位：

• 把CachedImage和按钮容器放在同一个RelativeLayout（或者AbsoluteLayout）里，这样就能让按钮相对于图片居中。
• 用RelativeLayout的约束会更直观，比如按钮的中心和图片的中心对齐。

问题2：图片加载完成前显示蓝色背景 #

这是因为CachedImage默认的加载背景或者未加载时的背景色是蓝色，咱们可以通过设置Placeholder（占位图）或者直接修改BackgroundColor为透明/你想要的颜色来解决。比如设置BackgroundColor="Transparent"，或者指定一个占位的纯色/图片。

修改后的示例代码 #

下面是调整后的布局代码，解决了这两个问题：

<Grid Padding="0">
    <ListView x:Name="CoversListview" SeparatorVisibility="None" ItemsSource="{Binding Covers}" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="0"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <!-- 第一个列的内容 -->
                        <RelativeLayout x:Name="ViewLayout" BindingContext="{Binding Item1}" Padding="10,10,0,0">
                            <!-- 图片容器，包含图片和下方标签 -->
                            <StackLayout Orientation="Vertical" 
                                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
                                <!-- 解决加载背景问题：设置BackgroundColor和Placeholder -->
                                <ffimageloading:CachedImage x:Name="CoverShow" Source="test.jpg" LoadingPriority="Highest" 
                                                            HorizontalOptions="Center" VerticalOptions="Center" 
                                                            WidthRequest="160" HeightRequest="234" Aspect="AspectFill"
                                                            BackgroundColor="Transparent" PlaceholderColor="#01426A">
                                    <ffimageloading:CachedImage.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped"/>
                                    </ffimageloading:CachedImage.GestureRecognizers>
                                </ffimageloading:CachedImage>
                                <Label Text="Cover Name" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" 
                                       FontSize="16" LineBreakMode="NoWrap" TextColor="White" FontAttributes="Bold"/>
                            </StackLayout>
                            <!-- 按钮容器，相对于图片居中 -->
                            <StackLayout Orientation="Vertical" 
                                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=CoverShow, Property=X, Factor=1, Constant=25}"
                                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=CoverShow, Property=Y, Factor=1, Constant=80}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="110" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="36" />
                                        <RowDefinition Height="36" />
                                    </Grid.RowDefinitions>
                                    <customRenders:MyButton x:Name="DownButtonFrame" BackgroundColor="#C8DBEF" TextColor="#01426A" 
                                                            ConfigurationItem ="{Binding .}" Grid.Row="0" Text="Download" 
                                                            CornerRadius="16" FontSize="12" BorderWidth="0" 
                                                            Clicked="Button_OnClicked_DownItem1"/>
                                    <customRenders:MyButton x:Name="ShowButtonFrame" BackgroundColor="#C8DBEF" TextColor="#01426A" 
                                                            ConfigurationItem ="{Binding .}" Grid.Row="1" Text="Show" 
                                                            CornerRadius="16" FontSize="12" BorderWidth="0" 
                                                            Clicked="Button_OnClicked_ShowItem1"/>
                                </Grid>
                            </StackLayout>
                        </RelativeLayout>
                        <!-- 第二个列的内容，同理修改 -->
                        <RelativeLayout x:Name="FrameItem" Grid.Column="2" IsVisible="{Binding IsVisible}" BindingContext="{Binding Item2}" Padding="0,10,0,0">
                            <StackLayout Orientation="Vertical" 
                                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
                                <ffimageloading:CachedImage x:Name="CoverShow2" Source="test.jpg" LoadingPriority="Highest" 
                                                            HorizontalOptions="Center" VerticalOptions="Center" 
                                                            WidthRequest="160" HeightRequest="234" Aspect="AspectFill"
                                                            BackgroundColor="Transparent" PlaceholderColor="#01426A">
                                    <ffimageloading:CachedImage.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped"/>
                                    </ffimageloading:CachedImage.GestureRecognizers>
                                </ffimageloading:CachedImage>
                                <Label Text="Cover Name" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" 
                                       FontSize="16" LineBreakMode="NoWrap" TextColor="White" FontAttributes="Bold"/>
                            </StackLayout>
                            <StackLayout Orientation="Vertical" 
                                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=CoverShow2, Property=X, Factor=1, Constant=25}"
                                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=CoverShow2, Property=Y, Factor=1, Constant=80}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="110" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="36" />
                                        <RowDefinition Height="36" />
                                    </Grid.RowDefinitions>
                                    <customRenders:MyButton x:Name="DownButtonFrame2" BackgroundColor="#C8DBEF" TextColor="#01426A" 
                                                            ConfigurationItem ="{Binding .}" Grid.Row="0" Text="Download" 
                                                            CornerRadius="16" FontSize="12" BorderWidth="0"/>
                                    <customRenders:MyButton x:Name="ShowButtonFrame3" BackgroundColor="#C8DBEF" TextColor="#01426A" 
                                                            ConfigurationItem ="{Binding .}" Grid.Row="1" Text="Show" 
                                                            CornerRadius="16" FontSize="12" BorderWidth="0"/>
                                </Grid>
                            </StackLayout>
                        </RelativeLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

关键修改点说明 #

1. 按钮居中处理：

   • 把按钮容器放在RelativeLayout里，通过RelativeToView约束，让按钮的X/Y坐标相对于图片的位置来计算，Constant值可以根据你的需求调整，确保按钮在图片中心区域。
   • 也可以用AbsoluteLayout替代，把按钮的LayoutBounds设为0.5,0.5,AutoSize,AutoSize，LayoutFlags设为PositionProportional，这样按钮会相对于父容器居中，只要父容器和图片大小一致就行。

2. 加载背景处理：

   • 给CachedImage设置BackgroundColor="Transparent"，这样未加载时不会显示蓝色。
   • 还可以设置Placeholder属性为一个占位图片，或者用PlaceholderColor设置加载时的背景色，和你的布局背景色#01426A一致，这样过渡更自然。

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