Stillendirme ve Şablon Oluşturma

Windows Presentation Foundation (WPF)stil ve templating suite özelliklerinin, geliştiricilerin ve tasarımcıların görsel olarak etkileyici efektler oluşturmak ve bunların ürün için tutarlı bir görünüm oluşturmak için izin (stilleri, şablonlar, Tetikleyiciler ve animasyonlarıyla) bakın. Tasarımcılar ve geliştiriciler bir uygulamalar tarafından temelinde kapsamlı bir görünümünü özelleştirebilirsiniz, ancak güçlü bir stil ve templating modeli Bakım ve görünümü içinde ve uygulamalar arasında paylaşılmasına izin gereklidir. Windows Presentation Foundation (WPF)Bu modeli sağlar.

Başka bir özelliği de WPF stil ekleme modeli olan ayrılması, sunu ve mantık. Tasarımcılar yalnızca kullanarak uygulama görünümü üzerinde çalışabilirsiniz yani XAML aynı anda çalışan geliştiriciler üzerinde programlama mantığı kullanılarak C# ya da Visual Basic.

Bu genel stil templating yönlerini ve uygulama üzerinde odaklanır ve herhangi bir veri bağlama kavramları anlatılmamaktadır. Veri bağlama hakkında daha fazla bilgi için bkz: Veri Bağlama Genel Bakış.

Buna ek olarak, ne stilleri ve yeniden kullanılabilir Şablonları etkinleştirmek olan kaynakları bilmek önemlidir. Kaynaklar hakkında daha fazla bilgi için bkz: Kaynaklara Genel Bakış.

Bu konu aşağıdaki bölümleri içerir.

• Stil ve Templating örnek
• Stil temelleri
• Data Templates
• Control Templates
• Triggers
• Paylaşılan kaynaklar ve Temalar
• İlgili Konular

Stil ve Templating örnek

Bu genel görünümde kullanılan kod örnekleri aşağıda gösterildiği basit fotoğraf örnek dayanır:

Bu basit fotoğraf örnek, görsel olarak etkileyici bir kullanıcı deneyimi oluşturmak için stil ve templating kullanır. İki örnek var TextBlock öğeleri ve bir ListBox Denetim, bağlı olduğu bir listesini görüntüler. Tam örnek için bkz: stil ve Templating örnek giriş.

Stil temelleri

Düşünebilirsiniz bir Style bir dizi birden çok öğe için özellik değerlerini uygulamak için kullanışlı bir yol olarak Örneğin, aşağıdakileri dikkate alın TextBlock öğeleri ve bunların varsayılan görünümü:

<TextBlock>My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>

Gibi özelliklerini ayarlayarak, varsayılan görünümünü değiştirebilirsiniz FontSize ve FontFamily, her TextBlock doğrudan öğe. Ancak, isterseniz sizin TextBlock bazı özellikleri paylaşan öğeleri oluşturabileceğiniz bir Style , Resources bölümünde sizin XAML , aşağıda gösterildiği gibi dosya:

<Window.Resources>


...


<!--A Style that affects all TextBlocks-->
<Style TargetType="TextBlock">
  <Setter Property="HorizontalAlignment" Value="Center" />
  <Setter Property="FontFamily" Value="Comic Sans MS"/>
  <Setter Property="FontSize" Value="14"/>
</Style>


...


</Window.Resources>

Ayarladığınızda TargetType stilinize, TextBlock türü, stilin uygulanacağı tüm TextBlock öğeler penceresi.

Şimdi TextBlock öğeleri aşağıdaki gibi görünür:

Stillerini genişletme

Belki de, sizin iki istediğiniz TextBlock gibi bazı özellik değerlerini paylaşmak için öğeleri FontFamily ve ortalanmış HorizontalAlignment, ama aynı zamanda "Resimlerim" metin Bazı ek özellikler için. Aşağıda gösterildiği gibi ilk stili temel alan yeni bir stil oluşturarak bunu:

<Window.Resources>


...


<!--A Style that extends the previous TextBlock Style-->
<!--This is a "named style" with an x:Key of TitleText-->
<Style BasedOn="{StaticResource {x:Type TextBlock}}"
       TargetType="TextBlock"
       x:Key="TitleText">
  <Setter Property="FontSize" Value="26"/>
  <Setter Property="Foreground">
  <Setter.Value>
      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.0" Color="#90DDDD" />
          <GradientStop Offset="1.0" Color="#5BFFFF" />
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
</Style>


...


</Window.Resources>

Önceki stil verilen bildirimin bir x:Key. Stil uygulamak için Style özelliği sizin TextBlock için x:Key , aşağıda gösterildiği gibi değer:

<TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>

Bu TextBlock Şimdi stilde bir HorizontalAlignment değeri Center, bir FontFamily değeri Comic Sans MS, bir FontSize 26, değeri ve bir Foreground değerini ayarlamak LinearGradientBrush gösterilen örnek. Onu geçersiz kılar dikkat edin FontSize değeri temel stili. Yoksa birden fazla Setter aynı özelliği ayarlarken bir Style, Setter , bildirildiği son işlemlerin önceliği.

Aşağıdaki ne gösterir TextBlock öğeleri şimdi bakmak gibi:

Bu TitleText stili uzatır için oluşturulan stil TextBlock türü. Da olan bir stili genişletebilirsiniz bir x:Key kullanarak x:Key değer. Örneğin, sağlanan örnek bakın BasedOn özelliği.

TargetType özelliği ve x: anahtar özniteliği ilişki

İlk örnekte gösterildiği gibi ayar TargetType özelliğine TextBlock Stil atama olmadan bir x:Key uygulanacak tüm stil neden olan TextBlock öğeleri. Bu durumda, x:Key örtülü olarak ayarlanmışsa {x:Type TextBlock}. Açıkça ayarlanmış yani x:Key dışında bir değere {x:Type TextBlock}, Style tüm uygulanmaz TextBlock öğeleri otomatik olarak. Bunun yerine, stili uygulamak gerekir (kullanarak x:Key değeri) için TextBlock öğeleri açıkça. Kaynaklar bölümünde stiliniz olduğunu ve ayarlı TargetType özellikte stiliniz, sonra vermesi gereken bir x:Key.

Varsayılan değerini sağlama ek olarak x:Key, TargetType özellik ayarlayıcı özelliklerinin uygulandığı türünü belirtir. Belirtmezseniz, bir TargetType, özelliklerinde nitelemeniz gerekir sizin Setter bir sınıf adı sözdizimini kullanarak nesneleri Property="ClassName.Property". Örneğin, yerine Property="FontSize", ayarlamanız gerekir Property için "TextBlock.FontSize" veya "Control.FontSize".

Ayrıca bu kadar fazla sayıda WPF denetimleri oluşan diğer bir bileşimi WPF kontrol eder. Bir türdeki tüm denetimlere uygulanır bir stil oluşturursanız, beklenmeyen sonuçlar alabilirsiniz. Hedefleyen bir stil oluşturabilir, örneğin, TextBlock yazın bir Window, tüm stil uygulanmış TextBlock penceresinde, denetimleri bile TextBlock gibi başka bir denetimin bir parçası olan bir ListBox.

Stiller ve kaynaklar

Türetildiği herhangi bir öğe üzerinde bir stil kullanmak FrameworkElement veya FrameworkContentElement. Bir kaynak olarak bir stil bildirmek için en yaygın yolu olan Resources , bölüm bir XAML Dosya, gösterildiği gibi önceki örnekler. Stilleri kaynaklar olduğundan, bunlar tüm kaynaklara uygulamak aynı ölçüm kurallara uyma; Burada bir stili stil uygulanacağı yeri etkiler bildirin. Örneğin, uygulama tanımınızı kök öğesi stilinde bildirirseniz XAML Dosya, herhangi bir stil yerde kendi uygulama. kullanılabilir Bir gezinti uygulaması oluşturup, uygulamanın stilinde bildirmek XAML dosyaları, stil kullanılabilir yalnızca, XAML dosyası. Kaynaklar için kuralları kapsamı hakkında daha fazla bilgi için bkz: Kaynaklara Genel Bakış.

Buna ek olarak, Stiller ve kaynakları hakkında daha fazla bilgi bulabilirsiniz paylaşılan kaynaklar ve Temalar bu genel bakışta daha.

Program aracılığıyla stilleri ayarlama

Adlandırılmış stil öğe için programlı olarak atamak için stil kaynakları topluluğundan alın ve öğe için Ata Style özelliği. Kaynakları koleksiyon türü maddelerinin Not Object. Bu nedenle, alınan stil dönüştürmelisiniz bir Style atamak için önce Style özelliği. Örneğin, tanımlı ayarlamak için TitleText üzerinde stil bir TextBlock adlı textblock1, aşağıdakileri yapın:

textblock1.Style = CType(Me.Resources("TitleText"), Style)

textblock1.Style = (Style)(this.Resources["TitleText"]);

Not Stil uygulandıktan sonra korumalı ve değiştirilemez. Zaten uygulanmış stili dinamik olarak değiştirmek isterseniz, varolan listeyi değiştirmek için yeni bir stil oluşturmalısınız. For more information, see the IsSealed property.

Temel alınarak özel mantığını uygulamak için bir stil seçer bir nesne oluşturabilirsiniz. Örneğin, sağlanan örnek bakın StyleSelector sınıfa

Bağları, dinamik kaynakları ve olay işleyicileri

Kullanabileceğiniz Not Setter.Value belirtmek için özellik bir Biçimlendirme Uzantısı Bağlama veya bir DynamicResource Biçimlendirme Uzantısı. Daha fazla bilgi için bkz: için verilen örnekleri Setter.Value özelliği.

Şimdiye dek, bu genel bakış, yalnızca özellik değerini ayarlamak için ayarlayıcılar kullanımı anlatılmaktadır. Olay işleyicileri bir stilde de belirtebilirsiniz. For more information, see EventSetter.

Data Templates

Bu örnek uygulama vardır bir ListBox fotoğrafları listesine bağlı denetimi:

<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
         Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>

Bu ListBox şu anda görünümler ister şu:

Bazı tür içerik denetimlerinin çoğu sahip ve bu içeriği bağlama veriler sık sık geldiği. Bu örnek, veri fotoğrafları listesidir. De WPF, kullandığınız bir DataTemplate görsel temsilini veri tanımlamak için Temelde, ne, koyun içine bir DataTemplate belirleyen verilerin göründüğünü gibi işlenmiş bir uygulama.

Bizim örnek uygulamada, her özel Photo nesnesinin bir Source tür özelliği dizesi dosya yolunu belirtirgörüntü. Şu anda, fotoğraf nesneler dosya yolları görünür.

Fotoğrafları görüntüler olarak görünmesi oluşturduğunuz bir DataTemplate kaynak:

<Window.Resources>


...


<!--DataTemplate to display Photos as images
    instead of text strings of Paths-->
<DataTemplate DataType="{x:Type local:Photo}">
  <Border Margin="3">
    <Image Source="{Binding Source}"/>
  </Border>
</DataTemplate>


...


</Window.Resources>

Dikkat DataType özelliği çok benzer TargetType özelliği Style. Sizin DataTemplate , belirttiğiniz zaman Kaynaklar bölümünde ise DataType bir özellik ve atama değil bir x:Key, DataTemplate her türü görüntülendiğinde uygulanır. Her zaman atama seçeneğine sahip DataTemplate ile bir x:Key olarak ayarlayın ve bir StaticResource özellikleri, yararlanmak için DataTemplate türleri, ItemTemplate özelliği veya ContentTemplate özelliği.

Aslında, DataTemplate yapıldığında Yukarıdaki örnekte tanımlayan bir Photo Nesne görünür olarak bir Image içinde bir Border. Bu DataTemplate, şimdi bizim uygulama şöyle:

Veri templating modeli diğer özellikler sağlar. Örneğin, kullanarak diğer koleksiyonlar içeren koleksiyon verileri görüntülüyorsanız, bir HeaderedItemsControl gibi yazın bir Menu veya bir TreeView, yok HierarchicalDataTemplate. Başka bir veri templating özelliği DataTemplateSelector, seçmenize olanak veren bir DataTemplate kullanmak için temel alan özel mantık. Daha fazla bilgi için bkz: Veri Şablonu Özeti, farklı veri templating özellikleri daha ayrıntılı bir açıklama sağlar

Control Templates

De WPF, ControlTemplate bir denetimin görünümünü tanımlardenetim. Bir denetimin görünümünü ve yapısını yeni bir tanımlayarak değiştirebilirsiniz ControlTemplate Denetim. Böylece kendi özel denetimler yazmak gerekmez birçok durumda, bu size yeterli esneklik sağlar. For more information, see ControlTemplate Oluşturarak Mevcut Denetimin Görünümünü Özelleştirme.

Triggers

Tetikleyici özelliklerini ayarlar veya bir özellik değeri değiştiğinde veya bir olayı ortaya çıktığında, animasyon gibi eylemleri başlatır. Style, ControlTemplate, ve DataTemplate tüm sahip bir Triggers özelliği kümesi içerebilirTetikleyiciler. Tetikleyici çeşitli türleri vardır.

Özellik Tetikleyicileri

A Trigger kümeleri özellik değerleri veya Eylemler esas alan bir özelliğin değerini başlar verilir bir özellik tetikleyici.

Özellik Tetikleyicileri kullanma göstermek için her yapabilirsiniz ListBoxItem seçildiği sürece kısmen saydam. Aşağıdaki stil kümeleri Opacity değeri bir ListBoxItem için 0.5. Zaman IsSelected özelliği true, ancak Opacity ayarlanır 1.0:

<Style TargetType="ListBoxItem">
  <Setter Property="Opacity" Value="0.5" />
  <Setter Property="MaxHeight" Value="75" />
  <Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Setter Property="Opacity" Value="1.0" />
    </Trigger>


...


  </Style.Triggers>
</Style>

Bu örnek kullanır bir Trigger bir özellik değeri ayarlamak, ancak dikkat Trigger sınıfı da vardır EnterActions ve ExitActions özellikleri gerçekleştirilecek tetikleyici etkinleştirmeeylemler.

Dikkat MaxHeight özelliği ListBoxItem ayarlanır 75. Aşağıdaki çizimde, üçüncü öğenin seçili öğeyi gösterir.

EventTriggers ve animasyonlarıyla

Başka tür bir tetikleyici olan EventTrigger, bir dizi eylemi'nin esas başlatırbir olay. Örneğin, aşağıdaki EventTrigger nesneleri belirlemek, fare işaretçisini girdiğinde ListBoxItem, MaxHeight özelliği canlandırır değerine 90 üzerinden bir 0.2 ikinci dönem. Madde uzağa Fare hareket ettiğinde, özelliği özgün bir süre döndürülür 1 İkinci. Not nasıl belirtmek gerekli değildir bir To için değer MouseLeave animasyon. Animasyon özgün değeri izlemek mümkün olmasıdır.

        <EventTrigger RoutedEvent="Mouse.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Duration="0:0:0.2"
                  Storyboard.TargetProperty="MaxHeight"
                  To="90"  />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Duration="0:0:1"
                  Storyboard.TargetProperty="MaxHeight"  />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>

For more information, see the Film Şeritlerine Genel Bakış.

Aşağıdaki çizimde, fare üçüncü maddeye işaret etmektedir:

MultiTriggers, DataTriggers ve MultiDataTriggers

Ek olarak Trigger ve EventTrigger, diğer tür tetikler. MultiTriggerbirden çok koşula dayalı özellik değerlerini ayarlamanızı sağlar. Kullandığınız DataTrigger ve MultiDataTrigger koşulunuz özelliğini, veri olduğunda-bağlı.

Paylaşılan kaynaklar ve Temalar

Normal bir Windows Presentation Foundation (WPF) uygulama, birden çok kullanıcı arabirimi (UI) kaynakları boyunca uygulanan sahipuygulama. Topluca, bu kaynakları kümesi tema uygulama için kabul edilebilir. Windows Presentation Foundation (WPF)destek için ambalaj kullanıcı arabirimi (UI) kaynakları bir tema olarak olarak saklanmış bir kaynak sözlüğü kullanarak sağlar ResourceDictionary sınıfa

Windows Presentation Foundation (WPF)Temalar, stilleri ve templating mekanizma kullanılarak tanımlanır, Windows Presentation Foundation (WPF) sergiler özelleştirme görsel bir öğe.

Windows Presentation Foundation (WPF)Tema kaynakları katıştırılmış kaynak sözlükler içinde saklanır. Bu kaynak sözlükler imzalı bir derlemenin içinde gömülü olması gerekir ve ya da kod olarak montaj veya yan yana derleme gömülebilir. PresentationFramework.dll, içeren derleme durumunda, Windows Presentation Foundation (WPF) , tema kaynakları denetimleridir bir dizi yan yana derlemeler.

Tema öğesinin stili ararken Bakılacak son yer olur. Genellikle arama başlamak için uygun bir kaynağı, arama öğesi ağaç yürüyen tarafından sonra uygulama kaynak koleksiyonda görüneceğini ve son olarak sistemini sorgulamak. Bu uygulama geliştiricileri tema ulaşmadan önce ağaç veya uygulama düzeyinde herhangi bir nesne stilini yeniden tanımlama olanağı sağlar.

Kaynak sözlükler, birden çok uygulamada bir temayı yeniden olanak tanıyan tek tek dosyaları olarak tanımlayabilirsiniz. Kaynakların ancak farklı değerlerle aynı türleri sağlayan birden çok kaynak sözlükler tanımlayarak, çıkar özellikli temalar da oluşturabilirsiniz. Bu stilleri veya diğer kaynakları uygulama düzeyinde yeniden tanımlama, uygulama kaplama için önerilen yaklaşımdır.

Uygulamalarda, stilleri ve şablonlar gibi kaynakları kümesi paylaştırmak için oluşturabileceğiniz bir XAML Dosya ve tanımlayan bir ResourceDictionary. Örneğin, bir kısmını gösteren aşağıdaki resimde bakmak stil ekleme ile ControlTemplates örnek:

Bakarsanız XAML örnek dosyalar, tüm dosyaları aşağıdaki olduğunu görürsünüz:

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="Shared.xaml" />
</ResourceDictionary.MergedDictionaries>

Paylaşılmasına olan shared.xaml, hangi tanımlayan bir ResourceDictionary bir örnek var. bir tutarlı bir görünüm için denetimleri sağlar stili ve fırça kaynakları kümesi içerir

For more information, see Birleştirilmiş Kaynak Sözlükleri.

Özel Denetim tema sizin için oluşturuyorsanız, dış Denetim Kitaplığı bölümüne bakın Denetim Yazımına Genel Bakış.

Ayrıca bkz.

Görevler

Nasıl Yapılır: ControlTemplate'den Oluşturulan Öğeleri Bulma

Nasıl Yapılır: DataTemplate ile Üretilen Öğeleri Bulma

Kavramlar

WPF İçinde URI'leri Paketleme