Form oluşturma ve özelleştirme

Kullanıcıların önemli miktarda bilgi girmelerini gerektiren bir uygulama oluşturuyorsanız, doldurmaları için bir form oluşturmak isteyebilirsiniz. Bu makalede yararlı ve sağlam bir form oluşturmak için bilmeniz gerekenler gösterilir.

Hangi XAML denetimlerinin bir forma girmesi gerektiğini, bunları sayfanızda en iyi şekilde nasıl düzenleyebileceğimizi ve formunuzun değişen ekran boyutlarına uyum sağlaması için nasıl optimize edilebileceğini ele alacağız. Ancak form görsel öğelerin göreli konumuyla ilgili olduğundan önce sayfa düzenini XAML ile ele alalım.

Ne bilmeniz gerekiyor?

UWP,uygulamanıza ekleyebileceğiniz ve yapılandırabileceğiniz açık bir form denetimine sahip değildir. Bunun yerine, sayfada kullanıcı arabirimi öğeleri koleksiyonu düzenleyerek bir form oluşturmanız gerekir.

Bunu yapmak için düzen panellerini anlamanız gerekir. Bunlar, uygulamanızın kullanıcı arabirimi öğelerini barındıran ve bunları düzenlemenize ve gruplandırmanıza olanak sağlayan kapsayıcılardır. Düzen panellerini diğer düzen panellerine yerleştirmek, öğelerinizin birbiriyle ilişkili olarak nerede ve nasıl görüntüleneceği konusunda çok fazla denetim sahibi olmanıza olanak tanır. Bu, uygulamanızı değişen ekran boyutlarına uyarlamayı da çok daha kolay hale getirir.

Bu belgeleri düzen panellerindeokuyun. Formlar genellikle bir veya daha fazla dikey sütunda görüntülendiğinden, StackPanel'de benzer öğeleri gruplandırmak ve gerekirse bunları RelativePanel içinde düzenlemek istersiniz. Şimdi bazı panelleri bir araya getirmeye başlayın; başvuruya ihtiyacınız varsa, iki sütunlu form için temel bir düzen çerçevesi aşağıdadır:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Customer">
        <!--Save and Cancel buttons-->
    </StackPanel>
</RelativePanel>

Formda ne bulunur?

FormunuzuXAML Denetimleri çeşitlileriyle doldurmanız gerekir. Bunları muhtemelen biliyorsunuzdur, ancak hatırlatmaya ihtiyacınız varsa göz atabilirsiniz. Özellikle, kullanıcınızın metin girişine veya değer listesinden seçim yapmasına olanak sağlayan denetimler istersiniz. Bu, ekleyebileceğiniz seçeneklerin temel bir listesidir. Bu seçeneklerle ilgili her şeyi okumanız gerekmez. Bu sayede nasıl göründüğünü ve nasıl çalıştıklarını anlayabilirsiniz.

• TextBox , kullanıcının uygulamanıza metin girmesine olanak tanır.
• ToggleSwitch , kullanıcının iki seçenek arasında seçim yapmasını sağlar.
• DatePicker , kullanıcının bir tarih değeri seçmesi sağlar.
• TimePicker , kullanıcının bir zaman değeri seçmesi sağlar.
• ComboBox genişleterek seçilebilir öğelerin listesini görüntüleyin. Bunlar hakkında daha fazla bilgi edinmek buradan

Ayrıca, kullanıcının kaydedebilmesi veya iptal edebilmesi için düğmeler de eklemek isteyebilirsiniz.

Düzeninizdeki denetimleri biçimlendirme

Düzen panellerini düzenlemeyi ve eklemek istediğiniz öğelerin nasıl olmasını istediğinizi biliyorsunuz, ancak nasıl biçimlendirilmeleri gerekiyor? Formlar sayfasında belirli tasarım yönergeleri vardır. Yararlı öneriler için Form türleri ve düzen bölümlerini okuyun. Erişilebilirlik ve göreli düzeni daha kısa bir süre sonra ele alacağız.

Bu öneriyi göz önünde bulundurarak, seçtiğiniz denetimleri düzeninize eklemeye başlamanız ve bunlara etiketler verildiğinden ve düzgün aralıklı olduklarından emin olmanız gerekir. Örneğin, yukarıdaki düzeni, denetimleri ve tasarım kılavuzunu kullanarak tek sayfalı formun çıplak kemik ana hattı aşağıda verilmiştir:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" HorizontalAlignment="Left" />
            <RelativePanel>
                <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" HorizontalAlignment="Left" />
                <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0" RelativePanel.RightOf="City">
                    <!--List of valid states-->
                </ComboBox>
            </RelativePanel>
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.Below="Customer">
        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <DatePicker x:Name="TargetInstallDate" Header="Target install Date" HorizontalAlignment="Left" Margin="0,24,0,0"></DatePicker>
        <TimePicker x:Name="InstallTime" Header="Install Time" HorizontalAlignment="Left" Margin="0,24,0,0"></TimePicker>
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Associate">
        <Button Content="Save" Margin="24" />
        <Button Content="Cancel" Margin="24" />
    </StackPanel>
</RelativePanel>

Daha iyi bir görsel deneyim için denetimlerinizi daha fazla özellik ile özelleştirebilirsiniz.

Düzeninizi duyarlı hale getirin

Kullanıcılar kullanıcı arabiriminizi farklı ekran genişliklerine sahip çeşitli cihazlarda görüntüleyebilir. Ekranlarından bağımsız olarak iyi bir deneyim yaşamalarını sağlamak için duyarlı tasarım kullanmalısınız. Devam ederken göz önünde bulundurmanız gereken tasarım felsefeleri hakkında iyi tavsiyeler için bu sayfayı okuyun.

XAML ile Yanıt Veren Düzenler sayfası, bunun nasıl uygulanacağına dair ayrıntılı bir genel bakış sunar. Şimdilik XAML akışkan düzenlerine ve görsel durumlarına odaklanacağız.

Oluşturduğumuz temel form taslağı zaten akışkan bir düzendir, çünkü çoğunlukla belirli piksel boyut ve konumlarının en az kullanımına karşın kontrollerin göreli konumuna bağlıdır. Gelecekte oluşturabileceğiniz daha fazla kullanıcı arayüzü için bu kılavuzu göz önünde bulundurun.

Duyarlı düzenler için daha önemli olanlar görsel durumlar 'dır. Görsel durum, belirli bir koşul doğru olduğunda belirli bir öğeye uygulanan özellik değerlerini tanımlar. xaml'de bunu nasıl yapacağınızı okuyun ve sonra bunları formunuza uygulayın. Önceki örneğimizde çok basit bir örnek şöyle görünebilir:

<Page ...>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="640" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="Associate.(RelativePanel.RightOf)" Value="Customer"/>
                        <Setter Target="Associate.(RelativePanel.Below)" Value=""/>
                        <Setter Target="Save.(RelativePanel.Below)" Value="Customer"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <RelativePanel>
            <!-- Customer StackPanel -->
            <!-- Associate StackPanel -->
            <!-- Save StackPanel -->
        </RelativePanel>
    </Grid>
</Page>

Önemli

StateTriggers kullandığınızda, VisualStateGroups'un her zaman kökün ilk alt öğesine bağlı olduğundan emin olun. Burada Grid , kök Page öğesinin ilk alt öğesidir.

Çok çeşitli ekran boyutları için görsel durumlar oluşturmak pratik değildir ve uygulamanızın kullanıcı deneyimi üzerinde önemli bir etkiye sahip olma olasılığı birkaçtan fazla değildir. Bunun yerine birkaç anahtar kesme noktası tasarlamanızı öneririz, burada daha fazla bilgiokuyabilirsiniz.

Erişilebilirlik desteği ekleme

Artık ekran boyutlarındaki değişikliklere yanıt veren iyi bir düzeniniz olduğuna göre, kullanıcı deneyimini geliştirmek için yapabileceğiniz son şey uygulamanızı erişilebilir hale getirmektir. Bu kadar çok şey içerebilir, ancak bu biçimde görünenden daha kolaydır. Aşağıdakilere odaklanın:

• Klavye desteği : Kullanıcı arabirimi panellerinizdeki öğelerin sırasının ekranda görüntülenmeyle eşleştiğinden emin olun; böylece kullanıcı kolayca sekme tuşuyla gezinebilir.
• Ekran okuyucu desteği - tüm denetimlerinizin açıklayıcı bir ad taşıdığından emin olun.

Daha fazla görsel öğe içeren daha karmaşık düzenler oluştururken, daha fazla ayrıntı için erişilebilirlik denetim listesine başvurmak istersiniz. Sonuçta, bir uygulama için erişilebilirlik gerekli olmasa da, daha büyük bir hedef kitleye erişmesine ve etkileşim kurmasını sağlar.

Daha ileri gitmek

Burada bir form oluşturmuş olsanız da, düzen ve kontroller kavramları oluşturacağınız tüm XAML kullanıcı arayüzleri için geçerlidir. Sizi bağladığımız belgeleri tekrar gözden geçirip sahip olduğunuz formla denemeler yapmak, yeni kullanıcı arabirimi özellikleri eklemek ve kullanıcı deneyimini daha da geliştirmekten çekinmeyin. Daha ayrıntılı düzen özellikleriyle ilgili adım adım rehberlik istiyorsanız uyarlamalı düzen öğreticimize bakın

Formların izole olacak şekilde var olmalarına gerek yok - bir adım ileri giderek formunuzu bir liste/ayrıntılar deseni veya bir NavigationViewiçine yerleştirebilirsiniz. Veya formunuzun arka uç kodu üzerinde çalışmak istiyorsanız, etkinliklere genel bakışile çalışmaya başlamak isteyebilirsiniz.

Yararlı API'ler ve belgeler

Veri Bağlama ile çalışmaya başlamanıza yardımcı olacak API'lerin ve diğer yararlı belgelerin hızlı bir özeti aşağıda verilmiştir.

Yararlı API'ler

Uygulama Programlama Arayüzü (API)	Açıklama
Formlar için yararlı denetimler	Form oluşturmak için yararlı giriş denetimlerinin listesi ve bunların nerede kullanılacağına ilişkin temel yönergeler.
kılavuz	Öğeleri çok satırlı ve çok sütunlu düzenlerde düzenlemeye yönelik bir panel.
RelativePanel	Öğeleri diğer öğelere ve panelin sınırlarına göre düzenlemeye yönelik bir panel.
StackPanel	Öğeleri tek bir yatay veya dikey çizgide düzenlemek için bir panel.
VisualState	Kullanıcı arabirimi öğelerinin belirli durumlardaki görünümünü ayarlamanıza olanak tanır.

Yararlı belgeler

Konu	Açıklama
Erişilebilirliği genel bakış	Uygulamalardaki erişilebilirlik seçeneklerine geniş ölçekli bir genel bakış.
Erişilebilirlik kontrol listesi	Uygulamanızın erişilebilirlik standartlarına uygun olduğundan emin olmak için pratik bir denetim listesi.
Olaylara genel bakış	Ui eylemlerini işlemek için olayları ekleme ve yapılandırma ayrıntıları.
Formlar	Form oluşturmaya yönelik genel yönergeler.
Düzen panelleri	Düzen paneli türlerine ve bunların nerede kullanılacağına genel bir bakış sağlar.
Liste/ayrıntılar şeması	Bir veya birden çok form etrafında uygulanabilen bir tasarım deseni.
NavigationView (Gezinti Görünümü)	Bir veya birden çok form içerebilen bir denetim.
Esnek tasarım	Büyük ölçekli duyarlı tasarım ilkelerine genel bakış.
XAML ile duyarlı düzenleri	Görsel durumlar ve duyarlı tasarımın diğer uygulamaları hakkında özel bilgiler.
Hızlı yanıt veren tasarım için ekran boyutları	Yanıt veren düzenlerin hangi ekran boyutlarında uygulanması gerektiğine dair kılavuz.

Yararlı kod örnekleri

Kod örneği	Açıklama
Müşteri Siparişleri Veritabanı	Çok sayfalı bir kurumsal örnekte düzen ve formlar üzerinde çalışma şekline bakın.
XAML Denetimleri Galerisi	Bir dizi XAML denetimine ve bunların nasıl uygulandığına bakın.
Ek kod örnekleri	İlgili kod örneklerini görmek için kategori açılan listesinde Denetimleri, düzeni ve metin seçin.