次の方法で共有

コンテンツビュー

  • [アーティクル]

サンプルを参照。 サンプル を参照。

.NET マルチプラットフォーム アプリ UI (.NET MAUI) ContentView は、再利用可能なカスタム コントロールの作成を可能にするコントロールです。

ContentView クラスは、ContentViewの内容を表す View型の Content プロパティを定義します。 このプロパティは、BindableProperty オブジェクトによってサポートされます。つまり、データ バインディングのターゲットとしてスタイルを設定できます。

ContentView クラスは、コントロールの外観を定義する ControlTemplate型のバインド可能なプロパティ ControlTemplate 定義する TemplatedView クラスから派生します。 ControlTemplate プロパティの詳細については、「ControlTemplateを使用して外観をカスタマイズする」を参照してください。

手記

ContentView に含めることができる子は 1 つだけです。

カスタム コントロールを作成する

ContentView クラスは単独ではほとんど機能しませんが、カスタム コントロールの作成に使用できます。 カスタム コントロールを作成するプロセスは次のとおりです。

  1. ContentView クラスから派生するクラスを作成します。
  2. カスタム コントロールの分離コード ファイルでコントロールのプロパティまたはイベントを定義します。
  3. カスタム コントロールの UI を定義します。

この記事では、カードのようなレイアウトで画像、タイトル、説明を表示する UI 要素である CardView コントロールを作成する方法について説明します。

ContentView 派生クラスを作成する

ContentView派生クラスは、Visual Studio の ContentView 項目テンプレートを使用して作成できます。 このテンプレートは、カスタム コントロールの UI を定義できる XAML ファイルと、コントロールのプロパティ、イベント、その他のロジックを定義できる分離コード ファイルを作成します。

コントロールのプロパティを定義する

コントロールのプロパティ、イベント、およびその他のロジックは、ContentView派生クラスの分離コード ファイルで定義する必要があります。

CardView カスタム コントロールは、次のプロパティを定義します。

  • CardTitleは、カードに表示されるタイトルを表す stringのタイプです。
  • CardDescription、カードに表示される説明を表す stringの種類です。
  • IconImageSourceは、カードに表示される画像を表す ImageSource型です。
  • IconBackgroundColor、カードに表示されるイメージの背景色を表す Color型です。
  • BorderColorは、カードの境界線、画像の境界線、および分割線の色を表す Color型です。
  • Colorという種類の、カードの背景色を表す CardColor。

各プロパティは、BindableProperty インスタンスによってサポートされます。

次の例は、CardView クラスのコードビハインド ファイルで CardTitle のバインド可能なプロパティを示しています。

public partial class CardView : ContentView
{
    public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(nameof(CardTitle), typeof(string), typeof(CardView), string.Empty);

    public string CardTitle
    {
        get => (string)GetValue(CardView.CardTitleProperty);
        set => SetValue(CardView.CardTitleProperty, value);
    }
    // ...

    public CardView()
    {
        InitializeComponent();
    }
}

BindableProperty オブジェクトの詳細については、「バインド可能なプロパティ を参照してください。

UI を定義する

カスタム コントロール UI は、コントロールのルート要素として ContentView を使用する、ContentView派生クラスの XAML ファイルで定義できます。

<ContentView ...
             xmlns:local="clr-namespace:CardViewDemo.Controls"
             x:Name="this"
             x:Class="CardViewDemo.Controls.CardView"
             x:DataType="local:CardView">
    <Border BindingContext="{x:Reference this}"
            BackgroundColor="{Binding CardColor}"
            Stroke="{Binding BorderColor}"
            ...>
        <Grid>
            ...
            <Border Stroke="{Binding BorderColor, FallbackValue='Black'}"
                    BackgroundColor="{Binding IconBackgroundColor, FallbackValue='Grey'}"
                   ...>
                <Image Source="{Binding IconImageSource}"
                       .. />
            </Border>
            <Label Text="{Binding CardTitle, FallbackValue='Card Title'}"
                   ... />
            <BoxView BackgroundColor="{Binding BorderColor, FallbackValue='Black'}"
                     ... />
            <Label Text="{Binding CardDescription, FallbackValue='Card description text.'}"
                   ... />
        </Grid>
    </Border>
</ContentView>

ContentView 要素は、x:Name プロパティを thisに設定します。このプロパティを使用して、CardView インスタンスにバインドされたオブジェクトにアクセスできます。 レイアウト内の要素は、バインドされたオブジェクトで定義された値へのプロパティのバインドを設定します。 データ バインディングの詳細については、「データ バインディングの」を参照してください。

手記

Binding 式の FallbackValue プロパティは、バインディングが null場合に既定値を提供します。

カスタム コントロールをインスタンス化する

カスタム コントロール名前空間への参照は、カスタム コントロールをインスタンス化するページに追加する必要があります。 参照が追加されると、CardView をインスタンス化し、そのプロパティを定義できます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:CardViewDemo.Controls"
             x:Class="CardViewDemo.CardViewXamlPage">
   <ScrollView>
       <StackLayout>
           <controls:CardView BorderColor="DarkGray"
                              CardTitle="Slavko Vlasic"
                              CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
                              IconBackgroundColor="SlateGray"
                              IconImageSource="user.png" />
            <!-- More CardView objects -->
       </StackLayout>
   </ScrollView>
</ContentPage>

次のスクリーンショットは、複数の CardView オブジェクトを示しています。

CardView オブジェクトのスクリーンショット。

ControlTemplate を使用して外観をカスタマイズする

ContentView クラスから派生したカスタム コントロールは、XAML またはコードを使用してその UI を定義することも、その UI をまったく定義しない場合もあります。 ControlTemplate を使用すると、その外観の定義方法に関係なく、コントロールの外観をオーバーライドできます。

たとえば、CardView レイアウトでは、ユース ケースによっては領域が多すぎる場合があります。 ControlTemplate を使用すると、CardView レイアウトをオーバーライドして、圧縮されたリストに適した、よりコンパクトなビューを提供できます。

<ContentPage.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="CardViewCompressed">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="100" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100*" />
                </Grid.ColumnDefinitions>
                <Image Source="{TemplateBinding IconImageSource}"
                       BackgroundColor="{TemplateBinding IconBackgroundColor}"
                       WidthRequest="100"
                       HeightRequest="100"
                       Aspect="AspectFill"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
                <StackLayout Grid.Column="1">
                    <Label Text="{TemplateBinding CardTitle}"
                           FontAttributes="Bold" />
                    <Label Text="{TemplateBinding CardDescription}" />
                </StackLayout>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

ControlTemplate のデータ バインディングでは、TemplateBinding マークアップ拡張機能を使用してバインドを指定します。 ControlTemplate プロパティは、その x:Key 値を使用して、定義された ControlTemplate オブジェクトに設定できます。 次の例は、CardView インスタンスに設定された ControlTemplate プロパティを示しています。

<controls:CardView ControlTemplate="{StaticResource CardViewCompressed}" />

次のスクリーンショットは、標準の CardView インスタンスと、コントロール テンプレートがオーバーライドされた複数の CardView インスタンスを示しています。

ControlTemplate でオーバーライドされた CardView のスクリーンショット。

コントロール テンプレートの詳細については、「コントロール テンプレートの」を参照してください。