Formlar

Form, kullanıcılardan veri toplayan ve gönderen bir denetim grubudur. Formlar genellikle ayarlar sayfaları, anketler, hesap oluşturma ve çok daha fazlası için kullanılır.

Bu makalede formlar için XAML düzenleri oluşturmaya yönelik tasarım yönergeleri açıklanır.

Ne zaman form kullanmalısınız?

Form, birbirleriyle açıkça ilişkili olan veri girişlerini toplamaya yönelik ayrılmış bir sayfadır. Bir kullanıcıdan açıkça veri toplamanız gerektiğinde bir form kullanmalısınız. Bir kullanıcı için şöyle bir form oluşturabilirsiniz:

• Bir hesapta oturum açma
• Hesap için kaydolma
• Gizlilik veya görüntüleme seçenekleri gibi uygulama ayarlarını değiştirme
• Ankete katılın
• Öğe satın alma
• Görüş bildirin

Form türleri

Kullanıcı girişinin nasıl gönderilip görüntülendiğini düşünürken iki tür form vardır:

1. Anında güncelleştirme

Kullanıcıların formdaki değerleri değiştirme sonuçlarını hemen görmesini istediğinizde anında güncelleştirilen bir form kullanın. Örneğin, ayarlar sayfalarında geçerli seçimler görüntülenir ve seçimlerde yapılan tüm değişiklikler hemen uygulanır. Uygulamanızdaki değişiklikleri onaylamak için her giriş denetimine bir olay işleyicisi eklemeniz gerekir. Kullanıcı bir giriş denetimini değiştirirse uygulamanız uygun şekilde yanıt verebilir.

2. Düğmeyle gönderme

Diğer form türü, kullanıcının tek bir düğmeye tıklayarak ne zaman veri göndereceğini seçmesine olanak tanır.

Bu form türü, kullanıcıya yanıt verme esnekliği sağlar. Genellikle, bu form türü daha fazla boş form giriş alanı içerir ve bu nedenle daha çeşitli yanıtlar alır. Kullanıcı girişinin geçerli olduğundan ve gönderildikten sonra düzgün biçimlendirilmiş verilerden emin olmak için aşağıdaki önerileri göz önünde bulundurun:

• Doğru denetimi kullanarak geçersiz bilgi göndermeyi olanaksız hale getirin (örneğin, takvim tarihleri için TextBox yerine CalendarDatePicker kullanın). Daha sonra Giriş Denetimleri bölümünde formunuzda uygun giriş denetimlerini seçme hakkında daha fazla bilgi edinin.
• TextBox denetimlerini kullanırken, kullanıcılara PlaceholderText özelliğiyle istenen giriş biçiminin ipucunu sağlayın.
• InputScope özelliğiyle bir denetimin beklenen girişini belirterek kullanıcılara uygun ekran klavyesini sağlayın.
• Gerekli girişi etikette yıldız * işaretiyle işaretleyin.
• Gerekli tüm bilgiler doldurulana kadar gönder düğmesini devre dışı bırakın.
• Gönderildikten sonra geçersiz veriler varsa, denetimleri vurgulanmış alan veya kenarlıklarla geçersiz girişle işaretleyin ve kullanıcının formu yeniden göndermesini isteyin.
• Başarısız ağ bağlantısı gibi diğer hatalar için kullanıcıya uygun bir hata iletisi görüntülendiğinden emin olun.

Tasarım Düzeni

Kullanıcı deneyimini kolaylaştırmak ve kullanıcıların doğru girişi girebildiğinden emin olmak için form düzenleri tasarlamaya yönelik aşağıdaki önerileri göz önünde bulundurun.

Etiketler

Etiketler sola hizalı ve giriş denetiminin üzerine yerleştirilmelidir. Birçok denetimin etiketi görüntülemek için yerleşik bir Header özelliği vardır. Header özelliği olmayan denetimler veya denetim gruplarını etiketlemek için bunun yerine TextBlock kullanabilirsiniz.

Erişilebilirlik tasarımı yapmak için, hem insan hem de ekran okuyucular için tüm bireysel ve denetim gruplarını netlik için etiketle.

Yazı tipi stilleri için varsayılan Windows türü rampasını kullanın. Sayfa başlıkları, TitleTextBlockStyle grup başlıkları ve SubtitleTextBlockStyle denetim etiketleri için kullanınBodyTextBlockStyle.

Yapmak	Yapma

Spacing

Denetim gruplarını birbirinden görsel olarak ayırmak için hizalamayı, kenar boşluklarını ve doldurmayı kullanın. Tek tek giriş denetimleri 80 piksel yüksekliğindedir ve birbirinden 24 piksel aralıklı olmalıdır. Giriş denetimlerinin grupları birbirinden 48 piksel aralıklı olmalıdır.

Kolonlar

Sütun oluşturmak, özellikle daha büyük ekran boyutlarıyla formlardaki gereksiz beyaz alanı azaltabilir. Ancak, çok sütunlu bir form oluşturmak isterseniz, sütun sayısı sayfadaki giriş denetimlerinin sayısına ve uygulama penceresinin ekran boyutuna bağlı olmalıdır. Ekranı çok sayıda giriş denetimiyle bunaltmak yerine formunuz için birden çok sayfa oluşturmayı göz önünde bulundurun.

Yapmak	Yapma

Duyarlı düzen

Ekran veya pencere boyutu değiştikçe formlar yeniden boyutlandırılmalıdır, böylece kullanıcılar giriş alanlarını gözden kaçırmaz. Daha fazla bilgi için bkz . Duyarlı tasarım teknikleri. Örneğin, ekran boyutu ne olursa olsun formun belirli bölgelerini her zaman görünümde tutmak isteyebilirsiniz.

Sekme durakları

Kullanıcılar sekme duraklarıyla denetimlerde gezinmek için klavyeyi kullanabilir. Varsayılan olarak, denetimlerin sekme sırası XAML'de oluşturulma sırasını yansıtır. Varsayılan davranışı geçersiz kılmak için denetimin IsTabStop veya TabIndex özelliklerini değiştirin.

Giriş denetimleri

Giriş denetimleri, kullanıcıların formlara bilgi girmesini sağlayan kullanıcı arabirimi öğeleridir. Formlara eklenebilen bazı yaygın denetimlerin yanı sıra bunların ne zaman kullanılacağı hakkında bilgiler aşağıda listelenmiştir.

Metin girişi

Yönetim	Kullan	Example
Metin Kutusu	Bir veya birden çok metin satırını yakalayın	Adlar, ücretsiz form yanıtları veya geri bildirim
Şifre Kutusu	Karakterleri gizleyerek özel veri toplama	Parolalar, Sosyal Güvenlik Numaraları (SSN), PIN'ler, kredi kartı bilgileri
Otomatik Öneri Kutusu	Kullanıcılara, yazarken ilgili bir veri kümesinden gelen önerilerin listesini gösterme	Veritabanında arama, posta gönderilecek adres, önceki sorgular
ZenginDüzenlemeKutusu	Biçimlendirilmiş metin, köprü ve resimlerle metin dosyalarını düzenleme	Dosya yükleme, uygulamada önizleme ve düzenleme

Seleksiyon

Yönetim	Kullan	Example
Onay Kutusu	Bir veya daha fazla eylem öğesi seçme veya seçimini kaldırma	Hüküm ve koşulları kabul edin, isteğe bağlı öğeler ekleyin, uygun olan her şeyi seçin
RadioButton	İki veya daha fazla seçenek arasından bir seçenek belirleyin	Seçim türü, sevkiyat yöntemi vb.
ToggleSwitch	Birbirini dışlayan iki seçenek arasında seçim yapma	Açık/kapalı

Not: Beş veya daha fazla seçim öğesi varsa, bir liste denetimi kullanın.

Lists

Yönetim	Kullan	Example
ComboBox	Sıkıştırılmış durumda başlayın ve seçilebilir öğelerin listesini gösterecek şekilde genişletin	Eyaletler veya ülkeler/bölgeler gibi uzun bir öğe listesinden seçim yapın
ListView	Öğeleri kategorilere ayırma ve grup üst bilgileri atama, öğeleri sürükleyip bırakma, içeriği seçme ve öğeleri yeniden sıralama	Sıralama seçenekleri
GridView	Görüntü tabanlı koleksiyonları düzenleme ve göz atma	Fotoğraf, renk, görüntü teması seçin

Sayısal giriş

Yönetim	Kullan	Example
Kaydırıcı	Bitişik sayısal değerler aralığından bir sayı seçin	Yüzdeler, ses düzeyi, oynatma hızı
Derecelendirme	Yıldızlarla puanla	Müşteri geri bildirimi

Tarih ve Saat

Yönetim	Kullan
CalendarView	Her zaman görünür bir takvimden tek bir tarih veya tarih aralığı seçme
CalendarDatePicker	Bağlamsal takvimden tek bir tarih seçme
DatePicker	Bağlamsal bilgilerin önemli olmadığı tek bir yerelleştirilmiş tarih seçin
TimePicker	Tek bir saat değeri seçin

Ek Denetimler

UWP denetimlerinin tam listesi için bkz. denetimler işleve göre dizin.

Daha karmaşık ve özel kullanıcı arabirimi denetimleri için Telerik, SyncFusion, DevExpress, Infragistics, ComponentOne ve ActiPro gibi şirketlerden sağlanan kaynaklara bakın.

Bir sütun formu örneği

Bu örnekte Akrilik liste/ayrıntı listesigörünümü ve NavigationView denetimi kullanılıyor.

<StackPanel>
    <TextBlock Text="New Customer" Style="{StaticResource TitleTextBlockStyle}"/>
    <Button Height="100" Width="100" Background="LightGray" Content="Add photo" Margin="0,24" Click="AddPhotoButton_Click"/>
    <TextBox x:Name="Name" Header= "Name" Margin="0,24,0,0" MaxLength="32" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
    <TextBox x:Name="PhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="15" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
    <TextBox x:Name="Email" Header="Email" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <RelativePanel>
        <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
        <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
             <x:String>WA</x:String>
        </ComboBox>
    </RelativePanel>
    <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
    <StackPanel Orientation="Horizontal">
        <Button Content="Save" Margin="0,24" Click="SaveButton_Click"/>
        <Button Content="Cancel" Margin="24" Click="CancelButton_Click"/>
    </StackPanel>  
</StackPanel>

İki sütun formu örneği

Bu örnekte giriş denetimlerine ek olarak Pivot denetimi, Akrilik arka plan ve CommandBar kullanılır.

<Grid>
    <Pivot Background="{ThemeResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}" >
        <Pivot.TitleTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="Company Name" Style="{ThemeResource HeaderTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </Pivot.TitleTemplate>
        <PivotItem Header="Orders" Margin="0"/>    
        <PivotItem Header="Customers" Margin="0">
            <!--Form Example-->
            <Grid Background="White">
                <RelativePanel>
                    <StackPanel x:Name="Customer" Margin="20">
                        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="CustomerPhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <RelativePanel>
                            <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="Text" />
                            <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
                                <x:String>WA</x:String>
                            </ComboBox>
                        </RelativePanel>
                        <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
                    </StackPanel>
                    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
                        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="AssociatePhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <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>
                </RelativePanel>
            </Grid>
        </PivotItem>
        <PivotItem Header="Invoices"/>
        <PivotItem Header="Stock"/>
        <Pivot.RightHeader>
            <CommandBar OverflowButtonVisibility="Collapsed" Background="Transparent">
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit" />
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
            </CommandBar>
        </Pivot.RightHeader>
    </Pivot>
</Grid>

Müşteri Siparişleri Veritabanı Örneği

Form girişini bir Azure veritabanına bağlamayı ve tam olarak uygulanan bir formu görmek için Bkz. Müşteri Siparişleri Veritabanı uygulama örneği.

İlgili konular

• Giriş denetimleri
• Tipografi