Denetim şablonları

XAML çerçevesinde bir denetim şablonu oluşturarak denetimin görsel yapısını ve görsel davranışını özelleştirebilirsiniz. Denetimlerin, denetimin görünümünün farklı yönlerini belirtmek için ayarlayabileceğiniz Arka Plan, Ön Plan ve FontFamily gibi birçok özelliği vardır. Ancak bu özellikleri ayarlayarak yapabileceğiniz değişiklikler sınırlıdır. ControlTemplate sınıfını kullanarak bir şablon oluşturarak ek özelleştirmeler belirtebilirsiniz. Burada, bir CheckBox denetiminin görünümünü özelleştirmek için ControlTemplate'ın nasıl oluşturulacağını göstereceğiz.

Önemli API'ler: ControlTemplate sınıfı, Control.Template özelliği

Özel denetim şablonu örneği

Varsayılan olarak, CheckBox denetimi içeriğini ( Onay Kutusu'nun yanındaki dize veya nesne) seçim kutusunun sağındakine yerleştirir ve onay işareti kullanıcının Onay Kutusu'nu seçtiğini gösterir. Bu özellikler CheckBox'ın görsel yapısını ve görsel davranışını temsil eder.

Varsayılan ControlTemplate kullanan bir CheckBox, Unchecked, Checkedve Indeterminate durumlarında gösterilmektedir.

varsayılan onay kutusu şablonu

CheckBox için bir ControlTemplate oluşturarak bu özellikleri değiştirebilirsiniz. Örneğin, onay kutusunun içeriğinin seçim kutusunun altında olmasını ve bir kullanıcının onay kutusunu seçtiğini belirtmek için X kullanmak istiyorsanız. Bu özellikleri CheckBoxControlTemplate belirtirsiniz.

Bir denetimle özel şablon kullanmak için, denetimin Şablonu özelliğine ControlTemplate atayın. Burada, CheckBox, adlı bir CheckBoxTemplate1 kullanıyor. Sonraki bölümde ControlTemplate için Genişletilebilir Uygulama İşaretlemeyi Dili'ni (XAML) göstereceğiz.

<CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" Margin="20"/>

Bu Onay Kutusu, şablonumuzu uyguladıktan sonra Unchecked, Checked ve Indeterminate durumlarında şu şekilde görünür.

özel onay kutusu şablonu

Denetimin görsel yapısını belirtme

Bir ControlTemplate oluşturduğunuzda, tek bir denetim oluşturmak için FrameworkElement nesnelerini birleştirirsiniz. ControlTemplate,kök öğesi olarak yalnızca bir FrameworkElement içermelidir. Kök öğesi genellikle diğer FrameworkElement nesnelerini içerir. Nesnelerin birleşimi, denetimin görsel yapısını oluşturur.

Bu XAML, denetimin içeriğinin seçim kutusunun altında olduğunu belirten bir CheckBox için bir ControlTemplate oluşturur. Kök öğe Çerçeve. Örnek, kullanıcının CheckBoxseçtiğini belirten bir X oluşturmak için Yol ve belirsiz bir durumu gösteren bir Elips belirtir. OpaklıkYol ve Elips için 0 olarak ayarlandığını ve bu nedenle varsayılan olarak hiçbirinin görünmediğini unutmayın.

TemplateBinding, denetim şablonundaki bir özelliğin değerini, şablonlu denetimdeki diğer kullanıma sunulan bazı özelliklerin değerine bağlayan özel bir bağlamadır. TemplateBinding yalnızca XAML'deki bir ControlTemplate tanımı içinde kullanılabilir. Daha fazla bilgi için bkz. TemplateBinding işaretleme uzantısı .

Uyarı

Windows 10, sürüm 1809 (SDK 17763) ile başlayarak, templatebindingkullandığınız yerlerde x:Bind işaretleme uzantılarını kullanabilirsiniz. Daha fazla bilgi için bkz. TemplateBinding işaretleme uzantısı .

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Denetimin görsel davranışını belirtme

Görsel davranış, belirli bir durumdayken denetimin görünümünü belirtir. CheckBox denetiminin 3 denetim durumu vardır: Checked, Uncheckedve Indeterminate. IsChecked özelliğinin değeri CheckBox'ın durumunu, durumu ise kutuda nelerin görüneceğini belirler.

Bu tabloda , IsChecked'in olası değerleri, karşılık gelen CheckBox durumları ve CheckBox'ın görünümü listelenmiştir.

İşaretli değeri	CheckBox durumu	CheckBox görünümü
doğru	`Checked`	Bir "X" içerir.
false	`Unchecked`	Boş.
sıfır	`Indeterminate`	Daire içerir.

Bir denetimin, belirli bir durumda olduğunda görünümünü, VisualState nesnelerini kullanarak belirlersiniz. VisualState, ControlTemplateiçindeki öğelerin görünümünü değiştiren bir Ayarlayıcı veya Görsel Taslak içerir. Denetim, VisualState.Name özelliğinin belirttiği duruma girdiğinde, Setter veya Görsel Taslak tarafından yapılan özellik değişiklikleri uygulanır. Denetim durumundan çıktığında, değişiklikler kaldırılır. VisualState nesnelerini VisualStateGroup nesnelerine eklersiniz. Kök FrameworkElement üzerinde ayarladığınız VisualStateManager.VisualStateGroups bağlı özelliğine VisualStateGroup nesnelerini eklersiniz, bu da ControlTemplateiçindedir.

Bu XAML, , ve durumları için CheckedUnchecked nesnelerini gösterir. Örnek, VisualStateManager.VisualStateGroups ekli özelliğini Borderüzerinde ayarlar, bu da ControlTemplatekök öğesidir. Checked VisualState, adlı Yolu 1 olduğunu belirtir. Indeterminate VisualState, adlı ElipsIndeterminateGlyph 1 olduğunu belirtir. Unchecked VisualStateSetter veya Storyboardolmadığından, CheckBox varsayılan görünümüne döner.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter Target="CheckGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <VisualState.Setters>
                        <Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

VisualState nesnelerinin nasıl çalıştığını daha iyi anlamak için CheckBox durumundan Unchecked durumaChecked, sonra duruma ve Indeterminate sonra da duruma geri Unchecked döndüğünde ne olacağını göz önünde bulundurun. Geçişler aşağıdadır.

Durum değişimi	Ne olur?	Geçiş tamamlandığında CheckBox görünümü
`Unchecked`'dan `Checked`'e	`Checked` değeri uygulandığından, 1 olur.	Bir X görüntülenir.
`Checked`'dan `Indeterminate`'e	`Indeterminate` değeri uygulandığından, 1 olur. `Checked` Ayarlayıcısı değeri kaldırılır, bu nedenle 0 olur.	Bir daire görüntülenir.
`Indeterminate`'dan `Unchecked`'e	Ayarlayıcı değeri `Indeterminate`VisualState içinden kaldırıldı, bu nedenle 'ün 0 oldu.	Hiçbir şey görüntülenmez.

Denetimler için görsel durumlar oluşturma ve özellikle Storyboard sınıfını ve animasyon türlerini kullanma hakkında daha fazla bilgi için bkz. görsel durumlar için görsel taslak animasyonları.

Temalarla kolayca çalışmak için araçları kullanma

Denetimlerinize tema uygulamanın hızlı bir yolu, Microsoft Visual Studio Belge Ana Hattı üzerinde bir denetime sağ tıklayıp (sağ tıkladığınız denetime bağlı olarak) Temayı Düzenle veya Stili Düzenle seçmektir. Ardından , Kaynağı Uygula'yı seçerek var olan bir temayı uygulayabilir veya Boş Oluştur'u seçerek yeni bir tema tanımlayabilirsiniz.

Denetimler ve erişilebilirlik

Denetim için yeni bir şablon oluşturduğunuzda, denetimin davranışını ve görsel görünümünü değiştirmenin yanı sıra, denetimin kendisini erişilebilirlik çerçeveleriyle nasıl temsil ettiği de değişebilir. Windows uygulaması erişilebilirlik için Microsoft UI Otomasyonu çerçevesini destekler. Tüm varsayılan denetimler ve şablonları, denetimin amacına ve işlevine uygun yaygın UI Otomasyonu denetim türleri ve desenleri için destek sunar. Bu denetim türleri ve desenleri yardımcı teknolojiler gibi UI Otomasyonu istemcileri tarafından yorumlanır ve daha büyük bir erişilebilir uygulama kullanıcı arabiriminin parçası olarak bir denetimin erişilebilir olmasını sağlar.

Temel denetim mantığını ayırmak ve UI Otomasyonu'nun bazı mimari gereksinimlerini karşılamak için denetim sınıfları, erişilebilirlik desteğini ayrı bir sınıf olan otomasyon eşinde içerir. Otomasyon eşleri, düğmelerin eylemlerini çağırmak için yardımcı teknolojileri etkinleştirme gibi işlevlerin mümkün olabilmesi için kontrol şablonlarında belirli adlandırılmış bölümlerin mevcut olmasını beklediğinden, bazen denetim şablonlarıyla etkileşime girer.

Tamamen yeni bir özel denetim oluşturduğunuzda, bazen buna eşlik edecek yeni bir otomasyon öğesi de oluşturmak isteyebilirsiniz. Daha fazla bilgi için bkz. Özel otomasyon ara birimleri.

Denetimin varsayılan şablonu hakkında daha fazla bilgi edinin

XAML denetimleri için stilleri ve şablonları belgeleyen konular, daha önce açıklanan Temayı Düzenle veya Stili Düzenle tekniklerini kullandığınızda göreceğiniz aynı başlangıç XAML'inin kesitlerini gösterir. Her konu başlığında görsel durumlarının adları, kullanılan tema kaynakları ve şablonu içeren stil için tam XAML listelenir. Bir şablonu değiştirmeye zaten başladıysanız ve özgün şablonun nasıl göründüğünü görmek istiyorsanız veya yeni şablonunuzun gerekli tüm adlandırılmış görsel durumlarına sahip olduğunu doğrulamak istiyorsanız konular yararlı olabilir.

Denetim şablonlarındaki tema kaynakları

XAML örneklerindeki özniteliklerden bazıları için {ThemeResource} işaretleme uzantısını kullanan kaynak başvurularınıfark etmiş olabilirsiniz. Bu, tek bir denetim şablonunun şu anda etkin olan temaya bağlı olarak farklı değerler olabilecek kaynakları kullanmasını sağlayan bir tekniktir. Temaların temel amacı, kullanıcıların sisteme genel olarak koyu, açık veya yüksek karşıtlık teması uygulanmasını isteyip istemediklerini seçmelerini sağlamak olduğundan, bu özellikle fırçalar ve renkler için önemlidir. XAML kaynak sistemini kullanan uygulamalar bu temaya uygun bir kaynak kümesi kullanabilir, böylece uygulamanın kullanıcı arabirimindeki tema seçenekleri kullanıcının sistem genelindeki tema seçimini yansıtır.

Örnek kodunu alma

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-06-20