首页 > 解决方案 > Xamarin Forms Carousel 视图绑定问题

问题描述

您好我在将字符串列表绑定到我的轮播视图时遇到问题首先我有一个从服务器获取的对象列表

public class PostObject
    {
        public string PostOwner { get; set; }
        public string Id { get; set; }
        public string Post { get; set; }
        public string ProfileImage { get; set; }
        public List<string> PostImages { get; set; }
    }
  List<PostObject> posts = new List<PostObject>();

这按我的预期工作。

接下来我创建了一个卡片视图,并且在卡片视图中我想要一个轮播视图。

所以我已经像这样设置了我的 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:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
              NavigationPage.HasNavigationBar="True"
             NavigationPage.HasBackButton="False"
             NavigationPage.BackButtonTitle="Back"
             Title="amici"
             x:Class="amici.Posts">

    <NavigationPage.TitleView>
        <StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10" >
            <Label x:Name="GroupTitle" TextColor="White" FontSize="Medium"/>
        </StackLayout>
    </NavigationPage.TitleView>

    <ContentPage.ToolbarItems>
        <ToolbarItem Name="iconexample" Icon="settings.png" Priority="0" Order="Primary" />
    </ContentPage.ToolbarItems>

    <ContentPage.Content>
        <StackLayout>
            <ListView x:Name="ItemsListView" 
             VerticalOptions="FillAndExpand"
             HasUnevenRows="true"
             IsPullToRefreshEnabled="true"
             IsRefreshing="{Binding IsBusy, Mode=OneWay}"
             CachingStrategy="RecycleElement">
                <!--ItemSelected="OnItemSelected"-->
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell >
                            <StackLayout Padding="10">
                                <Frame x:Name="myframe" HasShadow="True" >

                                    <Grid HorizontalOptions="FillAndExpand"  RowSpacing="0" ColumnSpacing="0"  >
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="20" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="20" />
                                            <RowDefinition Height="20" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Label Grid.Row="0"  Text="{Binding PostOwner}" LineBreakMode="WordWrap" Font="Bold,16"  />
                                        <controls:CircleImage Grid.Row="0" Margin="10" BorderColor="white" BorderThickness="1" VerticalOptions="Start" HorizontalOptions="Start" Source="{Binding ProfileImage}" Aspect="AspectFit">
                                            <controls:CircleImage.WidthRequest>
                                                <OnPlatform x:TypeArguments="x:Double">
                                                    <On Platform="Android, iOS">65</On>
                                                </OnPlatform>
                                            </controls:CircleImage.WidthRequest>
                                            <controls:CircleImage.HeightRequest>
                                                <OnPlatform x:TypeArguments="x:Double">
                                                    <On Platform="Android, iOS">65</On>
                                                </OnPlatform>
                                            </controls:CircleImage.HeightRequest>
                                        </controls:CircleImage>

                                        <Label Grid.Row="1"  Text="{Binding Post}" LineBreakMode="WordWrap" Font="Bold,16"  />

                                        <CarouselView x:Name="PostImages" Grid.Row="2" ItemsSource="{Binding PostImages}">
                                            <CarouselView.ItemTemplate>
                                                <DataTemplate>
                                                    <Image Source="{Binding .}" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
                                                </DataTemplate>
                                            </CarouselView.ItemTemplate>
                                        </CarouselView>

                                        <!--<Image Grid.Row="2"  Source="{Binding ImageURL}" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />-->
                                        <BoxView Grid.Row="3"  BackgroundColor="black" HeightRequest="1"  HorizontalOptions="FillAndExpand"/>
                                        <StackLayout Grid.Row="4" Orientation="Horizontal" >
                                            <Label  Text="Likes: " LineBreakMode="NoWrap" Font="Bold,14" />
                                            <Label  Text="0" LineBreakMode="NoWrap" FontSize="14" />
                                        </StackLayout>
                                        <StackLayout Grid.Row="5" Orientation="Horizontal" >
                                            <Label Text="Comments: " LineBreakMode="NoWrap"  Font="Bold,14"  HorizontalOptions="End" />
                                            <Label Text="0" HorizontalOptions="End"  LineBreakMode="NoWrap" FontSize="14" />
                                        </StackLayout>
                                        <!--<Label Grid.Row="2" Text="{Binding OwnerFullName}" LineBreakMode="NoWrap" FontSize="16" />-->
                                    </Grid>
                                </Frame>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
         </StackLayout>


    </ContentPage.Content>
</ContentPage>

在我背后的代码中,我有这个

public Posts (GroupInfo ginfo)
        {
            InitializeComponent ();
            GroupTitle.Text = ginfo.Title;
            CurrentGroupInfo = ginfo;
            GetDataPosts();


            ItemsListView.RefreshCommand = new Command(() => {
                GetDataPosts();
                ItemsListView.IsRefreshing = false;

            });
        }

public void GetDataPosts()
        {
            try
            {
                string apikey = Application.Current.Properties["api"].ToString();
                ItemsListView.ItemsSource = null;
                posts.Clear();

                if (RestController.GetMyPostData(ref posts, CurrentGroupInfo.Id.ToString(), apikey))
                {
                    ItemsListView.ItemsSource = posts;
                }
            }
            catch(Exception e)
            {
                Debug.WriteLine(e.Message);
            }

        }

现在到目前为止一切正常,没有错误,但是当应用程序渲染页面时出现错误

System.TypeInitializationException:“Xamarin.Forms.ItemsView”的类型初始化程序引发异常。

我追溯到轮播视图。当我注释掉轮播视图时,它可以工作。所以我想我不能像我想的那样绑定或使用轮播视图?

标签: xamlxamarin.forms

解决方案


CarouselView 曾经是一个插件,现在已成为 Xamarin.Forms 的一部分,从版本 4 开始生效。您可以使用早期的 XF 版本,但您需要获取此插件,将程序集引用添加到您的 XAML 并将初始化代码放入您的平台具体项目。

或者,您可以升级到 Xamarin.Forms 4


推荐阅读