Aracılığıyla paylaş

Bölüm 4'ün özeti. Yığını kaydırma

Not

Bu kitap 2016 baharında yayımlanmıştır ve o zamandan beri güncellenmemiştir. Kitapta değerli kalan çok şey vardır, ancak bazı malzemeler eskidir ve bazı konular artık tamamen doğru veya eksiksiz değildir.

Bu bölüm öncelikli olarak, sayfadaki birden çok görünümün görsel görünümünü düzenlemek için kullanılan sınıfların ve tekniklerin genel terimi olan Xamarin.Forms düzen kavramını tanıtmaya ayrılmıştır.

Düzen, ve Layout<T>'den Layout türetilen birkaç sınıf içerir. Bu bölüm üzerinde StackLayoutdurmaktadır.

Not

FlexLayout 3.0'da Xamarin.Forms kullanıma sunulan, daha fazla esneklikle benzer StackLayout ama daha esnek bir şekilde kullanılabilir.

Bu bölümde ScrollViewayrıca , Frameve BoxView sınıfları da sunulmuştur.

Görünüm yığınları

StackLayouttüründe bir Children özelliğinden Layout<View> IList<View>türetir ve devralır. Bu koleksiyona birden çok görünüm öğesi ekler ve StackLayout bunları yatay veya dikey bir yığında görüntülersiniz.

öğesinin Orientation StackLayout özelliğini veya sabit listesi HorizontalVertical üyesine StackOrientation ayarlayın. Varsayılan değer: Vertical.

alt öğeler Spacing arasında bir aralık belirtmek için özelliğini StackLayout bir double değer olarak ayarlayın. Varsayılan değer 6'dır.

Kodda, ColorLoop örneğinde gösterildiği gibi veya foreach for döngüsündeki koleksiyonuna StackLayout öğe Children ekleyebilir veya koleksiyonu ColorList'te gösterildiği gibi tek tek görünümlerin listesiyle başlatabilirsiniz.Children Alt öğelerden View türetilmelidir, ancak diğer StackLayout nesneleri içerebilir.

İçerik kaydırma

bir StackLayout sayfada görüntülenemeyecek kadar çok alt öğe içeriyorsa, kaydırmaya izin vermek için öğesini içine ScrollView koyabilirsinizStackLayout.

Content özelliğini ScrollView kaydırmak istediğiniz görünüme ayarlayın. Bu genellikle bir 'dir, ancak herhangi bir StackLayoutgörünüm olabilir.

Orientation özelliğini ScrollView , VerticalHorizontalveya Bothözelliğinin ScrollOrientation bir üyesine ayarlayın. Varsayılan değer: Vertical. öğesinin ScrollView içeriği bir StackLayoutise, iki yönlendirme tutarlı olmalıdır.

ReflectedColors örneği, kullanılabilir renkleri görüntülemek için ve StackLayout kullanımını ScrollView gösterir. Örnek ayrıca açıkça listelemeye gerek kalmadan yapının tüm genel statik özelliklerini ve alanlarını elde etmek için .NET yansımasını Color nasıl kullanacağınızı gösterir.

Genişlet seçeneği

Bir StackLayout alt öğe alt öğelerini yığdığında, her çocuk, çocuğun boyutuna ve ayarlarına ve HorizontalOptions VerticalOptions özelliklerine bağlı olan toplam yüksekliği StackLayout içinde belirli bir yuvayı kaplar. Bu özelliklere türünde LayoutOptionsdeğerler atanır.

Yapısı LayoutOptions iki özelliği tanımlar:

Kolaylık olması için yapı, LayoutOptions iki örnek özelliğinin LayoutOptions tüm birleşimlerini kapsayan türünde sekiz statik salt okunur alan da tanımlar:

Aşağıdaki tartışmada varsayılan dikey yönlendirmeye sahip bir StackLayout yer alır. Yatay StackLayout benzerdir.

Dikey StackLayoutiçin ayarı, HorizontalOptions bir çocuğun yatay olarak öğesinin genişliği StackLayoutiçinde nasıl konumlandırılmış olduğunu belirler. Alignment, Centerveya End ayarıStart, alt öğesinin yatay olarak kısıtlanmamış olmasını neden olur. Alt öğe kendi genişliğini belirler ve öğesinin solunda, ortasında veya sağında StackLayoutkonumlandırılır. seçeneği Fill , alt öğesinin yatay olarak kısıtlanmış olmasını sağlar ve genişliğini StackLayoutdoldurur.

Dikey StackLayoutiçin, her alt öğe dikey olarak kısıtlanmamıştır ve çocuğun yüksekliğine bağlı olarak dikey bir yuva alır ve bu durumda ayarın VerticalOptions ilgisizdir.

Dikeyin StackLayout kendisi kısıtlanmamışsa VerticalOptions (yani ayarı Start, Centerveya Endise), yüksekliği StackLayout alt öğelerinin toplam yüksekliğidir.

Bununla birlikte, dikey StackLayout dikey olarak kısıtlanmışsa VerticalOptions (ayarı Fillise) öğesinin StackLayout yüksekliği kapsayıcısının yüksekliği olur ve bu da alt öğelerinin toplam yüksekliğinden daha yüksek olabilir. Böyle bir durum söz konusuysa ve en az bir alt öğede bayrağı trueolan bir VerticalOptions Expands ayar varsa içindeki StackLayout ek alan bayrağı olan Expands truetüm alt öğeler arasında eşit olarak ayrılır. Daha sonra çocukların toplam yüksekliği, yüksekliğine StackLayouteşit olur ve Alignment ayarın VerticalOptions bir bölümü çocuğun yuvasında dikey olarak nasıl konumlandırılacağını belirler.

Bu, VerticalOptionsDemo örneğinde gösterilmiştir.

Çerçeve ve BoxView

Bu iki dikdörtgen görünüm genellikle sunu amacıyla kullanılır.

Görünüm, Frame gibi StackLayoutbir düzen olabilecek başka bir görünümün çevresinde dikdörtgen bir çerçeve görüntüler. Frame içinde görüntülenecek görünüme ayarladığınız bir Content özelliği ContentView devralır Frame. Frame varsayılan olarak saydamdır. Çerçevenin görünümünü özelleştirmek için aşağıdaki üç özelliği ayarlayın:

  • Görünür OutlineColor hale getirmek için özelliği. Temel alınan renk düzenini bilmediğiniz durumlarda olarak ayarlamak OutlineColor Color.Accent yaygın bir durumdur.
  • özelliği, HasShadow iOS cihazlarında siyah gölge görüntüleyecek şekilde true ayarlanabilir.
  • Çerçeve ile çerçevenin Padding içeriği arasında boşluk bırakmak için özelliğini bir Thickness değere ayarlayın. Varsayılan değer her tarafta 20 birimdir.

varsayılan Frame HorizontalOptions değerine ve VerticalOptions değerlerine LayoutOptions.Fillsahiptir. Bu, kapsayıcısını Frame dolduracağı anlamına gelir. Diğer ayarlarla, boyutu Frame içeriğinin boyutuna bağlıdır.

Frame, FramedText örneğinde gösterilmiştir.

özelliği BoxView tarafından Color belirtilen dikdörtgen renk alanını görüntüler.

BoxView kısıtlanmışsa (HorizontalOptionsve VerticalOptions özellikleri varsayılan ayarlarına LayoutOptions.Fillsahipse), BoxView bunun için kullanılabilir alanı doldurur. BoxView kısıtlanmamışsa (ile HorizontalOptions ve LayoutOptions ayarları Start, Centerveya End) varsayılan boyutu 40 birim karedir. Bir BoxView , bir boyutta kısıtlanabilir ve diğerinde kısıtlanamaz.

Genellikle ve özelliklerini BoxView belirli bir boyut verecek şekilde ayarlarsınız.WidthRequest HeightRequest Bu, SizedBoxView örneği tarafından gösterilmiştir.

Belirli bir BoxView rengi görüntülemek için bir ve birkaç Label örneği Frame birleştirmek için birkaç örneğini StackLayout kullanabilir ve ardından colorBlocks örneğinde gösterilen çekici renk listesini oluşturmak için bu görünümlerin her birini içine StackLayout ScrollView yerleştirebilirsiniz:

Renk bloklarının üçlü ekran görüntüsü

StackLayout'ta ScrollView mu?

içine bir StackLayout ScrollView koymak yaygın bir durumdur, ancak içine bir ScrollView StackLayout koymak da bazen kullanışlıdır. Teoride bu mümkün olmamalıdır çünkü dikey StackLayout bir dikeyin çocukları dikey olarak kısıtlanmamıştır. Ancak dikey ScrollView olarak kısıtlanmış olmalıdır. Daha sonra kaydırma için alt öğesinin boyutunu belirleyebilmesi için belirli bir yükseklik verilmelidir.

İşin püf noktası, alt StackLayout öğeye ScrollView ayarını VerticalOptions vermektirFillAndExpand. Bu, BlackCat örneğinde gösterilmiştir.

BlackCat örneği, paylaşılan kitaplığa eklenmiş program kaynaklarını tanımlamayı ve bunlara erişmeyi de gösterir. Bu, Paylaşılan Varlık Projeleri (SPS) ile de elde edilebilir, ancak BlackCatSap örneğinde gösterildiği gibi işlem biraz daha karmaşıktır.

  • Last updated on