微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

将CarouselPage转换为CarouselView

如何解决将CarouselPage转换为CarouselView

是否可以在Xaml中向CarouselView添加直接内容

我需要将旧的CarouselPage转换为较新的CarouselView,但看起来它必须是数据绑定的。但是我每张幻灯片内容是完全不同的,并且不容易将其用于项目模板。

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="myCarousel" 
              x:Name="carouselPage"
NavigationPage.HasNavigationBar="false" BackgroundColor="#000000">
    <ContentPage BackgroundColor="#000000">
        <StackLayout BackgroundColor="#000000">
            <Label Text="Lorem ipsum" />
            <ImageButton Margin="0,20" Source="btn_continue" HorizontalOptions="Center" HeightRequest="30" Clicked="Go_Right" />
        </StackLayout>
    </ContentPage>
    <ContentPage BackgroundColor="#000000">
        <StackLayout BackgroundColor="#000000">
            <Button Text="X" TextColor="White" BackgroundColor="Transparent" VerticalOptions="Start" HorizontalOptions="End" Clicked="Go_Home"></Button>
            <ImageButton Source="slider-2" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="Start"  />
            <Grid Margin="0,20" VerticalOptions="Start">
                <Grid.ColumnDeFinitions>
                    <ColumnDeFinition Width="*" />
                    <ColumnDeFinition Width="*" />
                </Grid.ColumnDeFinitions>
                <ImageButton Source="btn_back" HorizontalOptions="Center" HeightRequest="30" Grid.Column="0" Clicked="Go_Left" />
                <ImageButton Source="btn_close" HorizontalOptions="Center" HeightRequest="30" Grid.Column="1" Clicked="Go_Home" />
            </Grid>
        </StackLayout>
    </ContentPage>

</CarouselPage>

我需要创建一个幻灯片轮播,每个幻灯片都具有与上述内容不同的内容。我该如何使用CarouselViews进行转换?

我在CarouselPage上遇到的问题是它的行为并不总是一致的,这就是为什么我认为他们会逐渐弃用它。

解决方法

但是我每张幻灯片的内容完全不同,并且没有 轻松地将自身借给项目模板。

您需要为每个幻灯片和Choose item appearance at runtime创建不同的DataTemplate,例如:

<ContentPage ...
             xmlns:controls="clr-namespace:CarouselViewDemos.Controls"
             x:Class="CarouselViewDemos.Views.HorizontalLayoutDataTemplateSelectorPage">
    <ContentPage.Resources>
        <DataTemplate x:Key="StyleATemplate">
            ...
        </DataTemplate>

        <DataTemplate x:Key="StyleBTemplate">
            ...
        </DataTemplate>

        <controls:ContentSelector x:Key="myContentSelector"
                                             AmericanMonkey="{StaticResource StyleATemplate}"
                                             OtherMonkey="{StaticResource StyleBTemplate}" />
    </ContentPage.Resources>

    <CarouselView ItemsSource="{Binding Monkeys}"
                  ItemTemplate="{StaticResource myContentSelector}" />
</ContentPage>

在后面的代码中,使用DataTemplateSelector为每张幻灯片选择不同的模板:

public class ContentSelector: DataTemplateSelector
{
    public DataTemplate StyleATemplate{ get; set; }
    public DataTemplate StyleBTemplate{ get; set; }

    protected override DataTemplate OnSelectTemplate(object item,BindableObject container)
    {
        if(item.style == A){
            return  StyleATemplate;
        }else{
            return StyleBTemplate;
        }
       
    }
}
,

是的,您当然可以在每个视图上添加不同的内容。

必须创建一个CustomViewSelector。

检查我的GitHub以获取完整的示例代码https://github.com/georgemichailou/ShaXam

请注意这些文件

https://github.com/georgemichailou/ShaXam/blob/master/ShaXam/UI%20Helper/CustomViewSelector.cs

https://github.com/georgemichailou/ShaXam/blob/master/ShaXam/MainPage.xaml

https://github.com/georgemichailou/ShaXam/blob/master/ShaXam/MainPage.xaml.cs(第17-25-27行)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。