Question

逗人，

我需要在listview下画一条蓝线，如下图所示：

我的代码是：

<StackLayout>
                <Image
                Source="blue_holo_circle.png">
         <ListView>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout
                               items inside listview like profile,name,time,like etc>
                    </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
   </StackLayout>

我知道使用BoxView绘制线条的代码：

     <BoxView  
           VerticalOptions="Fill"
           HorizontalOptions="Center"
           WidthRequest="1"
           Color="Blue"/>

但我不知道我需要在哪里添加该行的代码，我尝试在listview之前添加，但该行不在列表之下。

有人建议在列表项（listview）下绘制一条线的解决方案吗？

提前致谢....

Answer 1

根据您的要求更好地使用Grid，它将非常有用并且易于理解我们的设计。

Answer 2

<ListView ItemsSource="{Binding Items}"
        CachingStrategy="RecycleElement"
        HasUnevenRows="True">

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Padding="20">
                        <StackLayout Padding="5" BackgroundColor="LimeGreen">
                            <Label Text="{Binding .}" 
                             Style="{DynamicResource ListItemTextStyle}" />
                            <Label Text="{Binding .}" 
                             Style="{DynamicResource ListItemDetailTextStyle}"/>
                        </StackLayout>
                        <BoxView  
                               VerticalOptions="Fill"
                               HorizontalOptions="Start"
                               WidthRequest="1"
                               Color="Blue"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>

//代码背后

public partial class ListViewPage1 : ContentPage
{
    public ObservableCollection<string> Items { get; set; }

    public ListViewPage1()
    {
        InitializeComponent();

        Items = new ObservableCollection<string>
        {
            "Item 1",
            "Item 2",
            "Item 3",
            "Item 4",
            "Item 5"
        };

        BindingContext = this;
    }
  }

试试这样....

Answer 3

这解决了我的问题。

     <StackLayout>
           <BoxView HeightRequest="1" VerticalOptions="Fill" BackgroundColor="White" />
    </StackLayout>

我在网格中使用了它。

     <Grid BackgroundColor="#0073E0">
         <Grid.ColumnDefinitions>
          <ColumnDefinition Width="10" />
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="20" />
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackLayout Grid.Column="1" Grid.Row="1">
          <BoxView HeightRequest="1" VerticalOptions="Fill" BackgroundColor="White"/>
        </StackLayout>
    </Grid>

Xamarin表单：在listview下画一条线

3 个答案: