如何使所有平台的视图相同答案

【问题标题】：How to make the view the same for all platforms如何使所有平台的视图相同
【发布时间】：2018-02-22 10:14:11
【问题描述】：

当我尝试使用自定义布局制作列表视图时，它在 UWP 上看起来与在 Android 上完全不同。如何在不为每个平台制作页面的情况下使它们在所有平台上看起来都一样？我尝试让我的应用看起来像线框。

我尝试将对象可视化为具有背景图像和两个标签的视单元。

我目前正在使用 Xamarin 和 .NET 标准作为代码共享策略开发适用于 Android 和 UWP 的应用程序。

这个项目的想法是在共享项目（上层项目文件）中制作每个视图/业务逻辑，因为应用程序不会使用任何平台特定的功能。

这是我的 XAML 代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="inleiding.Views.SubList"
             Title="Your pokélist"
              NavigationPage.BackButtonTitle="go back"
             NavigationPage.HasBackButton="True"
             NavigationPage.HasNavigationBar="True"
             >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Label Text="Cars" FontSize="Large" TextColor="LightGray" />

        <ListView x:Name="lvwPok" ItemSelected="lvwPok_ItemSelected">


            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>

                            <RelativeLayout>
                                <Image  VerticalOptions="FillAndExpand" 
                                 HorizontalOptions="FillAndExpand"
                                 Source = "{Binding Pic}"></Image>


                                <Grid
                                     VerticalOptions="CenterAndExpand"
                                    HorizontalOptions="CenterAndExpand"
                                    BackgroundColor="Transparent"
                                    >
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="20"/>
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" WidthRequest="100" HeightRequest="100" Source = "{Binding ImgPok}">
                                    </Image>
                                    <Label  Grid.Row="1" Grid.Column="1" Text="{Binding Spec}"  />
                                    <Label  Grid.Row="0" Grid.Column="1" Text="{ Binding Type }"  />
                                </Grid>

                            </RelativeLayout>


                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
    </Grid>
</ContentPage>

(Pastebin link)

我没有想法。

【问题讨论】：

标签： c# xamarin.forms .net-standard-2.0

【解决方案1】：

您需要在您的 Xaml

中添加 OnPlatform 支持

在标签中，包含一个OnPlatform 标签。

OnPlatform 是一个泛型类。您需要指定泛型类型参数，在下面的示例厚度中，它是填充的类型财产。幸运的是，有一个 XAML 属性专门用于定义称为 x:TypeArguments 的通用参数。这应该与类型匹配您正在设置的属性：

示例

<StackLayout.Padding>
  <OnPlatform x:TypeArguments="Thickness">
    <On Platform="Android" Value="0, 0, 0, 0"/>
    <On Platform="WinPhone" Value="0, 0, 0, 0"/>
    <On Platform="iOS" Value="0, 20, 0, 0"/>
  </OnPlatform>
</StackLayout.Padding>

其他资源

Part 2. Essential XAML Syntax - Xamarin

【讨论】：

【解决方案2】：

您的问题不在于 xaml，而在于图像缩放。 Android 和 UWP 处理图像缩放的方式非常不同，如果您想要一个统一的外观，您需要向 UWP 提供正确缩放的图像并为 Android 提供相应的尺寸。

看这里：UWP, how to handle images and scaling?

【讨论】：

【解决方案3】：

首先，你有多个问题。

android 中的中断：尝试将 HasUnevenRows 设置为 true（listview 上的一个属性）

对于圆角，您必须使用Custom Renderer，这导致您必须为代表鹅肝的原生元素创建圆角边框。这是一个 Xamarin.Forms.Image 对吗？因此，对于 android，您将不得不使用 ImageRenderer 或 (AppCompat.)ViewRenderer。

如果你在网上找不到帮助，我只能给你一个更详细的 android 圆角示例。

【讨论】：