آموزش ساخت اسلایدشو یا چرخ و فلک در Xamarin Forms

آموزش ساخت اسلایدشو یا چرخ و فلک در Xamarin Forms

در این مقاله قصد داریم یک اسلایدشو تصاویر را در Xamarin Forms بسازیم.
اسلایدشو از تعدادی تصویر تشکیل شده که به صورت اسلاید نمایش داده می شودند.
برای شروع یک پروژه Xamarin.Forms می سازیم و حتما دقت کنید پکیج های پروژه به آخرین نسخه آپدیت شوند.
پکیج  CarouselView را از NuGet دانلود و نصب کنید (در پروژه PCL، اندروید و آی او اس و ویندوز)
ابتدا به مدل نیاز داریم، برای این کار در پروژه PCL کلاسی با نام Slide.cs می سازیم و کدهای زیر را در آن قرار می دهیم:

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

namespace CarouselViewApp.Models
{
    public class Slide
    {
        public string Name { get; set; }
        public string ImageUrl { get; set; }
    }
}

متدی هم نیاز داریم تا اطلاعات یا یک لیست از اسلایدها را داشته باشد، پس این کلاس را به صورت زیر تغییر میدهیم :

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

namespace CarouselViewApp.Models
{
    public class Slide
    {
        public string Name { get; set; }
        public string ImageUrl { get; set; }
    }

    public class FakeSlideData
    {
        public ObservableCollection<Slide> Slides { get; set; }
        public FakeSlideData()
        {
            Slides = new ObservableCollection<Slide>
            {
                new Slide
                {
                    Name = "Slide 1",
                    ImageUrl = "https://sadin.ir/image/584/280/PostImage/Cover-08cceb83.jpg"
                },
                new Slide
                {
                    Name = "Slide 2",
                    ImageUrl = "https://sadin.ir/image/584/280/PostImage/Cover-7d6cc25e.png"
                },
                new Slide
                {
                    Name = "Slide 3",
                    ImageUrl = "https://sadin.ir/image/584/280/PostImage/SitemapGenerator-69f4da72.png"
                }
            };
        }
    }
}

کلاسی با نام FakeSlideData ساختیم که تعدادی اسلاید را برای آزمایش آماده می کند.
 

اضافه کردن فضای نام CarouselView:

از آنجایی که CarouselView در یک اسمبلی جدا قرار دارد باید فضای نام آن را در صفحه اضافه کنیم:

<Grid RowSpacing="1" BackgroundColor="#333333" ColumnSpacing="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="200"/>
    </Grid.RowDefinitions>
    <cv:CarouselView ItemsSource="{Binding Slides}" x:Name="SlidesCarousel">
        <cv:CarouselView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Image Aspect="Fill" Source="{Binding ImageUrl}"/>
                    <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12" VerticalOptions="EndAndExpand">
                        <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="End"/>
                    </StackLayout>
                </Grid>
            </DataTemplate>
        </cv:CarouselView.ItemTemplate>
    </cv:CarouselView>
</Grid>

همانطور که می بینید CarouselView به صفحه اضافه شد که یک تصویر و یک برچسب دارد، اطلاعات این CarouselView هم از Slides گرفته می شود که جلوتر می بینیم.
پس کدهای کامل صفحه 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:CarouselViewApp"
             x:Class="CarouselViewApp.MainPage" 
             xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView">
    <StackLayout>
        <ScrollView>
            <Grid RowSpacing="1" BackgroundColor="#333333" ColumnSpacing="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="200"/>
                </Grid.RowDefinitions>
                <cv:CarouselView ItemsSource="{Binding Slides}" x:Name="SlidesCarousel">
                    <cv:CarouselView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Image Aspect="Fill" Source="{Binding ImageUrl}"/>
                                <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12" VerticalOptions="EndAndExpand">
                                    <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="End"/>
                                </StackLayout>
                            </Grid>
                        </DataTemplate>
                    </cv:CarouselView.ItemTemplate>
                </cv:CarouselView>
            </Grid>
        </ScrollView>
    </StackLayout>
            

</ContentPage>

آخرین کاری که باید انجام شود، بایند کردن CarouselView است، برای این کار صفحه MainPage.xaml.cs را باز میکنیم و کانستراکتور MainPage را به صورت زیر تغییر میدهیم:
 

public MainPage()
{
    InitializeComponent();
    BindingContext = new FakeSlideData();
}

حالا پروژه ما آماده است، پروژه را اجرا کنید می بینید که اسلایدشو به نمایش داده می شود و تصاویر پشت هم تکرار می شوند.

جمع بندی:
ساخت اسلایدشو در Xamarin Forms کار سختی نیست!
حتما دقت داشته باشید که از آخرین نسخه پکیج Xamarin.Forms استفاده میکنید.
در این مقاله بنده اطلاعات را به صورت دستی وارد کرده ام، شما می توانید از بانک اطلاعاتی، وب سایت و یا هر منبع دیگری دریافت کنید.
 

نظرات (0)

نظرسنجی
میزان رضایت شما از امکانات و مقالات سایت