如何在 Xamarin 表单中设计 listview viewcell 设计？

Question

我是 Xamarin 表单的新手，无法创建这样的设计；如何在 Xamarin 中使用 Xaml 或 CS 代码创建此视图单元设计？

列表视图设计：

Answer 1

此布局由三个主要组件组成。 “记分牌”、“PlayerFrame”和“复选框”。主要是你有你的记分牌和 PlayerFrame，但为了在 Xamarin Forms 中创建一个复选框，我必须创建一个自定义渲染器。我改变了一些视觉元素的颜色和一般位置。下面的图片是否准确地描述了您正在寻找的内容？在发布赏金的所有代码之前，我想确定一下。

Answer 2

<ListView ItemsSOurce="{Binding Players}" RowHeight="75">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Gray">
                <Grid.RowDefinitions>
                    <RowDefinition Height="15"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
            <ContentView Grid.RowSpan="2" BackgroundColor="Blue">
                <Label Text="{Binding PlayerId}" Rotation="90" TextColor="White"/>
            </ContentView>
                <Label Grid.Column="1" Text="{Binding Date}" TextColor="White" BackgroundColor="Red" HorizontalOptions="End"/>

                ...

            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 3

我最近创建了一个名为 XamarinForms.CardView 的包，它可以帮助您使用这种样式。你可以找到它here。
我已经使用它并使用 Kowalski 的答案来组合你想要的，看看：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:cardView="clr-namespace:CardView;assembly=CardView"
             x:Class="SO.ListPage">
    <StackLayout Orientation="Horizontal">
        <Label Text="Sort:" />

    </StackLayout>
    <ListView SeparatorVisibility="None" ItemsSource="{Binding Players}" RowHeight="150" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <cardView:CardView Margin="5" CardViewOutlineColor="Black" CardViewOutlineColorThickness="2" CardViewOutlineColorHasShadow="True">
                        <cardView:CardView.CardViewContent>
                            <Grid BackgroundColor="Gray">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <StackLayout Grid.RowSpan="4" Grid.Column="0" BackgroundColor="Blue" VerticalOptions="FillAndExpand">
                                    <Label Text="{Binding PlayerNumber}" Rotation="270" TextColor="White" VerticalOptions="EndAndExpand" VerticalTextAlignment="Start" Margin="0,0,0,30"></Label>
                                </StackLayout>
                                <Label Grid.Column="2" Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Date}" BackgroundColor="Red" TextColor="White" HorizontalOptions="EndAndExpand"/>
                                <Label Grid.Column="1" Grid.Row="1" Text="{Binding Number}" FontSize="20" BackgroundColor="White" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"></Label>
                                <Label Grid.Column="2" Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding RandomText}" TextColor="Maroon"></Label>
                            </Grid>
                        </cardView:CardView.CardViewContent>
                    </cardView:CardView>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

我得到的结果很简单，这里是：

请注意，要将 Circle 作为背景，您需要使用自定义包或图像作为背景，因为 Xamarin.Forms 以及您想要的单选按钮不直接支持它。
我找到了这个https://guido1993.wordpress.com/2015/06/17/how-to-draw-shapes-in-xamarin-forms/，但我没有尝试过。

编辑：

我已经稍微编辑了我的代码，这是新代码和新图像结果：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:cardView="clr-namespace:CardView;assembly=CardView"
             x:Class="SO.ListPage">
    <StackLayout Orientation="Horizontal">
        <Label Text="Sort:" />

    </StackLayout>
    <ListView SeparatorVisibility="None" ItemsSource="{Binding Players}" RowHeight="150" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <cardView:CardView CardViewInnerPadding="20" Margin="5">
                        <cardView:CardView.CardViewContent>
                            <Grid BackgroundColor="Gray">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <StackLayout Grid.RowSpan="4" Grid.Column="0" BackgroundColor="Blue" VerticalOptions="FillAndExpand">
                                    <Label Text="{Binding PlayerNumber}" Rotation="270" TextColor="White" VerticalOptions="EndAndExpand" VerticalTextAlignment="Start" Margin="0,0,0,30"></Label>
                                </StackLayout>
                                <Label Grid.Column="2" Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Date}" BackgroundColor="Red" TextColor="White" HorizontalOptions="EndAndExpand" Margin="0,10,-10,0"/>
                                <Label Grid.Column="1" Grid.Row="1" Text="{Binding Number}" FontSize="20" BackgroundColor="White" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"></Label>
                                <Label Grid.Column="2" Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding RandomText}" TextColor="Maroon"></Label>
                            </Grid>
                        </cardView:CardView.CardViewContent>
                    </cardView:CardView>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>