Question

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

列表视图设计：

Answer 1

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

Answer 2

https://#{your API token}:X@bibles.org/v2/versions/eng-GNTD.xml

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>

如何在Xamarin表单中设计listview视单元设计？

3 个答案:

编辑：