Model temelli uygulamanız için özel sayfa tasarlama

Makale
09/29/2023

Bu makalede, model temelli bir uygulamada kullanmak üzere özel sayfa tasarlama ipuçları sağlanmaktadır.

Önemli

Özel sayfalar, önemli ürün değişikliklerinin bulunduğu yeni bir özelliktir ve şu anda Özel Sayfa Bilinen Sorunları bölümünde açıklanan birçok bilinen sınırlamaya sahiptir.

Özel sayfada desteklenen denetimler

Özel sayfa yazma şu anda tuval uygulama denetimlerinin bir alt kümesini destekliyor. Aşağıdaki tabloda şu anda desteklenen denetimler listelenmektedir.

Denetim	Denetim Türü	Notes
Etiket¹	Görüntüleme
Metin Kutusu¹	Girdi
Tarih Seçici¹	Girdi
Düğme¹	Girdi
Birleşik Giriş Kutusu¹	Girdi
Onay Kutusu¹	Girdi
Geçiş Düğmesi¹	Girdi
Radyo Grubu¹	Girdi
Slider¹	Girdi
Rating¹	Girdi
Dikey Kapsayıcı	Düzen	Yeni tepkisel yatay düzen kapsayıcısı
Yatay Kapsayıcı	Düzen	Yeni tepkisel yatay düzen kapsayıcısı
Zengin Metin Düzenleyicisi	Girdi
Galeri	Liste
Simge	Medya
Görsel	Medya
Düzenleme Formu	Girdi
Görüntüleme formu	Girdi
Kod bileşenleri	Özel	Özel sayfaya kod bileşenleri ekleme
Tuval bileşenleri (önizleme)	Özel	Özel sayfaya tuval bileşenleri ekleme

¹ Denetim, yeni modern bir denetimdir. Denetim, Teams'deki tuval uygulamaları için tanıtılmıştı. Denetim, Power Apps Component Framework ile birlikte sunulan Fluent UI kitaplığını temel alır.

Özel sayfa için özel bileşenler desteği

Hem az kodlu (tuval bileşenleri), hem de pro kodlu (kod bileşenleri) özel UX bileşenlerini ortamınıza ekleyebilir ve bunları tüm oluşturucular için kullanılabilir duruma getirebilirsiniz. Özel sayfaya özgü UX genişletilebilirlik makaleleri için bkz. model temelli uygulamanız için özel sayfaya tuval bileşenleri ekleme ve model temelli uygulamanız için özel sayfaya kod bileşenleri ekleme.

Genel olarak az kodlu genişletilebilirlik yaklaşımı oluşturmak ve test etmek daha kolaydır ve daha az bakım maliyeti gerektirir. Önce tuval bileşenlerinin değerlendirilmesi ve ardından kod bileşenlerini yalnızca daha karmaşık ve gelişmiş özelleştirmeler için gereksinim duyduğunuzda kullanmanız önerilir.

Daha fazla bilgi:

Kapsayıcı denetimi ile tepkisel düzeni etkinleştirme

Tepkisel özel sayfa düzenleri, Horizontal layout kapsayıcı ve Vertical layout kapsayıcı denetimlerinin hiyerarşisi oluşturularak tanımlanır. Bu denetimler, Ekle sekmesindeki Düzen altında tuval uygulama tasarımcısında bulunur.

Sayfa düzeyinde kaydırma çubuklarını engellemek ve dikey gövde kaydırma çubuğunu kullanmak için Uygulama nesnesinde minimum ekran yüksekliği ve genişliği ayarlayın.

MinScreenHeight=200
MinScreenWidth=200

İsteğe bağlı olarak, özel sayfa tasarım boyutunu ayarlamak için Ayarlar > Ekran ayarlarında Boyut'u Özel olarak ayarlayabilirsiniz. Daha sonra Genişliği ve Yüksekliği, genişlik 1080 ve yükseklik 768 gibi daha tipik bir masaüstü özel sayfa boyutuna ayarlayın. Denetimler ekrana eklendikten sonra bu ayarın değiştirilmesi bazı düzen özelliklerinin sıfırlanmasına neden olabilir.

Tüm boşluğu dolduracak şekilde en üstteki kapsayıcıyı ayarlayın ve kullanılabilir alana göre yeniden boyutlandırın.

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

Esnek yükseklik kapsayıcısının yatay kaydırması

Masaüstünden gelen sayfaları dar genişliğe doğru bir şekilde ayarlamak için bu özellikleri, esnek yükseklikte yatay bir kapsayıcıda etkinleştirin. Bu ayarlar olmadan sayfa dar olduğunda sayfa, denetimleri kırpacaktır.

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

Doğrudan bu kapsayıcının altındaki alt kapsayıcılar veya denetimler sayfanın 300 piksel genişliğinde sığmasına izin veren en küçük genişliğe sahip olarak ayarlanmalıdır. Üst kapsayıcıların yanı sıra kapsayıcı veya denetimde de doldurma yapmayı düşünün.

Esnek genişlikte bir kapsayıcının dikey kaydırması

Masaüstünden gelen sayfaları dar genişliğe doğru bir şekilde ayarlamak için bu özellikleri, esnek genişlikte dikey bir kapsayıcıda etkinleştirin. Bu ayarlar olmadan sayfa dar olduğunda sayfa, denetimleri kırpacaktır.

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

Doğrudan bu kapsayıcının altındaki alt kapsayıcılar veya denetimler sayfanın 300 piksel yüksekliğinde sığmasına izin veren en küçük genişliğe sahip olarak ayarlanmalıdır. Üst kapsayıcıların yanı sıra kapsayıcı veya denetimde de doldurma yapmayı düşünün.

Daha fazla bilgi: Tepkisel düzen oluşturma.

Sabit başlık, esnek gövde, sabit alt bilgi içeren dikey kapsayıcı

Dikey Kapsayıcı'da, Align (horizontal) seçeneğini Uzat olarak ayarlayın
Üst Dikey Kapsayıcı denetimine üç Yatay Kapsayıcı denetimi ekleyin
Birinci ve üçüncü alt yatay kapsayıcı denetimlerinde, Uzatma yüksekliği'ni kapalı olarak ayarlayın ve yüksekliği gereken şekilde (örneğin Yükseklik = 80 gibi) düşürün.

İki eşit alt kapsayıcı bulunan yatay kapsayıcı

Üst yatay kapsayıcıda Hizala (yatay) seçeneğini Uzat olarak ayarlayın.
Üst Yatay Kapsayıcı denetimine iki Dikey Kapsayıcı denetimi ekleyin.

Model temelli uygulama denetimlerine hizalamak için özel sayfa denetimlerine stil ekleme

Özel sayfayı modern uygulama tasarımcısından oluşturduğunuzda bu özellikler varsayılan değerleri kullanır.

Özel sayfa için tema. Özel sayfada kullanılan denetimler için tema değerleri otomatik olarak Birleşik Arabirim'in varsayılan mavi temayla eşleşecek şekilde ayarlanır. Bu varsayılan tema hem stüdyoda hem de uygulama çalışma zamanında kullanılır. Açık tema seçme özel sayfa yazma deneyiminden kaldırıldı.
Denetimlerin, sayfa hiyerarşisindeki konumlarına dayalı olarak, farklı yazı tipi boyutu kullanmaları gerekir.

Not

Özel sayfa metninde 1,33 ölçeklemesi vardır, bu nedenle istenen boyutu elde etmek için hedef FontSize değerini 1,33'e bölmeniz gerekir.

Etiket Türü Hedef FontSize Kullanılacak FontSize

Sayfa başlığı 17 12.75

Normal etiketler 14 10.52

Küçük etiketler 12 9.02

Etiket Türü	Hedef FontSize	Kullanılacak FontSize
Sayfa başlığı	17	12.75
Normal etiketler	14	10.52
Küçük etiketler	12	9.02

Birincil ve ikincil düğme denetimlerinde aşağıdaki stil değişiklikleri gerekir:

Birincil düğmeler

Color=RGBA(255, 255, 255, 1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

İkincil düğmeler

Color=RGBA(41,114,182,1)
Fill=RGBA(255, 255, 255, 1)
BorderColor=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

Özel sayfalar, barındıran model temelli uygulama tarafından kullanılan aynı sekme gezinti tasarımını izler. Görsel olarak hizalanmış anlamsal HTML yapısı, kullanıcıların bir klavye veya ekran okuyucu kullanırken özel sayfalarda sorunsuz olarak gezinmelerine yardımcı olur. Bağımsız tuval uygulamalarının aksine, özel sayfa denetimleri ve diğer UX öğelerinin açık sekme numaraları atamaları gerektirmez. Modern denetimlerde TabIndex özelliği yoktur ve gezinti için anlamsal HTML yapısı kullanılır.

Denetimler, tuval ve kod bileşenleri, kapsayıcılar gibi çeşitli öğeler, özel sayfa düzenindeki konumlarına göre sekmeli olarak ayarlanabilir. Sekme gezintisi, Z sırası gezintisine uyar. Bileşenler, kapsayıcılar gibi daha fazla gruplandırma öğesi içindeki bağımsız sekme durakları, belge nesne modeli (DOM) ağacındaki bir sonraki öğeye geçmeden önce gezilir.

Burada denetimler, kodlar ve tuval bileşenleri ve kapsayıcıları içeren sayfayla örnek bir gezinti bulunmaktadır.

Not

Özel sayfadaki örtüşen denetimler ve öğeler için DOM birleştirilmeyecektir bu nedenle sekme durakları görsel düzenden eşitlenmemiş olabilir. Aynısı, formülleri kullanan dinamik öğe konumlandırması için de geçerlidir.