Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
XAML düzen sistemi, esnek bir kullanıcı arabirimi oluşturmanıza yardımcı olmak için öğelerin, düzen panellerinin ve görsel durumların otomatik olarak boyutlandırılması sağlar. Duyarlı bir düzen sayesinde uygulamanızın farklı uygulama penceresi boyutları, çözünürlükleri, piksel yoğunlukları ve yönlendirmeleri olan ekranlarda harika görünmesini sağlayabilirsiniz. Duyarlı tasarım tekniklerinde açıklandığı gibi XAML kullanarak uygulamanızın kullanıcı arabirimini yeniden konumlandırabilir, yeniden boyutlandırabilir, yeniden akıtabilir, gösterebilir/gizleyebilir, değiştirebilir veya yeniden tasarlayabilirsiniz. Burada, XAML ile duyarlı düzenleri nasıl uygulayacağımızı ele aacağız.
Özelliklere ve panellere sahip akışkan düzenleri
Duyarlı düzenin temeli, içeriği akıcı bir şekilde yeniden konumlandırmak, yeniden boyutlandırmak ve yeniden akıtmak için XAML düzen özelliklerinin ve panellerinin uygun şekilde kullanılmasıdır.
XAML düzen sistemi hem statik hem de akıcı düzenleri destekler. Statik düzende denetimlere açık piksel boyutları ve konumları verirsiniz. Kullanıcı cihazının çözünürlüğünü veya yönlendirmesini değiştirdiğinde kullanıcı arabirimi değişmez. Statik düzenler farklı form faktörleri ve görüntü boyutları arasında kırpılabilir. Öte yandan, akışkan düzenler bir cihazda bulunan görsel alana yanıt vermek için küçülür, büyür ve yeniden düzenlenir.
Uygulamada, kullanıcı arabiriminizi oluşturmak için statik ve akıcı öğelerin bir bileşimini kullanırsınız. Bazı yerlerde statik öğeler ve değerler kullanmaya devam edebilirsiniz, ancak genel kullanıcı arabiriminin farklı çözünürlüklere, ekran boyutlarına ve görünümlere duyarlı olduğundan emin olun.
Burada, akıcı bir düzen oluşturmak için XAML özelliklerini ve düzen panellerini kullanmayı ele aacağız.
Düzen özellikleri
Düzen özellikleri bir öğenin boyutunu ve konumunu denetler. Akıcı bir düzen oluşturmak için, öğeler için otomatik veya orantılı boyutlandırmayı kullanın ve düzen panellerinin çocuklarını gerektiği gibi konumlandırmasına izin verin.
Burada bazı yaygın düzen özellikleri ve bunların akışkan düzenleri oluşturmak için nasıl kullanılacağı anlatılır.
Yükseklik ve Genişlik
Height ve Width özellikleri bir öğenin boyutunu belirtir. Etkin piksel cinsinden ölçülen sabit değerleri veya otomatik veya orantılı boyutlandırmayı kullanabilirsiniz.
Otomatik boyutlandırma, kullanıcı arabirimi öğelerini içeriğine veya üst kapsayıcısına sığacak şekilde yeniden boyutlandırır. Otomatik boyutlandırmayı bir kılavuzun satırları ve sütunlarıyla da kullanabilirsiniz. Otomatik boyutlandırmayı kullanmak için, Kullanıcı arabirimi öğelerinin Yükseklik ve/veya Genişliği'ni Otomatik olarak ayarlayın.
Uyarı
Bir öğenin boyutunun içeriğine veya kapsayıcısına göre değişip değişmemesi, üst kapsayıcının alt öğelerin boyutunu nasıl işlediğine bağlıdır. Daha fazla bilgi için bu makalede daha sonra yer alan Düzen panellerine bakın.
Yıldız boyutlandırma olarak da adlandırılan orantılı boyutlandırma, kullanılabilir alanı bir kılavuzun satır ve sütunları arasında ağırlıklı oranlara göre dağıtır. XAML'de yıldız değerleri* (veya ağırlıklı yıldız boyutlandırması için n* olarak ifade edilir). Örneğin, bir sütunun 2 sütunlu düzendeki ikinci sütundan 5 kat daha geniş olduğunu belirtmek için ColumnDefinition öğelerindeki Width özellikleri için "5*" ve "*" kullanın.
Bu örnek, 4 sütunlu bir Grid içinde sabit, otomatik ve orantılı boyutlandırmayı birleştirir.
| Köşe yazısı | Boyutlandırma | Description |
|---|---|---|
| Sütun_1 | Otomatik | Sütun, içeriğine sığacak şekilde boyutlandırılır. |
| Sütun_2 | * | Otomatik sütunlar hesaplandıktan sonra sütun kalan genişliğin bir kısmını alır. Column_2, Column_4'ün yarısı kadar genişlikte olacaktır. |
| Sütun_3 | 44 | Sütun 44 piksel genişliğinde olacaktır. |
| Sütun_4 | 2* | Otomatik sütunlar hesaplandıktan sonra sütun kalan genişliğin bir kısmını alır. Column_4, Column_2'den iki kat daha geniş olacaktır. |
Varsayılan sütun genişliği "*" olduğundan, ikinci sütun için bu değeri açıkça ayarlamanız gerekmez.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="44"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Column 1 sizes to its content." FontSize="24"/>
</Grid>
Çalışma zamanında bir öğenin boyutunu almak için Height ve Width yerine salt okunur ActualHeight ve ActualWidth özelliklerini kullanın.
Boyut kısıtlamaları
Kullanıcı arabiriminizde otomatik boyutlandırmayı kullandığınızda, yine de bir öğenin boyutuna kısıtlamalar yerleştirmeniz gerekebilir. MinWidth/ ve MinHeight/MaxHeight özelliklerini, sıvının yeniden boyutlandırılmasına izin verirken bir öğenin boyutunu kısıtlayan değerleri belirtmek için ayarlayabilirsiniz.
Kılavuzda, MinWidth/MaxWidth sütun tanımlarıyla da kullanılabilir ve MinHeight/MaxHeight satır tanımlarıyla kullanılabilir.
Hizalama
Bir öğenin üst kapsayıcısı içinde nasıl konumlandırılacağını belirtmek için HorizontalAlignment ve VerticalAlignment özelliklerini kullanın.
- HorizontalAlignment değerleri Sol, Orta, Sağ ve Esnetme'tir.
- VerticalAlignment değerleri Top, Center, Bottom ve Stretch değerleridir.
Esnetme hizalamasıyla, öğeler üst kapsayıcıda sağladıkları tüm alanı doldurur. Esnetme, her iki hizalama özelliği için de varsayılan değerdir. Ancak Düğme gibi bazı denetimler bu değeri varsayılan stillerinde geçersiz kılar. Alt öğeleri olabilecek herhangi bir öğe, HorizontalAlignment ve VerticalAlignment özelliklerinin Stretch değerini benzersiz bir şekilde ele alabilir. Örneğin, varsayılan Esnetme değerlerini kullanan bir öğe Izgara'ya yerleştirildiğinde, onu içeren hücreyi dolduracak şekilde esnetilir. Tuvale yerleştirilen aynı öğe, içeriğine göre boyutlanır. Her panelin Esnetme değerini nasıl işlediği hakkında daha fazla bilgi için Düzen panelleri makalesine bakın.
Daha fazla bilgi için Hizalama, kenar boşluğu ve doldurma makalesine ve HorizontalAlignment ve VerticalAlignment başvuru sayfalarına bakın.
Görünürlük
Görünürlük özelliğini Görünürlük sabit listesi değerlerinden birine ayarlayarak bir öğeyi açabilir veya gizleyebilirsiniz: Görünür veya Daraltılmış. Bir öğe Daraltılmış olduğunda, kullanıcı arabirimi düzeninde yer kaplamaz.
Bir öğenin Görünürlük özelliğini kodda veya görsel durumda değiştirebilirsiniz. Öğenin Görünürlüğü değiştirildiğinde, tüm alt öğeleri de değiştirilir. Bir paneli daraltırken diğerini açığa çıkararak kullanıcı arayüzünüzün bölümlerini değiştirebilirsiniz.
Tavsiye
Kullanıcı arabiriminizde varsayılan olarak Daraltılmış öğeler varsa, nesneler görünür olmasa bile başlangıçta oluşturulmaya devam eder. Bu öğelerin yüklenmesini, nesnelerin oluşturulmasını geciktirmek için x:Load özniteliği kullanılarak gösterilene kadar erteleyebilirsiniz. Bu, başlangıç performansını geliştirebilir. Daha fazla bilgi için bkz. x:Load özniteliği.
Stil kaynakları
Her özellik değerini bir denetimde ayrı ayrı ayarlamanız gerekmez. Özellik değerlerini bir Stil kaynağında gruplandırmak ve bir denetime Stil uygulamak genellikle daha verimlidir. Bu, özellikle aynı özellik değerlerini birçok denetime uygulamanız gerektiğinde geçerlidir. Stilleri kullanma hakkında daha fazla bilgi için bkz. Stil oluşturma denetimleri.
Düzen panelleri
Görsel nesneleri konumlandırmak için bunları bir panele veya başka bir kapsayıcı nesnesine yerleştirmeniz gerekir. XAML çerçevesi, kapsayıcı olarak hizmet veren ve kullanıcı arabirimi öğelerini yerleştirmenize ve yerleştirmenize olanak tanıyan Canvas, Grid, RelativePanel ve StackPanel gibi çeşitli panel sınıfları sağlar.
Düzen paneli seçerken dikkate alınması gereken temel şey, panelin alt öğelerini nasıl konumlandırıp boyutlandırtığıdır. Çakışan alt öğelerin üst üste nasıl katmanlandığına da dikkat etmeniz gerekebilir.
XAML çerçevesinde sağlanan panel denetimlerinin ana özelliklerinin karşılaştırması aşağıda verilmiştir.
| Kontrol Paneli | Description |
|---|---|
| Çadır |
Tuval akıcı kullanıcı arabirimini desteklemez; alt öğeleri konumlandırmanın ve boyutlandırmanın tüm yönlerini siz denetlersiniz. Genellikle grafik oluşturma gibi özel durumlarda veya daha büyük uyarlamalı bir kullanıcı arabiriminin küçük statik alanlarını tanımlamak için kullanırsınız. Çalışma zamanında öğeleri yeniden konumlandırmak için kod veya görsel durumları kullanabilirsiniz. |
| Kılavuz |
Kılavuz alt öğelerin akıcı yeniden boyutlandırmasını destekler. Öğeleri yeniden konumlandırmak ve yeniden akıtmak için kod veya görsel durumları kullanabilirsiniz. |
| RelativePanel | |
| StackPanel | |
| VariableSizedWrapGrid |
Ayrıntılı bilgi ve bu panellerin örneklerini görmek için Düzen panelleri bölümüne bakın.
Düzen panelleri, kullanıcı arabiriminizi mantıksal denetim grupları halinde düzenlemenize olanak sağlar. Bunları uygun özellik ayarlarıyla kullandığınızda, kullanıcı arabirimi öğelerini otomatik olarak yeniden boyutlandırma, yeniden konumlandırma ve yeniden akıtma desteği alırsınız. Ancak çoğu kullanıcı arabirimi düzeninde, pencere boyutunda önemli değişiklikler olduğunda daha fazla değişiklik yapılması gerekir. Bunun için görsel durumları kullanabilirsiniz.
Görsel durumları ve durum tetikleyicileri ile uyarlamalı düzenler
Pencere boyutuna veya diğer değişikliklere göre kullanıcı arabiriminizde önemli değişiklikler yapmak için görsel durumları kullanın.
Uygulama pencereniz belirli bir miktarın üzerinde büyür veya küçülürse, kullanıcı arabiriminizin bölümlerini yeniden konumlandırmak, yeniden boyutlandırmak, yeniden akıtmak, ortaya çıkarmak veya değiştirmek için düzen özelliklerini değiştirmek isteyebilirsiniz. Kullanıcı arabiriminiz için farklı görsel durumlar tanımlayabilir ve pencere genişliği veya pencere yüksekliği belirtilen eşiği aştığında bunları uygulayabilirsiniz.
VisualState, belirli bir durumdayken bir öğeye uygulanan özellik değerlerini tanımlar. VisualStateManager'da, belirtilen koşullar karşılandığında uygun VisualState'i uygulayan görsel durumları gruplandırırsınız. AdaptiveTrigger, XAML'de bir durumun uygulandığı eşiği ('kesme noktası' olarak da adlandırılır) ayarlamak için kolay bir yol sağlar. Alternatif olarak, görsel durumunu uygulamak için kodunuzda VisualStateManager.GoToState yöntemini çağırabilirsiniz. Her iki yönteme de örnekler sonraki bölümlerde gösterilmiştir.
Kodda görsel durumları ayarlama
Koddan görsel durum uygulamak için VisualStateManager.GoToState yöntemini çağırırsınız. Örneğin, uygulama penceresi belirli bir boyutta olduğunda bir durum uygulamak için SizeChanged olayını işleyin ve uygun durumu uygulamak için GoToState'i çağırın.
Burada, visualstategroup iki VisualState tanımı içerir. İlki, DefaultStateboş. Uygulandığında, XAML sayfasında tanımlanan değerler uygulanır. İkincisi, WideStateSplitView'unDisplayMode özelliğini Satır İçinde olarak değiştirir ve bölmeyi açar. Bu durum, pencere genişliği 640 etkin pikselden büyükse SizeChanged olay işleyicisinde uygulanır.
Uyarı
Windows, uygulamanızın üzerinde çalıştığı cihazı algılaması için bir yol sağlamaz. Etkili çözünürlüğü ve uygulama için kullanılabilir ekran alanı miktarını (uygulama penceresinin boyutu) size söyleyebilir. Ekran boyutları ve kesme noktaları için görsel durumlar tanımlamanızı öneririz.
<Page ...
SizeChanged="Page_SizeChanged">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="DefaultState">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="WideState">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="SplitView.DisplayMode"
Storyboard.TargetName="mySplitView">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SplitViewDisplayMode>Inline</SplitViewDisplayMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="SplitView.IsPaneOpen"
Storyboard.TargetName="mySplitView">
<DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<SplitView x:Name="mySplitView" DisplayMode="CompactInline"
IsPaneOpen="False" CompactPaneLength="20">
<!-- SplitView content -->
<SplitView.Pane>
<!-- Pane content -->
</SplitView.Pane>
</SplitView>
</Grid>
</Page>
private void Page_SizeChanged(object sender, Microsoft.UI.Xaml.SizeChangedEventArgs e)
{
if (e.Size.Width > 640)
VisualStateManager.GoToState(this, "WideState", false);
else
VisualStateManager.GoToState(this, "DefaultState", false);
}
// YourPage.h
void Page_SizeChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::SizeChangedEventArgs const& e);
// YourPage.cpp
void YourPage::Page_SizeChanged(IInspectable const& sender, SizeChangedEventArgs const& e)
{
if (e.NewSize.Width > 640)
VisualStateManager::GoToState(*this, "WideState", false);
else
VisualStateManager::GoToState(*this, "DefaultState", false);
}
XAML işaretlemesinde görsel durumları ayarlama
Windows 10 önce VisualState tanımları, özellik değişiklikleri için Storyboard nesnelerini gerektiriyordu ve durumu uygulamak için kodda GoToState çağrısı yapmak zorunda kaldınız. Bu, önceki örnekte gösterilmiştir. Yine de bu söz dizimini kullanan birçok örnek görürsünüz veya bu söz dizimini kullanan bir kodunuz olabilir.
Windows 10'dan itibaren, burada gösterilen basitleştirilmiş Setter söz dizimini kullanabilir ve durumu uygulamak için XAML işaretlemenizde bir StateTrigger kullanabilirsiniz. Bir uygulama olayına yanıt olarak görsel durum değişikliklerini otomatik olarak tetikleyen basit kurallar oluşturmak için durum tetikleyicilerini kullanırsınız.
Bu örnek, önceki örnekle aynı şeyi yapar, ancak özellik değişikliklerini tanımlamak için Görsel Taslak yerine basitleştirilmiş Ayarlayıcı söz dizimini kullanır. GoToState'i çağırmak yerine, durumu uygulamak için yerleşik AdaptiveTrigger durum tetikleyicisini kullanır. Durum tetikleyicilerini kullandığınızda boş DefaultStatebir tanımlamanız gerekmez. Durum tetikleyicisinin koşulları artık karşılanmadığında varsayılan ayarlar otomatik olarak yeniden uygulanır.
<Page ...>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!-- VisualState to be triggered when the
window width is >=640 effective pixels. -->
<AdaptiveTrigger MinWindowWidth="640" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="mySplitView.DisplayMode" Value="Inline"/>
<Setter Target="mySplitView.IsPaneOpen" Value="True"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<SplitView x:Name="mySplitView" DisplayMode="CompactInline"
IsPaneOpen="False" CompactPaneLength="20">
<!-- SplitView content -->
<SplitView.Pane>
<!-- Pane content -->
</SplitView.Pane>
</SplitView>
</Grid>
</Page>
Önemli
Önceki örnekte VisualStateManager.VisualStateGroups ekli özelliği Grid öğesinde ayarlanmıştır. StateTriggers kullandığınızda, tetikleyicilerin otomatik olarak etkili olması için VisualStateGroups'un her zaman kökün ilk alt öğesine bağlı olduğundan emin olun. (Burada, Grid, kök Sayfa öğesinin ilk çocuk öğesidir.)
İliştirilmiş özellik söz dizimi
VisualState'te genellikle bir denetim özelliği için veya denetimi içeren panelin ekli özelliklerinden biri için bir değer ayarlarsınız. Ekli bir özellik ayarladığınızda, ekli özellik adının çevresinde parantezler kullanın.
Bu örnekte, adlı bir TextBox üzerinde ekli özelliğinin nasıl ayarlanacağı gösterilmektedir. İlk XAML ObjectAnimationUsingKeyFrames söz dizimini, ikincisi ise Ayarlayıcı söz dizimini kullanır.
<!-- Set an attached property using ObjectAnimationUsingKeyFrames. -->
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(RelativePanel.AlignHorizontalCenterWithPanel)"
Storyboard.TargetName="myTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
</ObjectAnimationUsingKeyFrames>
<!-- Set an attached property using Setter. -->
<Setter Target="myTextBox.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True"/>
Özel durum tetikleyicileri
StateTrigger sınıfını genişleterek çok çeşitli senaryolar için özel tetikleyiciler oluşturabilirsiniz. Örneğin, giriş türüne göre farklı durumları tetikleyen bir StateTrigger oluşturabilir, ardından giriş türüne dokunduğunda denetimin etrafındaki kenar boşluklarını artırabilirsiniz. Alternatif olarak, uygulamanın çalıştırdığı cihaz ailesine göre farklı durumlar uygulamak için bir StateTrigger oluşturun. Özel tetikleyiciler oluşturma ve bunları kullanarak tek bir XAML görünümünden en iyi duruma getirilmiş ui deneyimleri oluşturma örnekleri için bkz. State tetikleyicileri örneği.
Görsel durumlar ve stiller
Birden çok denetime bir dizi özellik değişikliği uygulamak için görsel durumlarındaki Stil kaynaklarını kullanabilirsiniz. Stilleri kullanma hakkında daha fazla bilgi için bkz. Stil oluşturma denetimleri.
Durum tetikleyicileri örneğinden alınan bu basitleştirilmiş XAML'de, fare veya dokunmatik giriş için bir Düğme'nin boyutunu ve kenar boşluklarını ayarlamak amacıyla bir Stil kaynağı uygulanır. Kodun tamamı ve özel durum tetikleyicisinin tanımı için bkz. State tetikleyicileri örneği.
<Page ... >
<Page.Resources>
<!-- Styles to be used for mouse vs. touch/pen hit targets -->
<Style x:Key="MouseStyle" TargetType="Rectangle">
<Setter Property="Margin" Value="5" />
<Setter Property="Height" Value="20" />
<Setter Property="Width" Value="20" />
</Style>
<Style x:Key="TouchPenStyle" TargetType="Rectangle">
<Setter Property="Margin" Value="15" />
<Setter Property="Height" Value="40" />
<Setter Property="Width" Value="40" />
</Style>
</Page.Resources>
<RelativePanel>
<!-- ... -->
<Button Content="Color Palette Button" x:Name="MenuButton">
<Button.Flyout>
<Flyout Placement="Bottom">
<RelativePanel>
<Rectangle Name="BlueRect" Fill="Blue"/>
<Rectangle Name="GreenRect" Fill="Green" RelativePanel.RightOf="BlueRect" />
<!-- ... -->
</RelativePanel>
</Flyout>
</Button.Flyout>
</Button>
<!-- ... -->
</RelativePanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="InputTypeStates">
<!-- Second set of VisualStates for building responsive UI optimized for input type.
Take a look at InputTypeTrigger.cs class in CustomTriggers folder to see how this is implemented. -->
<VisualState>
<VisualState.StateTriggers>
<!-- This trigger indicates that this VisualState is to be applied when MenuButton is invoked using a mouse. -->
<triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Mouse" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BlueRect.Style" Value="{StaticResource MouseStyle}" />
<Setter Target="GreenRect.Style" Value="{StaticResource MouseStyle}" />
<!-- ... -->
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!-- Multiple trigger statements can be declared in the following way to imply OR usage.
For example, the following statements indicate that this VisualState is to be applied when MenuButton is invoked using Touch OR Pen.-->
<triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Touch" />
<triggers:InputTypeTrigger TargetElement="{x:Bind MenuButton}" PointerType="Pen" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BlueRect.Style" Value="{StaticResource TouchPenStyle}" />
<Setter Target="GreenRect.Style" Value="{StaticResource TouchPenStyle}" />
<!-- ... -->
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Page>
İlgili konular
GitHub'da bizimle işbirliği yapın
Bu içeriğin kaynağı GitHub'da bulunabilir; burada ayrıca sorunları ve çekme isteklerini oluşturup gözden geçirebilirsiniz. Daha fazla bilgi için katkıda bulunan kılavuzumuzu inceleyin.
Windows developer