Xamarin.Forms
CarouselView - पूर्व-रिलीज़ संस्करण

टिप्पणियों

हिंडोला आयात करें

CarouselView को आयात करने का सबसे आसान तरीका Xamarin / Visual Studios में NuGet-Package Manager का उपयोग करना है:

पूर्व-रिलीज़ पैकेज का उपयोग करने के लिए, सुनिश्चित करें कि आप बाएं कोने पर 'पूर्व-रिलीज़ पैकेज दिखाएँ' चेकबॉक्स सक्षम करें।

प्रत्येक उप-परियोजना (.iOS / .droid ./। WinPhone) को इस पैकेज को आयात करना होगा।

XAML पेज में CarouselView आयात करें

मूल बातें

ContentPage के शीर्षक में, निम्नलिखित पंक्ति सम्मिलित करें:

xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"

<ContentPage.Content> टैग के बीच हिंडोला देखें:

<cv:CarouselView x:Name="DemoCarouselView">
</cv:CarouselView>

x: नाम आपके CarouselView को एक नाम देगा, जिसका उपयोग फ़ाइल के पीछे C # कोड में किया जा सकता है। यह मूल बातें है जो आपको एक दृश्य में CarouselView को एकीकृत करने के लिए करने की आवश्यकता है। दिए गए उदाहरण आपको कुछ भी नहीं दिखाएंगे क्योंकि CarouselView खाली है।

बाइंडेबल सोर्स बनाना

एक ItemSource के उदाहरण के रूप में, मैं स्ट्रिंग्स के एक ऑब्जर्वेबल का उपयोग करूंगा।

public ObservableCollection<TechGiant> TechGiants { get; set; }

TechGiant एक ऐसा वर्ग है जो प्रौद्योगिकी दिग्गजों के नामों की मेजबानी करेगा

public class TechGiant
{
    public string Name { get; set; }

    public TechGiant(string Name)
    {
        this.Name = Name;
    }
}

अपने पेज के InitializeComponent के बाद, ObservableCollection बनाएं और भरें

TechGiants = new ObservableCollection<TechGiant>();
TechGiants.Add(new TechGiant("Xamarin"));
TechGiants.Add(new TechGiant("Microsoft"));
TechGiants.Add(new TechGiant("Apple"));
TechGiants.Add(new TechGiant("Google"));

आखिर में, TechGiants को DemoCarouselView का आइटम स्रोत बनाएं

DemoCarouselView.ItemsSource = TechGiants;

DataTemplates

XAML - फाइल में, CarouselView को एक डेटाटेम्पलेट दें:

<cv:CarouselView.ItemTemplate>
</cv:CarouselView.ItemTemplate>

एक DataTemplate परिभाषित करें। इस स्थिति में, यह आइटम स्रोत और हरे रंग की पृष्ठभूमि के साथ पाठ बाइंड के साथ एक लेबल होगा:

<DataTemplate>
    <Label Text="{Binding Name}" BackgroundColor="Green"/>
</DataTemplate>

बस! कार्यक्रम चलाएं और परिणाम देखें!