フレーム

.NET マルチプラットフォーム アプリ UI (.NET MAUI) Frame を使用すると、色、影、その他のオプションを設定できる罫線でビューやレイアウトを囲むことができます。 フレームを使用するとコントロールの周囲に罫線を作成できますが、より複雑な UI を作成するためにも使用できます。

Frame クラスでは、次のプロパティが定義されます。

• Color 型の BorderColor は、Frame 境界線の色を決定します。
• float 型の CornerRadius は、丸い角の半径を決定します。
• bool 型の HasShadow は、フレームに陰影をつけるかどうかを決定します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

Frame クラスは、Content をバインド可能なプロパティを提供する ContentView を継承します。 Content プロパティは Frame クラスの ContentProperty であるため、XAML から明示的に設定する必要はありません。

Note

Frame クラスは Xamarin.Forms に存在し、アプリを Xamarin.Forms から .NET MAUI に移行するユーザー向けに .NET MAUI に存在します。 新しい .NET MAUI アプリを構築している場合は、代わりに Border を使用し、VisualElement の Shadow をバインド可能なプロパティを使用して陰影を設定することをお勧めします。 詳細については、「境界線」と「陰影」を参照してください。

フレームの作成

Frame オブジェクトは通常、Label などの別のコントロールを囲みます。

<Frame>
  <Label Text="Frame wrapped around a Label" />
</Frame>

Frame オブジェクトの外観は、プロパティを設定することでカスタマイズできます。

<Frame BorderColor="Gray"
       CornerRadius="10">
  <Label Text="Frame wrapped around a Label" />
</Frame>

同等の C# コードを次に示します。

Frame frame = new Frame
{
    BorderColor = Colors.Gray,
    CornerRadius = 10,
    Content = new Label { Text = "Frame wrapped around a Label" }
};

次のスクリーンショットは、Frame の例を示しています。

フレームを使用したカードの作成

Frame オブジェクトを StackLayout などのレイアウトと組み合わせると、より複雑な UI を作成できます。

次の XAML は、Frame を使用してカードを作成する方法を示しています。

<Frame BorderColor="Gray"
       CornerRadius="5"
       Padding="8">
  <StackLayout>
    <Label Text="Card Example"
           FontSize="14"
           FontAttributes="Bold" />
    <BoxView Color="Gray"
             HeightRequest="2"
             HorizontalOptions="Fill" />
    <Label Text="Frames can wrap more complex layouts to create more complex UI components, such as this card!"/>
  </StackLayout>
</Frame>

次のスクリーンショットは、カードの例を示しています。

要素を丸くする

Frame コントロールの CornerRadius プロパティは、円の画像を作成する方法の 1 つです。 次の XAML は、Frame を使用して円の画像を作成する方法を示しています。

<Frame Margin="10"
       BorderColor="Black"
       CornerRadius="50"
       HeightRequest="60"
       WidthRequest="60"
       IsClippedToBounds="True"
       HorizontalOptions="Center"
       VerticalOptions="Center">
  <Image Source="outdoors.jpg"
         Aspect="AspectFill"
         Margin="-20"
         HeightRequest="100"
         WidthRequest="100" />
</Frame>

次のスクリーンショットは、円の画像の例を示しています。