Sdílet prostřednictvím


Rámec

Uživatelské rozhraní aplikace .NET s více platformami (.NET MAUI) Frame slouží k zabalení zobrazení nebo rozložení ohraničením, které lze nakonfigurovat pomocí barev, stínů a dalších možností. Rámce lze použít k vytvoření ohraničení okolo ovládacích prvků, ale lze je použít také k vytvoření složitějšího uživatelského rozhraní.

Třída Frame definuje následující vlastnosti:

  • BorderColor, typu Color, určuje barvu ohraničení Frame .
  • CornerRadius, typu float, určuje zaoblený poloměr rohu.
  • HasShadow, typu bool, určuje, zda má rámeček stín.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Třída Frame dědí z ContentView, která poskytuje Content bindable vlastnost. Vlastnost Content je ContentProperty třída Frame , a proto není nutné explicitně nastavit z XAML.

Poznámka:

Třída Frame existovala v Xamarin.Forms a je přítomna v .NET MAUI pro uživatele, kteří migrují své aplikace z Xamarin.Forms do .NET MAUI. Pokud vytváříte novou aplikaci .NET MAUI, doporučuje se místo toho použít Border stíny a nastavit stíny pomocí Shadow vlastnosti bindable na VisualElement. Další informace naleznete v tématu Ohraničení a stín.

Vytvoření rámce

Objekt Frame obvykle zabalí jiný ovládací prvek, například Label:

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

Vzhled Frame objektů lze přizpůsobit nastavením vlastností:

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

Ekvivalentní kód jazyka C# je:

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

Následující snímek obrazovky ukazuje příklad Frame:

Screenshot of Frame examples.

Vytvoření karty s rámečkem

Kombinování objektu Frame s rozložením, jako StackLayout je například povolení vytváření složitějšího uživatelského rozhraní.

Následující XAML ukazuje, jak vytvořit kartu s 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>

Následující snímek obrazovky ukazuje ukázkovou kartu:

Screenshot of a card created with a Frame.

Kulaté prvky

Vlastnost CornerRadiusFrame ovládacího prvku je jedním z přístupů k vytvoření kruhového obrázku. Následující XAML ukazuje, jak vytvořit obrázek kruhu s 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>

Následující snímek obrazovky ukazuje příklad obrázku kruhu:

Screenshot of a circle image created with a Frame.