Xamarin.Forms Karesine

Örneği indirin

Xamarin.FormsFrame Sınıfı, bir görünümü renk, gölge ve diğer seçeneklerle yapılandırılabilecek bir kenarlıkla kaydırmak için kullanılan bir düzendir. Çerçeveler genellikle denetimlerin etrafında kenarlık oluşturmak için kullanılır, ancak daha karmaşık kullanıcı arabirimi oluşturmak için kullanılabilir. Daha fazla bilgi için bkz. Gelişmiş çerçeve kullanımı.

Aşağıdaki ekran görüntüsünde Frame iOS ve Android denetimleri gösterilmektedir:

Android 'de çerçeve örnekleri "

FrameSınıfı aşağıdaki özellikleri tanımlar:

• Xamarin_Forms _Frame_BorderColor "Data-LinkType =" Absolute-path ">BorderColorColor kenarlığın rengini belirleyen bir değerdir Frame .
• Xamarin_Forms _Frame_CornerRadius "Data-LinkType =" Absolute-path ">CornerRadius , float köşenin yuvarlatılmış yarıçapını belirleyen bir değerdir.
• Xamarin_Forms _Frame_HasShadow "Data-LinkType =" Absolute-path ">HasShadowbool karenin bir gölge içerip içermediğini belirleyen bir değerdir.

Bu özellikler nesneler tarafından desteklenir BindableProperty ve bu, Frame veri bağlamalarının hedefi olabileceği anlamına gelir.

Çerçeve oluşturma

Bir Frame , XAML 'de oluşturulabilir. Varsayılan Frame nesnenin beyaz bir arka planı, bir gölge ve bir kenarlığı yoktur. Bir Frame nesne genellikle başka bir denetimi sarmalanmış. Aşağıdaki örnek, Frame bir nesneyi varsayılan sarmalama göstermektedir Label :

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

FrameKod içinde de oluşturulabilir:

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

Frame nesneler, XAML içindeki Özellikler ayarlanarak yuvarlatılmış köşeler, renklendirilmiş Kenarlıklar ve bırakma gölgeleri ile özelleştirilebilir. Aşağıdaki örnekte özelleştirilmiş bir nesne gösterilmektedir Frame :

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

Bu örnek özellikleri de kodda ayarlanabilir:

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

Gelişmiş çerçeve kullanımı

FrameSınıfı öğesinden devralır ContentView , bu da View nesneler dahil olmak üzere herhangi bir nesne türünü içerebileceği anlamına gelir Layout . Bu özellik, ' nin Frame kartlar gibi karmaşık UI nesneleri oluşturmak için kullanılmasına olanak tanır.

Çerçeve ile kart oluşturma

Nesnesini nesne gibi bir nesne Frame ile birleştirmek LayoutStackLayout , daha karmaşık UI oluşturulmasına olanak sağlar. Aşağıdaki ekran görüntüsünde, bir nesnesi kullanılarak oluşturulan örnek bir kart gösterilmektedir Frame :

Bir kareyle

Aşağıdaki XAML, sınıfıyla bir kartın nasıl oluşturulacağını gösterir Frame :

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

Kod içinde de bir kart oluşturulabilir:

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!"
            }
        }
    }
};

Yuvarlak öğeler

CornerRadiusFrame Denetimin özelliği bir daire görüntüsü oluşturmak için kullanılabilir. Aşağıdaki ekran görüntüsünde, bir nesne kullanılarak oluşturulan yuvarlak görüntünün bir örneği gösterilmektedir Frame :

Bir kareyle

Aşağıdaki XAML, XAML 'de bir daire görüntüsünün nasıl oluşturulacağını gösterir:

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

Kodda bir daire görüntüsü de oluşturulabilir:

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

outdoors.jpg resim her platform projesine eklenmelidir ve bunun elde edilmesi platforma göre farklılık gösterir. Daha fazla bilgi için bkz. Images in Xamarin.Forms.

İlgili bağlantılar

• Çerçeve gösterileri
• Images in Xamarin.Forms