Aracılığıyla paylaş

Xamarin.Forms Çerçeve

  • Makale

Xamarin.FormsFrame sınıfı, bir görünümü renk, gölge ve diğer seçeneklerle yapılandırılabilir bir kenarlıkla sarmak için kullanılan bir düzendir. Çerçeveler genellikle denetimlerin çevresinde kenarlıklar 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 iOS ve Android'de denetimler gösterilmektedir Frame :

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

  • BorderColor , kenarlığı rengini belirleyen bir Color değerdir Frame .
  • CornerRadius köşenin yuvarlatılmış yarıçapını belirleyen bir float değerdir.
  • HasShadowbool, çerçevenin gölgesi olup olmadığını belirleyen bir değerdir.

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

Not

Özellik HasShadow davranışı platforma bağlıdır. Varsayılan değer tüm platformlardadır true . Ancak UWP'de gölgeler işlenmez. Hem Android hem de iOS'ta gölgeler işlenir, ancak iOS'ta gölgeler daha koyu olur ve daha fazla yer kaplar.

Çerçeve Oluşturma

Frame XAML'de örneği oluşturulabilir. Varsayılan Frame nesnenin beyaz bir arka planı, gölgesi vardır ve kenarlık yoktur. Bir Frame nesne genellikle başka bir denetimi sarmalar. Aşağıdaki örnekte varsayılan bir FrameLabel nesne sarmalama işlemi gösterilmektedir:

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

Frame Kodda da oluşturulabilir:

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

Frame nesneler, XAML'de özellikler ayarlanarak yuvarlatılmış köşeler, renklendirilmiş kenarlıklar ve gölgeler ile özelleştirilebilir. Aşağıdaki örnekte özelleştirilmiş Frame bir nesne gösterilmektedir:

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

Bu örnek özellikleri kodda da ayarlanabilir:

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

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

Frame sınıfı öğesinden ContentViewdevralır; başka bir deyişle nesneler de dahil olmak üzere Layout herhangi bir nesne türünü View içerebilir. Bu özellik, kartları gibi karmaşık kullanıcı arabirimi nesneleri oluşturmak için kullanılmasını sağlar Frame .

Çerçeveli kart oluşturma

Bir Frame nesneyi nesne gibi bir Layout nesneyle birleştirmek, daha karmaşık bir StackLayout kullanıcı arabirimi oluşturulmasına olanak tanır. Aşağıdaki ekran görüntüsünde, bir nesne kullanılarak oluşturulan örnek bir Frame kart gösterilmektedir:

Aşağıdaki XAML'de sınıfıyla bir kartın nasıl oluşturulacağı gösterilmektedir 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>

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

Öğeleri yuvarlama

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

Aşağıdaki XAML, XAML'de 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 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 görüntüsünün her platform projesine eklenmesi gerekir ve bunun nasıl başarılacağı platforma göre değişir. Daha fazla bilgi için bkz. içindeki Xamarin.Formsgörüntüler.

Not

Yuvarlatılmış köşeler platformlar arasında biraz farklı davranır. Nesnenin ImageMargin genişliği, resim genişliği ile üst çerçeve genişliği arasındaki farkın yarısı olmalı ve görüntüyü nesne içinde Frame eşit bir şekilde ortalamak için negatif olmalıdır. Ancak, istenen genişlik ve yükseklik garanti edilmediğinden Margin, görüntü boyutunuz ve diğer düzen seçenekleriniz temelinde ve HeightRequestWidthRequest özelliklerinin değiştirilmesi gerekebilir.