Question

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

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

我目前正在使用带有 .NET标准的Xamarin开发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）

我没有想法。

Answer 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

Answer 2

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

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

Answer 3

首先，您有多个问题。

android中的截止：尝试将HasUnevenRows设置为true（列表视图中的属性）

对于圆角，你必须选择Custom Renderer，这导致你必须创建代表gras的原生元素的圆形边框。它是Xamarin.Forms.Image对吗？所以对于android，你必须使用ImageRenderer或（AppCompat。）ViewRenderer。

如果你无法在网上找到帮助，我只能给你一个更精细的圆角安卓示例。

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

3 个答案: