Denetim için şablon oluşturma (WPF.NET)

Windows Presentation Foundation (WPF) ile mevcut bir denetimin görsel yapısını ve davranışını kendi yeniden kullanılabilir şablonunuzla özelleştirebilirsiniz. Şablonlar uygulamanıza, pencerelerinize ve sayfalarınıza genel olarak veya doğrudan denetimlere uygulanabilir. Yeni denetim oluşturmanızı gerektiren senaryoların çoğu, bunun yerine mevcut bir denetim için yeni bir şablon oluşturularak ele alınabilir.

Bu makalede, Button denetimi için yeni bir ControlTemplate oluşturmayı inceleyeceksiniz.

ControlTemplate ne zaman oluşturulur?

Denetimlerin Background, Foregroundve FontFamilygibi birçok özelliği vardır. Bu özellikler denetimin görünümünün farklı yönlerini denetler, ancak bu özellikleri ayarlayarak yapabileceğiniz değişiklikler sınırlıdır. Örneğin, Foregroundüzerinde FontStyle özelliğini mavi ve CheckBox'i italik olarak ayarlayabilirsiniz. Denetimin görünümünü, denetimdeki diğer özellikleri ayarlamanın yapabileceklerinin ötesinde özelleştirmek istediğinizde, bir ControlTemplateoluşturursunuz.

Çoğu kullanıcı arabiriminde, bir düğme aynı genel görünüme sahiptir: metin içeren bir dikdörtgen. Yuvarlatılmış düğme oluşturmak istiyorsanız, düğmeden devralan veya düğmenin işlevselliğini yeniden oluşturan yeni bir denetim oluşturabilirsiniz. Buna ek olarak, yeni kullanıcı denetimi döngüsel görsel sağlar.

Mevcut bir denetimin görsel düzenini özelleştirerek yeni denetimler oluşturmaktan kaçınabilirsiniz. Yuvarlatılmış düğme için, istediğiniz görsel düzeniyle bir ControlTemplate oluşturursunuz.

Öte yandan, yeni işlevlere, farklı özelliklere ve yeni ayarlara sahip bir denetime ihtiyacınız varsa, yeni UserControlbir oluşturursunuz.

Önkoşullar

Yeni bir WPF uygulaması oluşturun. MainWindow.xaml dosyasında (veya seçtiğiniz başka bir pencerede), Window< öğesinde> aşağıdaki özellikleri ayarlayın:

Mülkiyet Değer
Title Template Intro Sample
SizeToContent WidthAndHeight
MinWidth 250

<Window> öğesinin içeriğini aşağıdaki XAML olarak ayarlayın:

<StackPanel Margin="10">
    <Label>Unstyled Button</Label>
    <Button>Button 1</Button>
    <Label>Rounded Button</Label>
    <Button>Button 2</Button>
</StackPanel>

Sonunda MainWindow.xaml dosyası aşağıdaki XAML'ye benzer görünmelidir:

<Window x:Class="IntroToStylingAndTemplating.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
        mc:Ignorable="d"
        Title="Template Intro Sample" SizeToContent="WidthAndHeight" MinWidth="250">
    <StackPanel Margin="10">
        <Label>Unstyled Button</Label>
        <Button>Button 1</Button>
        <Label>Rounded Button</Label>
        <Button>Button 2</Button>
    </StackPanel>
</Window>

Uygulamayı çalıştırırsanız aşağıdaki görüntü gibi görünür:

İki stilsiz düğme içeren WPF penceresi

ControlTemplate oluşturma

ControlTemplate bildirmenin en yaygın yolu, XAML dosyasının Resources bölümünde bir kaynak olarak tanımlamaktır. Şablonlar kaynak olduğundan, tüm kaynaklarda olduğu gibi aynı kapsam kurallarını izlerler. Bir şablonu bildirdiğiniz yer, şablonu nereye uygulayabileceğinizi etkiler. Örneğin, şablonu uygulama tanımı XAML dosyanızın kök öğesinde bildirirseniz, şablonu uygulamanızın herhangi bir yerinde kullanabilirsiniz. Şablonu bir pencerede tanımlarsanız, şablonu yalnızca bu penceredeki denetimler kullanabilir.

Başlamak için Window.Resources dosyanıza bir öğe ekleyin:

<Window x:Class="IntroToStylingAndTemplating.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
        mc:Ignorable="d"
        Title="Template Intro Sample" SizeToContent="WidthAndHeight" MinWidth="250">
    <Window.Resources>
        
    </Window.Resources>
    <StackPanel Margin="10">
        <Label>Unstyled Button</Label>
        <Button>Button 1</Button>
        <Label>Rounded Button</Label>
        <Button>Button 2</Button>
    </StackPanel>
</Window>

Yeni <bir ControlTemplate> oluşturun ve aşağıdaki özellikleri ayarlayın:

Mülkiyet Değer
x:Key roundbutton
TargetType Button

Bu denetim şablonu basittir:

  • Denetim için kök bir öğe, Grid
  • Düğmenin yuvarlak görünümünü çizmek için Ellipse kullanın.
  • Kullanıcının belirttiği düğme içeriğini görüntülemek için bir ContentPresenter oluşturun.
<ControlTemplate x:Key="roundbutton" TargetType="Button">
    <Grid>
        <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</ControlTemplate>

ŞablonBağlama

Yeni ControlTemplatebir oluşturduğunuzda, denetimin görünümünü değiştirmek için ortak özellikleri kullanmaya devam etmek isteyebilirsiniz. TemplateBinding işaretleme uzantısı, içindeki bir öğenin ControlTemplate özelliğini denetimin tanımladığı ortak bir özelliğe bağlar. TemplateBindingkullandığınızda, denetimdeki özelliklerin şablona parametre olarak davranmasını sağlarsınız. Bir denetimde bir özellik ayarladığınızda, değer TemplateBinding öğesini içeren öğeye geçer.

Elips

< > ve Vuruş özellikleri denetimin Foreground ve Background özelliklerine bağlanır.

İçerik Sunucu

Şablon bir ContentPresenter< öğesi de içerir>. Bu şablon bir düğme için tasarlandığından, düğmenin öğesinden ContentControldevralındığını unutmayın. düğme öğenin içeriğini görüntüler. Düğmenin içinde düz metin ve hatta başka bir denetim gibi her şeyi ayarlayabilirsiniz. Aşağıdaki örneklerin her ikisi de geçerli düğmelerdir:

<Button>My Text</Button>

<!-- and -->

<Button>
    <CheckBox>Checkbox in a button</CheckBox>
</Button>

Önceki örneklerin her ikisinde de metin ve onay kutusu Button.Content özelliği olarak ayarlanmıştır. İçerik olarak ayarlanan her şey, şablonun yaptığı gibi <ContentPresenter>aracılığıyla sunulabilir.

Bir ControlTemplate türüne, örneğin bir Button, ContentControl uygularsanız, şablon öğe ağacında bir ContentPresenter arar. şablonu bulursa ContentPresenter, şablon denetimin Content özelliğini ContentPresenteröğesine otomatik olarak bağlar.

Şablonu kullanma

Bu makalenin başında bildirdiğiniz düğmeleri bulun.

<StackPanel Margin="10">
    <Label>Unstyled Button</Label>
    <Button>Button 1</Button>
    <Label>Rounded Button</Label>
    <Button>Button 2</Button>
</StackPanel>

İkinci düğmenin Template özelliğini roundbutton kaynağına ayarlayın:

<StackPanel Margin="10">
    <Label>Unstyled Button</Label>
    <Button>Button 1</Button>
    <Label>Rounded Button</Label>
    <Button Template="{StaticResource roundbutton}">Button 2</Button>
</StackPanel>

Projeyi çalıştırır ve sonucuna bakarsanız düğmenin yuvarlatılmış bir arka planı olduğunu görürsünüz.

Tek şablon oval düğmesi olan WPF penceresi

Düğmenin daire olmadığını ancak çarpık olduğunu fark edebilirsiniz. <Elips> öğesinin çalışma şekli nedeniyle, her zaman kullanılabilir alanı dolduracak şekilde genişler. Düğmenin width ve height özelliklerini aynı değerle değiştirerek dairenin tekdüzen olmasını sağlayın:

<StackPanel Margin="10">
    <Label>Unstyled Button</Label>
    <Button>Button 1</Button>
    <Label>Rounded Button</Label>
    <Button Template="{StaticResource roundbutton}" Width="65" Height="65">Button 2</Button>
</StackPanel>

Bir şablon döngüsel düğmesi olan WPF penceresi

Tetikleyici ekleme

Şablon uygulanmış bir düğme farklı görünse de, diğer tüm düğmelerle aynı şekilde davranır. Düğmeye basarsanız, Click olayı tetiklenir. Ancak farenizi düğmenin üzerine taşıdığınızda düğmenin görsellerinin değişmediğini fark edebilirsiniz. Şablon bu görsel etkileşimleri tanımlar.

WPF'nin sağladığı dinamik olay ve özellik sistemlerini kullanarak, bir değer için belirli bir özelliği izleyebilir ve uygun olduğunda şablonu restyle yapabilirsiniz. Bu örnekte düğmenin IsMouseOver özelliğini izlersiniz. Fare denetimin üzerindeyken, <Elips> yeni bir renkle şekillendirin. Bu tetikleyici türü, PropertyTriggerolarak bilinir.

Bu özelliğin çalışması için referans verebileceğiniz <Elips>e bir ad eklemeniz gerekir. backgroundElementadını verin.

<Ellipse x:Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />

Ardından, Trigger koleksiyonuna yeni bir ekleyin. Tetikleyici IsMouseOver olayı için true değerini izler.

<ControlTemplate x:Key="roundbutton" TargetType="Button">
    <Grid>
        <Ellipse x:Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="true">

        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Ardından, Tetikleyiciye Elips'in Dolgu özelliğini yeni bir renge değiştirecek bir Setter ekleyin.

<Trigger Property="IsMouseOver" Value="true">
    <Setter Property="Fill" TargetName="backgroundElement" Value="AliceBlue"/>
</Trigger>

Projeyi çalıştırın. Fareyi düğmenin üzerinde hareket ettirdiğinizde, Elips'in<> rengi değişir.

fare, dolgu rengini değiştirmek için WPF düğmesinin üzerinde hareket eder

Bir VisualState kullanın.

Görsel durumlar bir denetim tarafından tanımlanır ve tetiklenir. Örneğin, fareyi denetim öğesinin üzerine getirdiğinizde, denetim CommonStates.MouseOver durumunu tetikler. Denetimin geçerli durumuna göre özellik değişikliklerine animasyon ekleyebilirsiniz. Önceki bölümde, IsMouseOver özelliği true olduğunda düğmenin arka planını AliceBlue olarak değiştirmek için bir <PropertyTrigger> kullandınız. Bunun yerine, bu rengin değişikliğine animasyon uygulayan ve sorunsuz bir geçiş sağlayan bir görsel durum oluşturun. VisualStateshakkında daha fazla bilgi için, WPF'deki Stiller ve Şablonlara bakınız:.

PropertyTrigger'ı<> animasyonlu görsel durumuna dönüştürmek için ControlTemplate.Triggers< öğesini şablonunuzdan kaldırın>.

<ControlTemplate x:Key="roundbutton" TargetType="Button">
    <Grid>
        <Ellipse x:Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</ControlTemplate>

Ardından, denetim şablonunun Grid kökünde için VisualStateGroup ile bir VisualStateManager.VisualStateGroups öğesini ekleyin. Normal ve MouseOveriki durum tanımlayın.

<ControlTemplate x:Key="roundbutton" TargetType="Button">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                </VisualState>
                <VisualState Name="MouseOver">
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Ellipse x:Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</ControlTemplate>

Bu durum tetiklendiğinde VisualState'te<> tanımladığınız animasyonları uygulayın. Her durum için animasyonlar oluşturun. Görsel Taslak< öğesinin> içine animasyonlar yerleştirin. Görsel taslaklar hakkında daha fazla bilgi için bkz. Görsel Taslaklara Genel Bakış.

  • Sıradan

    Bu durum, elips dolgusunu canlandırır ve kontrolün Background rengine geri döndürür.

    <Storyboard>
    <ColorAnimation Storyboard.TargetName="backgroundElement" 
        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
        To="{TemplateBinding Background}"
        Duration="0:0:0.3"/>
</Storyboard>

  • Fareyle Üzerine Gelmek

    Bu durum, elips Background rengini yeni bir renge animasyonla değiştirir: Yellow.

    <Storyboard>
    <ColorAnimation Storyboard.TargetName="backgroundElement" 
        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
        To="Yellow" 
        Duration="0:0:0.3"/>
</Storyboard>

<ControlTemplate> artık aşağıdaki kod gibi görünmelidir.

<ControlTemplate x:Key="roundbutton" TargetType="Button">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="backgroundElement" 
                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                            To="{TemplateBinding Background}"
                            Duration="0:0:0.3"/>
                    </Storyboard>
                </VisualState>
                <VisualState Name="MouseOver">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="backgroundElement" 
                            Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
                            To="Yellow" 
                            Duration="0:0:0.3"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Ellipse Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</ControlTemplate>

Projeyi çalıştırın. Mouse'u düğmenin üzerine getirdiğinizde, <Elips>'in rengi animasyon yapar.

fare, görsel bir durumla dolgu rengini değiştirmek için WPF düğmesinin üzerinde hareket eder

Sonraki Adımlar

  • Last updated on