Formulir Xamarin, Dynamic ScrollView di XAML

Question

Saya ingin membuat GUI yang memiliki kemiripan dengan apa yang dihasilkan kode berikut, gulungan bingkai.

Namun saya ingin dapat memiliki gulungan bingkai konten dinamis, idealnya di XAML dan diisi dengan sumber Item. Saya rasa ini tidak mungkin tanpa membuat tampilan kustom berdasarkan itemsview dari apa yang dapat saya lihat. ListView dan CollectionView tidak cukup melakukan apa yang saya inginkan.

Saya pikir saya perlu menggunakan pratinjau CarouselView, saya bertanya-tanya apakah ada cara untuk melakukan apa yang saya cari tanpanya.

<?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="FlexTest.MainPage">

    <ContentPage.Resources>
    <Style TargetType="Frame">
        <Setter Property="WidthRequest" Value="300"/>
        <Setter Property="HeightRequest" Value="500"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="CornerRadius" Value="20"/>
    </Style>
    </ContentPage.Resources>
    
    
    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame BackgroundColor="Yellow">
                <FlexLayout Direction="Column">
                    <Label Text="Panel 1"/>
                    <Label Text="A Panel"/>
                    <Button Text="Click Me"/>
                </FlexLayout>
            </Frame>
            <Frame BackgroundColor="OrangeRed">
                <FlexLayout Direction="Column">
                    <Label Text="Panel 2"/>
                    <Label Text="Another Panel"/>
                    <Button Text="Click Me"/>
                </FlexLayout>
            </Frame>
            <Frame BackgroundColor="ForestGreen">
                <FlexLayout Direction="Column">
                    <Label Text="Panel 3"/>
                    <Label Text="A Third Panel"/>
                    <Button Text="Click Me"/>
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

Terima kasih Andy.

Answer 1

Apakah Anda ingin menerapkan tampilan yang dapat digulir dan setiap anak berisi beberapa konten yang dapat digulir secara horizontal？

Untuk fitur ini, coba tampilkan CarouselViewdalam a ListView.

Periksa kodenya:

<ListView ...>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <CarouselView>
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            ...
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Tutorial tentang CarouselView:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/introduction

Answer 2

Pendahuluan: Saya harap saya memahami permintaan Anda dengan benar :)

Jika yang Anda maksud dengan konten dinamis adalah memiliki ItemTemplate dinamis, Anda dapat mencoba melakukan hal berikut:

Langkah pertama:

Definisikan ItemTemplateSelector, Anda dapat memberikan nama yang Anda inginkan. Di kelas ini kita akan menentukan jenis template yang kita miliki, misalkan kita memiliki tiga yang Anda tentukan: Yellow, OrangeRed, ForestGreen

   public class FrameTemplateSelector : DataTemplateSelector {
       public DataTemplate YellowFrameTemplate {get; set;}
       public DataTemplate OrangeRedFrameTemplate {get; set;}
       public DataTemplate ForestGreenFrameTemplate {get; set;}

       public FrameTemplateSelector() {
          this.YellowFrameTemplate = new DataTemplate(typeof (YellowFrame));
          this.OrangeRedFrameTemplate = new DataTemplate(typeof (OrangeRedFrame));
          this.ForestGreenFrameTemplate = new DataTemplate(typeof (ForestGreenFrame));
       }

       //This part is important, this is how we know which template to select.
       protected override DataTemplate OnSelectTemplate(object item, BindableObject container) {
          var model = item as YourViewModel;
          switch(model.FrameColor) {
            case FrameColorEnum .Yellow:
              return YellowFrameTemplate;
            case FrameColorEnum .OrangeRed:
              return OrangeRedFrameTemplate;
            case FrameColorEnum .ForestGreen:
              return ForestGreenFrameTemplate;
            default:
             //or w.e other template you want.
              return YellowFrameTemplate;
       }
   }

Langkah Kedua:

Sekarang kita telah menentukan Pemilih Template kita, mari kita lanjutkan dan tentukan template kita, dalam hal ini frame Yellow, OrangeRed, dan ForestGreen kita masing-masing. Saya hanya akan menunjukkan bagaimana membuat salah satunya karena yang lain akan mengikuti paradigma yang sama tidak termasuk, dengan tentu saja warna berubah. Mari lakukan YellowFrame

Di XAML Anda akan memiliki:

YellowFrame.xaml:

<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="YourNameSpaceGoesHere.YellowFrame">
      <Frame BackgroundColor="Yellow">
                <FlexLayout Direction="Column">
                    <Label Text="Panel 1"/>
                    <Label Text="A Panel"/>
                    <Button Text="Click Me"/>
                </FlexLayout>
      </Frame>
</StackLayout>

Di kode di belakang:

YellowFrame.xaml.cs:

public partial class YellowFrame : StackLayout {
   public YellowFrame() {
      InitializeComponent();
   }
}

Langkah ketiga

Sekarang kita perlu membuat ViewModel yang akan kita gunakan untuk ItemSource kita yang akan kita terapkan ke FlexLayout, sesuai dokumentasi untuk Bindable Layouts , setiap layout yang "berasal dari Layout" memiliki kemampuan untuk memiliki Layout Bindable, FlexLayout adalah salah satunya .

Jadi mari kita membuat ViewModel, saya juga akan membuat Enum untuk bingkai Warna yang ingin kita render seperti yang saya tunjukkan dalam pernyataan switch di langkah pertama, namun, Anda dapat memilih cara apa pun untuk memutuskan bagaimana memberi tahu template mana yang akan dimuat; ini hanyalah satu contoh yang mungkin.

BaseViewModel.cs:

public abstract class BaseViewModel : INotifyPropertyChanged {

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = ""){
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public virtual void CleanUp(){
        }
    }

ParentViewModel.cs:

public class ParentViewModel: BaseViewModel {
   private ObservableCollection<YourViewModel> myViewModels {get; set;}
   public ObservableCollection<YourViewModel> MyViewModels {
      get { return myViewModels;}
      set { 
          myViewModels = value;
          OnPropertyChanged("MyViewModels");
      }
   }

   public ParentViewModel() {
     LoadData();
   }

   private void LoadData() {
       //Let us populate our data here. 
       myViewModels = new ObservableCollection<YourViewModel>();

       myViewModels.Add(new YourViewModel {FrameColor = FrameColorEnum .Yellow});
       myViewModels.Add(new YourViewModel {FrameColor = FrameColorEnum .OrangeRed});
       myViewModels.Add(new YourViewModel {FrameColor = FrameColorEnum .ForestGreen});
      MyViewModels = myViewModels;
   }
}

YourViewModel.cs:

public class YourViewModel : BaseViewModel {
    public FrameColorEnum FrameColor {get; set;}
}

FrameColorEnum.cs:

public enum FrameColorEnum {
   Yellow,
   OrangeRed,
   ForestGreen
}

Kita hampir sampai, jadi apa yang telah kita lakukan sejauh ini adalah kita mendefinisikan model tampilan kita yang akan kita gunakan pada halaman itu, langkah terakhir adalah memperbarui keseluruhan XAML kita di mana kita akan memanggil Pemilih Template kita. Saya hanya akan memperbarui cuplikan yang diperlukan.

<ContentPage 
...
    **xmlns:views="your namespace where it was defined here, 
    normally you can just type the name of the Selector then have VS add the proper
    namespace and everything"**
<ContentPage.Resources>
<!--New stuff below-->
   <ResourceDictionary>
       <views:FrameTemplateSelector x:Key="FrameTemplateSelector"/>
   </ResourceDictionary>
</ContentPage.Resources>

<ScrollView Orientation="Both">
        <FlexLayout BindableLayout.ItemsSource="{Binding MyViewModels, Mode=TwoWay}"
                    BindableLayout.ItemTemplateSelector ="{StaticResource FrameTemplateSelector}"/>
    </ScrollView>

Gambar Langsung: