Xamarin.Forms Marco

Descarga del ejemplo

La clase es un diseño que se usa para encapsular una vista con un borde que se Xamarin.FormsFrame puede configurar con color, sombra y otras opciones. Los marcos se usan normalmente para crear bordes alrededor de controles, pero se pueden usar para crear una interfaz de usuario más compleja. Para obtener más información, vea Uso avanzado de fotogramas.

En la captura de pantalla siguiente Frame se muestran los controles en iOS y Android:

La clase Frame define las propiedades siguientes:

• Xamarin_Forms _Frame_BorderColor" data-linktype="absolute-path">es un valor que determina el BorderColor color del ColorFrame borde.
• Xamarin_Forms _Frame_CornerRadius" data-linktype="absolute-path">es un valor que determina el radio redondeado CornerRadius de la float esquina.
• Xamarin_Forms _Frame_HasShadow" data-linktype="absolute-path">es un valor que determina si el marco tiene HasShadow una sombra bool paralela.

Estas propiedades están copiadas por BindableProperty objetos , lo que significa que puede ser el destino de los enlaces de Frame datos.

Crear un marco

Se Frame puede crear una instancia de en XAML. El objeto Frame predeterminado tiene un fondo blanco, una sombra paralela y ningún borde. Normalmente, Frame un objeto encapsula otro control. En el ejemplo siguiente se muestra un ajuste Frame predeterminado de un objeto Label :

<Frame>
  <Label Text="Example" />
</Frame>

También Frame se puede crear un en el código:

Frame defaultFrame = new Frame
{
    Content = new Label { Text = "Example" }
};

Frame Los objetos se pueden personalizar con esquinas redondeadas, bordes coloreados y sombras paralelas estableciendo propiedades en xaml. En el ejemplo siguiente se muestra un objeto Frame personalizado:

<Frame BorderColor="Orange"
       CornerRadius="10"
       HasShadow="True">
  <Label Text="Example" />
</Frame>

Estas propiedades de instancia también se pueden establecer en el código:

Frame frame = new Frame
{
    BorderColor = Color.Orange,
    CornerRadius = 10,
    HasShadow = true,
    Content = new Label { Text = "Example" }
};

Uso avanzado de fotogramas

La Frame clase hereda de ContentView , lo que significa que puede contener cualquier tipo de View objeto, incluidos Layout los objetos . Esta capacidad permite que Frame se utilice para crear objetos de interfaz de usuario complejos, como tarjetas.

Creación de una tarjeta con un marco

La combinación de Frame un objeto con un objeto como un objeto permite la creación de una interfaz de usuario más LayoutStackLayout compleja. En la captura de pantalla siguiente se muestra una tarjeta de ejemplo, creada con un Frame objeto :

El código XAML siguiente muestra cómo crear una tarjeta con la Frame clase :

<Frame BorderColor="Gray"
       CornerRadius="5"
       Padding="8">
  <StackLayout>
    <Label Text="Card Example"
           FontSize="Medium"
           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>

También se puede crear una tarjeta en el código:

Frame cardFrame = new Frame
{
    BorderColor = Color.Gray,
    CornerRadius = 5,
    Padding = 8,
    Content = new StackLayout
    {
        Children =
        {
            new Label
            {
                Text = "Card Example",
                FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                FontAttributes = FontAttributes.Bold
            },
            new BoxView
            {
                Color = Color.Gray,
                HeightRequest = 2,
                HorizontalOptions = LayoutOptions.Fill
            },
            new Label
            {
                Text = "Frames can wrap more complex layouts to create more complex UI components, such as this card!"
            }
        }
    }
};

Elementos round

La CornerRadius propiedad del control se puede usar para crear una imagen de Frame círculo. En la captura de pantalla siguiente se muestra un ejemplo de una imagen redondeada, creada mediante un Frame objeto :

El código XAML siguiente muestra cómo crear una imagen de círculo en XAML:

<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>

También se puede crear una imagen de círculo en el código:

Frame circleImageFrame = new Frame
{
    Margin = 10,
    BorderColor = Color.Black,
    CornerRadius = 50,
    HeightRequest = 60,
    WidthRequest = 60,
    IsClippedToBounds = true,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Content = new Image
    {
        Source = ImageSource.FromFile("outdoors.jpg"),
        Aspect = Aspect.AspectFill,
        Margin = -20,
        HeightRequest = 100,
        WidthRequest = 100
    }
};

La outdoors.jpg se debe agregar a cada proyecto de plataforma y cómo se consigue varía según la plataforma. Para obtener más información, vea Images in Xamarin.Forms.

Vínculos relacionados

• Demostraciones de fotogramas
• Images in Xamarin.Forms