Xamarin.Forms Çerçeve
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 birColor
değerdirFrame
.CornerRadius
köşenin yuvarlatılmış yarıçapını belirleyen birfloat
değerdir.HasShadow
bool
, ç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 Frame
Label
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 ContentView
devralı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 CornerRadius
Frame
ö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 Image
Margin
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 HeightRequest
WidthRequest
özelliklerinin değiştirilmesi gerekebilir.