【问题标题】:I need to create a vertical listview. on Xamarin.Forms我需要创建一个垂直列表视图。在 Xamarin.Forms 上
【发布时间】:2018-08-09 14:27:50
【问题描述】:

我需要创建一个带有 3 个选项的垂直列表视图,但是如何?
像这样:

朋友帮帮我吧!但是如何在布局中添加“CornerRadius”? Video 我需要将 'Label' 替换为 'Frame' 以添加 'CornerRadius' 对吗?我怎么能代替

我的 MainPage.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"
xmlns:local="clr-namespace:App11"
x:Class="App11.MainPage">

<StackLayout>
<ListView ItemsSource="{Binding MyModel}" HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid HorizontalOptions="FillAndExpand" BackgroundColor="#3e1519" HeightRequest="70">
                    <!--1st View-->
                    <StackLayout Orientation="Vertical" Grid.Column="0" Grid.Row="0" HeightRequest="40">
                            <Label Text="{Binding Title}" TextColor="White" />
                            <Label Text="{Binding SubTitle}"  TextColor="White" />
                        </StackLayout>
                    <StackLayout Orientation="Horizontal" Grid.Column="1" Grid.Row="0">
                            <Label Text="{Binding Dollar}"  TextColor="White" />
                            <Label Text="+" Margin="30,0,0,0" FontSize="Large"  TextColor="White">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="ShowSubView" />
                                </Label.GestureRecognizers>
                            </Label>
                        </StackLayout>
                        <!--SubView-->
                    <StackLayout BackgroundColor="#722f38" IsVisible="False" HeightRequest="30">
                            <Label Text="{Binding SubViewText}" TextColor="White" />
                        </StackLayout>
                    </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>


我的 MainPage.xml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

 namespace App11
 {
 public partial class MainPage : ContentPage
 {
     public MainPage()
     {
         InitializeComponent();
         this.BindingContext = new MainPageViewModel();
     }

     private void ShowSubView(object sender, EventArgs e)
     {
         var item1 = ((Label)sender);
         var FirstView = ((Grid)((StackLayout)item1.Parent).Parent);
         var item2 = ((StackLayout)FirstView.Children[2]);
         if (item2.IsVisible)
         {
             Grid.SetRow(item2, 0);
             item2.IsVisible = false;
         }
         else
         {
             Grid.SetRow(item2, 1);
             item2.IsVisible = true;
         }
      }
    }
 }

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;

namespace App11
{
 public class MainPageModel : INotifyPropertyChanged
 {
     public event PropertyChangedEventHandler PropertyChanged;
     public void OnPropertyChanged(string name)
     {
         if (this.PropertyChanged != null)
             this.PropertyChanged(this, new PropertyChangedEventArgs(name));
     }
     private string title;
     public string Title
     {
         get { return title; }
         set
         {
             title = value;
             OnPropertyChanged("Title");
         }
     }
     private string subTitle;
     public string SubTitle
     {
         get { return subTitle; }
        set
        {
            subTitle = value;
            OnPropertyChanged("SubTitle");
        }
    }
    private string dollar;
    public string Dollar
    {
        get { return dollar; }
        set
        {
            dollar = value;
            OnPropertyChanged("Dollar");
        }
    }
    private string subViewText;
    public string SubViewText
    {
        get { return subViewText; }
        set {
            subViewText = value;
            OnPropertyChanged("subViewText");
        }
    }
  }
}

我的 MainPageViewModel.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Text;

namespace App11
{
public class MainPageViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged(string name)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(name));
    }
    private ObservableCollection<MainPageModel> myModel;
    public ObservableCollection<MainPageModel> MyModel
    {
        get { return myModel; }
        set
        {
            myModel = value;
            OnPropertyChanged("MyModel");
            }
    }
    public MainPageViewModel()
    {
        MyModel = new ObservableCollection<MainPageModel>()
        {
            new MainPageModel()
            {
                Title = "MENSAL",
                SubTitle = "cobranças a cada 30 dias",
                Dollar = "R$ 22,90",
                SubViewText = "Acesso a 10 campanhas por mês Até 3 campanhas por mês Visualização de perfil limitada"
            },
            new MainPageModel()
            {
                Title = "TRIMESTRAL",
                SubTitle = "cobranças a cada 90 dias",
                Dollar = "R$ 49,90",
                SubViewText = "Acesso a rola do kid bengala quase ilimitada"
            },
            new MainPageModel()
            {
                Title = "SEMESTRAL",
                SubTitle = "cobranças a cada 180 dias",
                Dollar = "R$ 99,90",
                SubViewText = "Acesso a rola do kid bengala ilimitada"
            }
        };
     }
   }
}

【问题讨论】:

  • 好吧,框架就像一个 ViewContainer 一样,只需在其中添加一些东西,就像在堆栈布局中添加一样,就可以了
  • 你可以参考这个:docs.microsoft.com/en-us/dotnet/api/…,通过使用框架,它会为你提供像这样的角半径属性:&lt;Frame CornerRadius="10"&gt;....&lt;/Frame&gt;。将你所有的内容放在Frame中。

标签: xamarin xamarin.forms xamarin.android


【解决方案1】:

添加零填充框架可能会解决您的问题。 Frame 的默认内边距为 20。

试试下面给出的示例代码(未测试)

<Frame CornerRadius="10" Padding="0">
    <StackLayout Orientation="Vertical" >
        <Frame CornerRadius="10" Padding="0">
            <StackLayout Orientation="Horizontal">
                <StackLayout Orientation="Vertical">
                    <Label Text="{Binding Title}" TextColor="White" />
                    <Label Text="{Binding SubTitle}"  TextColor="White" />
                </StackLayout>
                <Label Text="{Binding Dollar}"  TextColor="White" />
                <Label Text="+" Margin="30,0,0,0" FontSize="Large"  TextColor="White">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="ShowSubView" />
                    </Label.GestureRecognizers>
                </Label>
            </StackLayout>
        </Frame>
        <StackLayout BackgroundColor="#722f38" IsVisible="False" HeightRequest="30">
            <Label Text="{Binding SubViewText}" TextColor="White" />
        </StackLayout>
    </StackLayout>
</Frame>

【讨论】:

  • 这是一个示例代码,您可以参考开发
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-11-06
  • 1970-01-01
  • 1970-01-01
  • 2017-08-03
  • 1970-01-01
  • 1970-01-01
  • 2021-03-20
相关资源
最近更新 更多