بستن اطلاعیه
با سلام وبسایت زامارین لرنینگ اقدام به جذب نویسنده متخصص برای وبسایت خود نموده است از علاقه مندان به همکاری دعوت می شود با شماره 09389844800 ( آقای مهندس مجتبی ذوالفقاری ) تماس حاصل فرمایند

نمونه پروژه ساخت اسلایدر در زامارین فرم - xamarin forms

شروع موضوع توسط zolfaghari ‏17 ژوئن 2019 در انجمن تکه کد هایی بصورت پروژه

  1. zolfaghari

    zolfaghari مدیریت کل سایت عضو کادر مدیریت

    ارسال ها:
    165
    تشکر شده:
    187
    امتیاز دستاورد:
    43
    شغل:
    برنامه نویس
    محل سکونت:
    همدان
    سیستم عامل:
    محیط برنامه نویسی:
    سیستم عامل موبایل:
    مرورگر:
    در این پروژه قصد داریم تا اسلایدر را در پروژه پیاده سازی نمائیم
    دقت داشته باشید که پکیج ها را به آخرین نسخه ارتقاء دهید تا به مشکلاتی نظیر ورژن و یا نشناختن برخی قسمت ها توسط پروژه بر نخورید
    1 : ابتدا پکیج

    مهمان گرامی برای مشاهده لینک ها لطفا ثبت نام کنید یا وارد حسابتان شوید

    را از Nuget دانلود و نصب نمائید ( این پکیج در هر چهار پروژه می بایست نصب شود )
    2: مدل مربوط به اسلایدر را به صورت زیر در PCL می سازیم

    C#:
    1. using System;
    2. using System.Collections.Generic;
    3. using System.Collections.ObjectModel;
    4. using System.Text;
    5.  
    6. namespace CarouselViewApp.Models
    7. {
    8.     public class Slide
    9.     {
    10.         public string Name { get; set; }
    11.         public string ImageUrl { get; set; }
    12.     }
    13. }


    خب حال نیاز به متدی داریم تا بتوان به وسیله آن اسلایدر ها را دریافت و ذخیره نمائیم

    C#:
    1. using System;
    2. using System.Collections.Generic;
    3. using System.Collections.ObjectModel;
    4. using System.Text;
    5.  
    6. namespace CarouselViewApp.Models
    7. {
    8.     public class Slide
    9.     {
    10.         public string Name { get; set; }
    11.         public string ImageUrl { get; set; }
    12.     }
    13.  
    14.     public class FakeSlideData
    15.     {
    16.         public ObservableCollection<Slide> Slides { get; set; }
    17.         public FakeSlideData()
    18.         {
    19.             Slides =

      مهمان گرامی برای مشاهده لینک ها لطفا ثبت نام کنید یا وارد حسابتان شوید

      ObservableCollection<Slide>
    20.             {
    21.                

      مهمان گرامی برای مشاهده لینک ها لطفا ثبت نام کنید یا وارد حسابتان شوید

      Slide
    22.                 {
    23.                     Name = "Slide 1",
    24.                     ImageUrl = "image1.jpg"
    25.                 },
    26.                

      مهمان گرامی برای مشاهده لینک ها لطفا ثبت نام کنید یا وارد حسابتان شوید

      Slide
    27.                 {
    28.                     Name = "Slide 2",
    29.                     ImageUrl = "image2.jpg"
    30.                 },
    31.                

      مهمان گرامی برای مشاهده لینک ها لطفا ثبت نام کنید یا وارد حسابتان شوید

      Slide
    32.                 {
    33.                     Name = "Slide 3",
    34.                     ImageUrl = "image3.jpg"
    35.                 }
    36.             };
    37.         }
    38.     }
    39. }
    40.  
    41.  
    42.  


    حال می بایست namespace های اسلایدر را نیز اضافه نمائیم


    XML:
    1. <Grid RowSpacing="1" BackgroundColor="#333333" ColumnSpacing="1">
    2.     <Grid.RowDefinitions>
    3.         <RowDefinition Height="200"/>
    4.     </Grid.RowDefinitions>
    5.     <cv:CarouselView ItemsSource="{Binding Slides}" x:Name="SlidesCarousel">
    6.         <cv:CarouselView.ItemTemplate>
    7.             <DataTemplate>
    8.                 <Grid>
    9.                     <Grid.RowDefinitions>
    10.                         <RowDefinition Height="*"/>
    11.                         <RowDefinition Height="Auto"/>
    12.                     </Grid.RowDefinitions>
    13.                     <Image Aspect="Fill" Source="{Binding ImageUrl}"/>
    14.                     <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12" VerticalOptions="EndAndExpand">
    15.                         <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="End"/>
    16.                     </StackLayout>
    17.                 </Grid>
    18.             </DataTemplate>
    19.         </cv:CarouselView.ItemTemplate>
    20.     </cv:CarouselView>
    21.  
    22.  
    23.  
    24. </Grid>




    پس کد های کامل صفحه mainpage.xml به صورت زیر می باشد



    XML:
    1. <?xml version="1.0" encoding="utf-8" ?>
    2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    3.             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    4.             xmlns:local="clr-namespace:CarouselViewApp"
    5.             x:Class="CarouselViewApp.MainPage"
    6.             xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView">
    7.     <StackLayout>
    8.         <ScrollView>
    9.             <Grid RowSpacing="1" BackgroundColor="#333333" ColumnSpacing="1">
    10.                 <Grid.RowDefinitions>
    11.                     <RowDefinition Height="200"/>
    12.                 </Grid.RowDefinitions>
    13.                 <cv:CarouselView ItemsSource="{Binding Slides}" x:Name="SlidesCarousel">
    14.                     <cv:CarouselView.ItemTemplate>
    15.                         <DataTemplate>
    16.                             <Grid>
    17.                                 <Grid.RowDefinitions>
    18.                                     <RowDefinition Height="*"/>
    19.                                     <RowDefinition Height="Auto"/>
    20.                                 </Grid.RowDefinitions>
    21.                                 <Image Aspect="Fill" Source="{Binding ImageUrl}"/>
    22.                                 <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12" VerticalOptions="EndAndExpand">
    23.                                     <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="End"/>
    24.                                 </StackLayout>
    25.                             </Grid>
    26.                         </DataTemplate>
    27.                     </cv:CarouselView.ItemTemplate>
    28.                 </cv:CarouselView>
    29.             </Grid>
    30.         </ScrollView>
    31.     </StackLayout>
    32.        
    33. </ContentPage>




    و در آخر بایند کردن اسلایدر



    C#:
    1. public MainPage()
    2. {
    3.     InitializeComponent();
    4.     BindingContext =

      مهمان گرامی برای مشاهده لینک ها لطفا ثبت نام کنید یا وارد حسابتان شوید

      FakeSlideData();
    5. }
    6.  
     

به اشتراک بگذارید