Xamarin表单，XAML中的Dynamic ScrollView

如何解决Xamarin表单，XAML中的Dynamic ScrollView

我要创建一个GUI，该GUI与以下代码生成的GUI类似，即帧的滚动。

但是，我希望能够有一个动态内容框架的滚动，理想情况下是在XAML中并填充有Item源。我认为如果不根据我所看到的项目视图创建自定义视图，这是不可能的。 ListView和CollectionView不能完全满足我的要求。

我想我需要使用预览版CarouselView，我想知道是否有一种方法可以完成我想做的事情。

<?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>

谢谢安迪。

解决方法

序言：希望我能正确理解您的要求：）

如果通过动态内容表示具有动态ItemTemplate，则可以尝试执行以下操作：

第一步：

定义一个ItemTemplateSelector，您可以为其指定名称。在本课程中，我们将定义我们拥有的模板种类，假设我们定义了三个模板：黄色，橙红色，森林绿色

   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;
       }
   }

第二步：

现在我们已经定义了模板选择器，让我们继续定义模板，在本例中分别是黄色，橘红色和森林绿色框架。我将简单地展示如何制作其中的一个，因为其他人将遵循相同的范例，当然，颜色也会变化。让我们来做YellowFrame

在XAML中，您将：

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>

在后面的代码中：

YellowFrame.xaml.cs：

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

第三步

现在，我们需要创建ViewModel，将其用于ItemSource，并将其应用于FlexLayout，根据Bindable Layouts的文档，“从布局中派生”的任何布局都具有可绑定布局的功能，FlexLayout就是其中之一。

因此，让我们制作ViewModel，我还将为我们要渲染的Color帧创建一个Enum，如我在第一步中的switch语句中所示，但是，您可以选择决定如何分辨哪个模板的方式。加载;这只是一个可能的例子。

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
}

我们快到了，所以到目前为止，我们已经定义了将在该页面上使用的视图模型，最后一步是更新整体XAML，我们将其称为模板选择器。我只会更新所需的代码片段。

<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>

实时图片：

您是否要实现一个可滚动的视图，并且每个子项都包含多个可以水平滚动的内容？

为此功能，请尝试在CarouselView中显示ListView。

检查代码：

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

关于CarouselView的教程：
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/introduction

Xamarin表单，XAML中的Dynamic Sc​​rollView

如何解决Xamarin表单，XAML中的Dynamic Sc​​rollView

解决方法

相关推荐

Xamarin表单，XAML中的Dynamic ScrollView

如何解决Xamarin表单，XAML中的Dynamic ScrollView