サーチ…


備考

CarouselViewは任意の種類のビューを含むことができるXamarinコントロールです。このプレリリースコントロールは、Xamarinフォームプロジェクトでのみ使用できます。

James Montemagnoが提供するXamarinのブログでは、画像を表示するためにCarouselViewが使用されています。

この時点でCarouselViewはXamarin.Formsに統合されていません。プロジェクトでこれを使用するには、NuGet-Packageを追加する必要があります(上記の例を参照)。

CarouselViewのインポート

CarouselViewをインポートする最も簡単な方法は、Xamarin / Visual StudioのNuGet-Packages Managerを使用することです。 ここに画像の説明を入力

プレリリースパッケージを使用するには、左端にある[プレリリースパッケージを表示]チェックボックスをオンにしてください。

各サブプロジェクト(.iOS / .droid ./ WinPhone)はこのパッケージをインポートする必要があります。

CarouselViewをXAMLページにインポートする

基礎

ContentPageの見出しに、次の行を挿入します。

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

<ContentPage.Content>タグの間にCarouselView:

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

x:NameはCarouselViewに名前を付け、C#のコードビハインドファイルで使用できます。これは、CarouselViewをビューに統合するために必要な基本です。 CarouselViewが空であるため、この例では何も表示されません。

バインド可能なソースの作成

ItemSourceの例として、ObservableCollectionという文字列を使用します。

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

TechGiantはTechnology Giantsの名前をホストするクラスです

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のItemSourceに設定します

DemoCarouselView.ItemsSource = TechGiants;

DataTemplates

XAMLファイルでCarouselViewにDataTemplateを与えます:

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

DataTemplateを定義します。この場合、これは、itemsourceと緑の背景にバインドされたテキストを持つラベルになります。

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

それでおしまい!プログラムを実行し、結果を確認してください!



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow