Tuval uygulamalarında yanıt veren düzenler oluşturma

Power Apps'da tuval uygulaması oluşturmadan önce, uygulamanın telefon veya tablet için uyarlanıp uyarlanmayacağını belirtin. Bu seçim, uygulamanızı oluşturduğunuz tuvalin boyutunu ve şeklini belirler.

Bu seçeneği yaptıktan sonra, Ayarlar>Görünüm'ü seçerseniz daha az seçim yapabilirsiniz. Dikey veya yatay yönü ve ekran boyutunu (yalnızca tablet) seçebilirsiniz. Ayrıca, en boy oranını kilitleyebilir veya kilidini açabilir, cihaz döndürmeyi destekleyebilir veya desteklemeyebilirsiniz.

Bu seçimler, ekran düzeni tasarlarken yaptığınız diğer seçeneklerin her birinde belirleyici olur. Uygulamanız farklı boyuttaki bir cihazda veya web üzerinde çalışıyorsa, tüm düzeniniz uygulamanın çalıştığı ekrana uyacak şekilde ölçeklenir. Örneğin, telefon için tasarlanmış bir uygulama büyük bir tarayıcı penceresinde çalışırsa, uygulama uyum sağlamak için ölçek değiştirir ve alanı için aşırı büyük görünür. Uygulama, daha fazla denetim veya daha fazla içerik göstererek ek piksellerden yararlanamaz.

Uyumlu bir düzen oluşturursanız, denetimler farklı cihazlara veya pencere boyutlarına yanıt vererek çeşitli deneyimlerin daha doğal his vermesini sağlar. Duyarlı bir düzen elde etmek için bazı ayarları ve yazma ifadelerini uygulamanızın tamamında ayarlarsınız.

Sığdırmak için ölçeklendir'i devre dışı bırak

Her ekran denetimini, düzeninin uygulamanın çalıştığı gerçek alana uyum sağlaması için yapılandırabilirsiniz.

Uygulamanın Sığdırmak için ölçeklendir ayarını (varsayılan olarak etkindir) devre dışı bırakarak uyumluluğu etkinleştirirsiniz. Bu ayarı devre dışı bırakırsanız En boy oranını kilitle'yi de devre dışı bırakmış olursunuz çünkü artık belirli bir ekran şekli tasarlamayacaksınız. (Yine de uygulamanızın cihaz döndürmeyi destekleyip desteklemeyeceğini belirtebilirsiniz.)

Uygulamanızı uyumlu hale getirmek için ek adımlar uygulamanız gerekir ancak bu değişiklik, uyumluluğu olası kılmanın ilk adımıdır.

Uygulama ve cihaz ekranı boyutlarını anlama

Uygulamanızın düzenlerinin cihaz ekranındaki veya web tarayıcısında, boyutlardaki değişikliklere yanıt vermesini sağlamak için, ekranın Genişlik ve Yükseklik özelliklerini kullanan formüller yazacaksınız. Bu özellikleri göstermek için Power Apps Studio'da bir uygulama açın ve ardından bir ekran denetimi seçin. Bu özelliklerin varsayılan formülleri sağ bölmedeki Gelişmiş sekmesinde görünür.

Genişlik = Max(App.Width, App.MinScreenWidth)

Yükseklik = Max(App.Height, App.MinScreenHeight)

Bu formüller uygulamanın Width, Height, MinScreenWidth ve MinScreenHeight özelliklerine başvurur. Uygulamanın Width ve Height özellikleri, uygulamanızın çalıştırıldığı cihaz veya tarayıcı penceresinin boyutlarına karşılık gelir. Kullanıcı tarayıcı penceresini yeniden boyutlandırırsa (veya Yönlendirmeyi kilitle'yi devre dışı bıraktıysanız, cihazı döndürdüğünde) bu özelliklerin değerleri dinamik olarak değiştirilir. Bu değerler değiştiğinde ekran denetiminin Genişlik ve Yükseklik özelliklerindeki formüller yeniden değerlendirilir.

App.Width ve App.Height özelliklerindeki değerler, Ayarlar'ınGörüntü bölmesinde belirttiğiniz boyutlardan gelir. Örneğin, yatay "16:9 Varsayılan" boyutunu seçerseniz , App.Width 1366 ve App.Height 768 olur.

Ekran denetiminin Genişlik ve Yükseklik özelliklerine yönelik formüllerde kullanıldıkları için MinScreenWidth ve MinScreenHeight , uygulamayı tasarladığınız minimum boyutlardır. Uygulamanız için kullanılabilir gerçek alan bu minimum boyutlardan daha küçükse, ekran denetiminin Genişlik ve Yükseklik özelliklerine yönelik formüller, değerlerinin minimum değerlerden daha küçük olmamasını sağlar. Bu durumda, kullanıcının düzenin tüm içeriğini görüntülemek için sayfayı kaydırması gerekir. MinScreenWidth ve MinScreenHeight özellikleri, Uygulama Nesnesi>Özellikleri>Gelişmiş'te ayarlanabilir.

Uygulamanızın MinScreenWidth ve MinScreenHeight değerlerini oluşturduktan sonra, (çoğu durumda) her ekran denetiminin Genişlik ve Yükseklik özellikleri için varsayılan formülleri değiştirmeniz gerekmez. Bu konunun ilerideki kısımlarında bu formülleri özelleştirmek isteyebileceğiniz bazı durumlar ele alınmaktadır.

Dinamik düzen için formülleri kullanma

Uyumlu bir tasarım oluşturmak için, her denetimi, mutlak (sabit) koordinat değerleri yerine formüller kullanarak bulup yeniden boyutlandırın. Bu formüller, her denetimin konumunu ve boyutunu genel ekran boyutu açısından veya geçerli ekrandaki diğer denetimlere göre ifade eder.

Önemli

Bir denetimin X, Y, Width ve Height özellikleri için formüller yazdıktan sonra tuval düzenleyicide denetimi sürüklerseniz formülleriniz üzerine sabit değerler yazılır. Dinamik düzen elde etmek için formülleri kullanmayı başlarsanız denetimleri sürüklememelisiniz.

En basit örnekte, bir denetim tüm ekranı dolduruyor. Bu efekti oluşturmak için denetimin özelliklerini bu değerlere ayarlayın:

Özellik	Değer
X	0
Y	0
Genişlik	Parent.Width
Yükseklik	Parent.Height

Bu formüller Ebeveyn işleci kullanır. Doğrudan ekrana yerleştirilen tüm denetimler için Ebeveyn ekrana atıfta bulunur. Bu özellik değerleriyle denetim ekranın sol üst köşesinde görünür (0, 0) ve Width ve Height değerleri ekranınkiyle aynı olur.

Bu konunun ilerideki kısımlarında, bu ilkeleri (ve Üst işleci) galeriler, grup denetimleri ve bileşenler gibi diğer kapsayıcıların içinde denetimleri konumlandırmak için uygulayacaksınız.

Alternatif olarak, denetim yalnızca ekranın üst yarısını doldurabilir. Bu efekti oluşturmak için Height özelliğini Parent. Height /2 değerine ayarlayın ve diğer formülleri değiştirmeyin.

İkinci bir denetimin aynı ekranın alt yarısını doldurmasını istiyorsanız, formüllerini oluşturmak için en az iki farklı yaklaşım kullanabilirsiniz. Kolaylık olması için şu yaklaşımı kullanabilirsiniz:

Kontrol	Özellik	Formül
Üst	X	0
Üst	Y	0
Üst	Genişlik	Parent.Width
Üst	Yükseklik	Parent.Height / 2
Aşağı	X	0
Aşağı	Y	Parent.Height / 2
Aşağı	Genişlik	Parent.Width
Aşağı	Yükseklik	Parent.Height / 2

Bu yapılandırma istediğiniz efekti verir ancak denetimlerin göreli boyutlarıyla ilgili fikrinizi değiştirdiğiniz zaman her bir formülü düzenlemeniz gerekir. Örneğin, üst kısım denetiminin ekranda yalnızca yukarıdan üçte birlik bölümü ve alt kısım denetiminin aşağıdan üçte ikilik bölümü doldurmasına karar verebilirsiniz.

Bu efekti oluşturmak için Upper denetiminin Height özelliğini, Lower denetiminin de Y ve Height özelliklerini güncelleştirmeniz gerekir. Bunun yerine, aşağıdaki örnekte olduğu gibi, Lower denetiminin formüllerini Upper (ve kendisi) denetimine göre yazmayı düşünebilirsiniz:

Kontrol	Özellik	Formül
Üst	X	0
Üst	Y	0
Üst	Genişlik	Parent.Width
Üst	Yükseklik	Parent.Height / 3
Aşağı	X	0
Aşağı	Y	Upper.Y + Upper.Height
Aşağı	Genişlik	Parent.Width
Aşağı	Yükseklik	Parent.Height - Lower.Y

Bu formüllerle, ekranın yüksekliğinin farklı bir bölümünü ifade etmek için, yalnızca Upper denetiminin Height özelliğini değiştirmeniz gerekir. Lower denetimi otomatik olarak değişikliğe göre taşınır ve yeniden boyutlandırılır.

C denetimi ve üst ya da eşdüzey D denetimi arasındaki genel düzen ilişkisini ifade etmek için bu formülleri kullanabilirsiniz.

C ve üstü arasındaki ilişki	Özellik	Formül	Çizim
C denetimi, üst denetimin genişliğini dolduruyor ve N kenar boşluğu bırakılıyor	X	N
	Genişlik	Parent.Width - (N * 2)
C denetimi üst denetimin yüksekliğini dolduruyor ve N kenar boşluğu bırakılıyor	Y	N
	Yükseklik	Parent.Height - (N * 2)
C, üst denetimin sağ kenarıyla hizalanıyor ve N kenar boşluğu bırakılıyor	X	Parent.Width - (C.Width + N)
C, üst denetimin alt kenarıyla hizalanıyor ve N kenar boşluğu bırakılıyor	Y	Parent.Height - (C.Height + N)
C üst denetim üzerinde yatay olarak ortaya hizalanmış durumda	X	(Parent.Width - C.Width) / 2
C üst denetim üzerinde dikey olarak ortaya hizalanmış durumda	Y	(Parent.Height - C.Height) / 2

C ile D arasındaki ilişki	Özellik	Formül	Çizim
C, D ile yatay olarak hizalanmış durumda ve D ile aynı genişlikte	X	D.X
	Genişlik	D.Width
C, D ile dikey olarak hizalanmış durumda ve D ile aynı yükseklikte	Y	D.Y
	Yükseklik	D.Height
C'nin sağ kenarı D'nin sağ kenarıyla hizalı	X	D.X + D.Width - C.Width
C'nin alt kenarı D'nin alt kenarıyla hizalı	Y	D.Y + D.Height - C.Height
C, D'ye göre yatayda ortalanmış durumda	X	D.X + (D.Width - C.Width) / 2
C, D'ye göre dikey olarak ortalanmış durumda	Y	D.Y + (D.Height - C.Height) /2
CD'nin sağında, arada N boşluğu var	X	D.X + D.Width + N
CD'nin altında, arada N boşluğu var	Y	D.Y + D.Height + N
C, D ile üst öğenin sağ kenarı arasındaki boşluğu doldurur.	X	D.X + D.Width
	Genişlik	Parent.Width - C.X
C, D ile üst öğenin alt kenarı arasındaki boşluğu doldurur.	Y	D.Y + D.Height
	Yükseklik	Parent.Height - C.Y

Hiyerarşik düzen

Siz daha fazla denetim içeren ekranlar oluşturdukça, denetimleri ekran veya eşdüzey bir denetime göre değil üst denetime göre konumlandırmak daha uygun (ve hatta gerekli) olacaktır. Denetimlerinizi hiyerarşik bir yapıda düzenleyerek, formüllerinizin yazımını ve bakımını kolaylaştırabilirsiniz.

Galeriler

Uygulamanızda bir galeri kullanırsanız, galeri şablonu içinde denetimleri düzenlemeniz gerekir. Bu denetimleri, galeri şablonuna başvuruda bulunan ve Üst işlecini kullanan formüller yazarak konumlandırabilirsiniz. Bir galeri şablonu içindeki denetimlerdeki formüllerde galerinin genel boyutuna başvuran Parent.Width ve Parent.Height özelliklerini değil, Parent.TemplateHeight ve Parent.TemplateWidth özelliklerini kullanın.

Container kontrolü

Ana denetim olarak Düzen kapsayıcısı denetimini kullanabilirsiniz.

Ekranın üst kısmındaki başlık örneğini inceleyin. Bir başlık adı ve kullanıcılarınızın etkileşime geçebileceği çeşitli simgeler içeren bir başlığın kullanımı yaygındır. Bir Etiket denetimi ve iki Simge denetimi içeren Kapsayıcı denetimini kullanarak böyle bir başlık oluşturabilirsiniz:

Bu denetimlerin özelliklerini şu değerlere ayarlayın:

Özellik	Üstbilgi	Menü	Kapat	Başlık
X	0	0	Parent.Width - Close.Width	Menu.X + Menu.Width
Y	0	0	0	0
Genişlik	Parent.Width	Parent.Height	Parent.Height	Close.X - Title.X
Yükseklik	64	Parent.Height	Parent.Height	Parent.Height

Header denetimi için Parent ekrana başvurur. Diğerleri için, ParentBaşlık denetimini işaret eder.

Bu formülleri yazdığınız zaman, Header denetiminin boyutunu ve konumunu özelliklerinin formüllerinde değişiklik yaparak ayarlayabilirsiniz. Alt denetimlerin boyutları ve konumları otomatik olarak uygun şekilde ayarlanır.

Otomatik düzen kapsayıcı denetimleri

Alt bileşenleri otomatik olarak yerleştirebilmek için Otomatik düzen kapsayıcı denetimleri özelliğini kullanabilirsiniz. Bu kapsayıcılar, alt bileşenlerin konumunu belirler, böylece kapsayıcının içindeki bir bileşen için X, Y'yi hiçbir zaman ayarlamanız gerekmez. Ayrıca, ayarlara bağlı olarak kullanılabilir alanı alt bileşenlerine dağıtır ve hem dikey hem yatay hizalamada alt bileşenlerin hizalamasını belirler. Daha fazla bilgi: Otomatik düzen kapsayıcı denetimleri

Bileşenler

Bileşenler adlı başka bir özellik kullanırsanız, yapı taşları oluşturabilir ve bunları tüm uygulamanızda yeniden kullanabilirsiniz. Kapsayıcı denetiminde olduğu gibi, bileşene yerleştirdiğiniz denetimlerde, bileşenin boyutuna başvuran Parent.Width ve Parent.Height'teki konum ve boyut formülleri temel alınır. Daha fazla bilgi: Bileşen oluşturma.

Düzeni cihaz boyut ve yönüne uyarlama

Şu ana kadar, kullanılabilir alana yanıt olarak her bir denetimin boyutunu değiştirmek ve aynı zamanda denetimlerin birbirleriyle hizalarını korumak için formüllerin nasıl kullanılacağını öğrendiniz. Ancak, farklı cihaz boyutları ve yönlerine yanıt olarak, daha köklü yerleşim düzeni değişiklikleri yapmanız gerekebilir. Örneğin, bir cihaz dikey yönden yatay yöne döndürüldüğünde dikey düzenden yatay düzene geçiş yapmak isteyebilirsiniz. Daha büyük bir cihazda daha fazla içerik sunabilir veya daha göz alıcı bir düzen sağlamak için yeniden düzenleyebilirsiniz. Daha küçük bir cihazda içeriği birden çok ekrana bölmeniz gerekebilir.

Cihaz yönü

Daha önce açıklandığı gibi, ekranın Width ve Height özelliklerinin varsayılan formülleri, kullanıcı cihazı döndürdüğü zaman iyi bir deneyim sunmayabilir. Örneğin, dikey yönde bir telefon için tasarlanan uygulamanın DesignWidth değeri 640 ve DesignHeight değeri 1136'dır. Yatay yönlü telefonda aynı uygulamanın özellik değerleri şöyle olur:

• Ekranın Width özelliği Max(App.Width, App.DesignWidth) olarak ayarlanır. Uygulamanın Width değeri (1136), DesignWidth değerinden (640) daha büyük olduğu için formül 1136 değerini kullanır.
• Ekranın Height özelliği Max(App.Height, App.DesignHeight) olarak ayarlanır. Uygulamanın Height değeri (640), DesignHeigth değerinden (1136) daha küçük olduğu için formül 1136 değerini kullanır.

Ekran Height değeri 1136 ve cihaz yüksekliği (bu yönde) 640 iken kullanıcının tüm içeriği görmek için ekranı dikey olarak kaydırması gerekir ve bu, istediğiniz deneyim olmayabilir.

Ekranın Width ve Height özelliklerini cihaz yönüne uyarlamak için şu formülleri kullanabilirsiniz:

Genişlik = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

Yükseklik = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

Bu formüller, cihazın genişliği yüksekliğinden azsa (dikey yön) veya yüksekliğinden fazlaysa (yatay yön), uygulamadaki DesignWidth ve DesignHeight değerlerini değiştirir.

Ekranın Width ve Height formüllerini ayarladıktan sonra, kullanılabilir alanı daha iyi değerlendirmek için ekranınızdaki denetimleri yeniden düzenlemek isteyebilirsiniz. Örneğin, iki denetimin her biri ekranın yarısını kaplıyorsa, dikey yönde bunları dikey olarak yığabilir, yatay yönde yan yana yerleştirebilirsiniz.

Ekranın dikey mi yatay mı yönlendirileceğini belirlemek için Orientation özelliğini kullanabilirsiniz.

Not

Manzara modunda, Upper ve Lower denetimler sol ve sağ denetimler olarak görünür.

Kontrol	Özellik	Formül
Üst	X	0
Üst	Y	0
Üst	Genişlik	If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)
Üst	Yükseklik	If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height)
Aşağı	X	If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width)
Aşağı	Y	If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0)
Aşağı	Genişlik	Parent.Width - Lower.X
Aşağı	Yükseklik	Parent.Height - Lower.Y

Ekran boyutları ve kesme noktaları

Düzeninizi cihazın boyutuna göre ayarlayabilirsiniz. Ekranın Size özelliği, geçerli cihazın boyutunu sınıflandırır. Boyut pozitif bir tamsayıdır; ScreenSize türü, okunabilirlik konusunda yardımcı olmak için adlandırılmış sabitler sağlar. Bu tabloda sabitler verilmektedir:

Sabit	Değer	Tipik cihaz türü (varsayılan uygulama ayarları kullanılarak)
EkranBoyutu.Küçük	1	Telefon
Ekran Boyutu.Orta	2	Tablet, dikey tutulmuş
ScreenSize.Large	3	Tablet, yatay tutulmuş
ScreenSize.ExtraLarge	4	Masaüstü bilgisayar

Uygulamanızın düzeni hakkında karar vermek için bu boyutları kullanın. Örneğin bir denetimin telefon boyutundaki cihazda gizlenmesini ama diğerlerinde görünmesini istiyorsanız, denetimin Visible özelliğini bu formüle ayarlayabilirsiniz:

Parent.Size >= ScreenSize.Medium

Bu formül büyük veya orta boyutta doğru, küçük boyutta yanlış değerini kullanır.

Bir denetimin ekran boyutuna göre ekran genişliğinin farklı bir bölümünü kaplamasını istiyorsanız denetimin Width özelliğini bu formüle ayarlayın:

Parent.Width *
Switch(
    Parent.Size,
    ScreenSize.Small, 0.5,
    ScreenSize.Medium, 0.3,
    0.25
)

Bu formül, denetimin genişliğini küçük bir ekranda ekran genişliğinin yarısına, orta büyüklükteki bir ekranda ekran genişliğinin onda üçüne, ve tüm diğer ekranlarda ekran genişliğinin çeyreğine ayarlar.

Özel kesme noktaları

Ekranın Size özelliği, ekranın Width özelliğini uygulamanın SizeBreakpoints özelliğindeki değerlerle karşılaştırarak hesaplanır. Bu özellik, adlandırılmış ekran boyutlarını ayıran genişlik kesme noktalarını belirten sayıların bulunduğu tek sütunlu bir tablodur:

Tablet veya web için oluşturulan bir uygulamada, uygulamanın SizeBreakpoints özelliğindeki varsayılan değer [600, 900, 1200]'dir. Telefonlar için oluşturulan bir uygulamada değer [1200, 1800, 2400]'dür. (Telefona yönelik uygulamalar diğer uygulamalarda kullanılan koordinatların iki katını alan koordinatları kullandığı için, değerleri iki katına çıkar.)

Uygulamanın SizeBreakpoints özelliğindeki değerleri değiştirerek uygulamanızın kesme noktalarını özelleştirebilirsiniz. Ağaç görünümünde Uygulama öğesini, ardından özellik listesinde SizeBreakpoints öğesini seçin ve formül çubuğundaki değerleri düzenleyin. Uygulamanız için gerektiği kadar kesme noktası oluşturabilirsiniz ancak yalnızca 1 ile 4 arasındaki boyutlar adlandırılan ekran boyutlarına karşılık gelir. Formüllerde ExtraLarge'dan büyük boyutlara sayısal değerleriyle (5, 6 vb.) başvurabilirsiniz.

Daha az kesme noktası da belirtebilirsiniz. Örneğin, uygulamanız için yalnızca üç boyut (iki kesme noktası) gerekebilir ve bu durumda olası ekran boyutları Küçük, Orta ve Büyük olur.

Bilinen sınırlamalar

Yazma tuvali, oluşturulan boyutlandırma formüllerine yanıt vermez. Uyumlu davranış sınamak için, uygulamanızı kaydedip yayımlayın ve cihazlarda veya çeşitli boyut ve yönlerdeki tarayıcı pencerelerinde açın.

Bir denetimin X, Y, Width ve Height özelliklerinde ifadeler veya formüller yazarsanız, denetimi daha sonra farklı bir konuma sürüklediğiniz ya da kenarlığını sürükleyerek yeniden boyutlandırdığınız zaman bu ifadelerin veya formüllerin üzerine yazarsınız.