İzlenecek yol: Microsoft Expression Blend Kullanarak Düğme Oluşturma
Bu kılavuzda, Microsoft Expression Blend kullanarak WPF özelleştirilmiş düğmesi oluşturma işlemi adım adım açıklanır.
Önemli
Microsoft Expression Blend, yürütülebilir Extensible Application Markup Language yapmak için derlenmiş bir dosya (XAML) oluşturarak çalışır. XAML ile doğrudan çalışmak yerine Blend yerine XAML kullanarak bu uygulamayla aynı uygulamayı oluşturan Visual Studio izlenecek yol vardır. Daha fazla bilgi için bkz. XAML Kullanarak Düğme Oluşturma.
Aşağıdaki çizimde, oluşturacakları özelleştirilmiş düğme gösterilmiştir.

Şekli Bir Düğmeye Dönüştürme
Bu izlenecek yol'ın ilk bölümünde özel düğmenin özel görünümlerini oluşturabilirsiniz. Bunu yapmak için önce dikdörtgeni bir düğmeye dönüştürebilirsiniz. Ardından düğmenin şablonuna ek şekiller ek olarak daha karmaşık bir düğme oluşturursınız. Neden normal bir düğmeyle başlasın ve düğmeyi özelleştirin? Bir düğme ihtiyacınız olmayan yerleşik işlevlere sahip olduğundan; özel düğmeler için dikdörtgenle başlamak daha kolaydır.
Expression Blend'de yeni bir proje oluşturmak için
Start Expression Blend. (Başlat'a tıklayın, Tüm Programlar'ın üzerine gelin,Microsoft İfadesi'ninüzerine gelin ve ardından Microsoft Expression Blend'etıklayın.)
Gerekirse uygulamayı en üst düzeye çıkarma.
Dosya menüsünde Yenidosya'ya Project.
Standart Uygulama (uygulama) .exe seçin.
Projeyi olarak ad girin
CustomButtonve Tamam'aCustomButton
Bu noktada boş bir WPF projeniz var. Uygulamayı çalıştırmak için F5 tuşuna basabilirsiniz. Beklediğiniz gibi uygulama yalnızca boş bir pencereden oluşur. Ardından, yuvarlanmış bir dikdörtgen oluşturur ve bunu bir düğmeye dönüştürürsiniz.
Dikdörtgeni Bir Düğmeye Dönüştürmek için
Pencere Arka Planı özelliğini siyah olarak ayarlayın: Pencere'yi seçin, Özellikler Sekmesi'ne tıklayınve özelliğini olarak ayarlayın.

Pencere'de bir düğmenin boyutunu yaklaşık olarak bir dikdörtgen çizin: Sol panelde dikdörtgen aracı seçin ve dikdörtgeni Pencere'ye sürükleyin.

Dikdörtgenin köşelerini yuvarlayın: Dikdörtgenin denetim noktalarını sürükleyin veya ve özelliklerini doğrudan RadiusY ayarlayın. ve değerlerini RadiusXRadiusY 20 olarak ayarlayın.

Dikdörtgeni bir düğme olarak değiştirme: Dikdörtgeni seçin. Araçlar menüsünde, DüğmeYi Yapma'ya tıklayın.

Stil/şablon kapsamını belirtin: Aşağıdakine benzer bir iletişim kutusu görüntülenir.

Kaynak adı (Anahtar) için,Tüm kaynaklara uygula'ya seçin. Bu, sonuçta elde edilen stil ve düğme şablonunun düğme olan tüm nesneler için geçerli hale gelecektir. içinde tanımla içinUygulama'ya tıklayın. Bu, sonuçta elde edilen stil ve düğme şablonunun tüm uygulama kapsamına sahip hale gelecektir. Bu iki kutu içindeki değerleri ayartığınızda düğme stili ve şablonu uygulamanın tamamına uygulanır ve uygulamada oluştursanız tüm düğmeler varsayılan olarak bu şablonu kullanır.
Düğme Şablonunu Düzenleme
Artık bir düğme olarak değiştirilmiş bir dikdörtgene sahipsiniz. Bu bölümde, düğmenin şablonunu değiştirecek ve nasıl göründüğünü daha da özelleştireceğiz.
Düğme görünümünü değiştirmek için düğme şablonunu düzenlemek için
Şablon düzenleme görünümüne gidin: Düğmemizin görünümünü daha da özelleştirmek için düğme şablonunu düzenlememiz gerekir. Bu şablon, dikdörtgeni bir düğmeye dönüştürtecek şekilde oluşturuldu. Düğme şablonunu düzenlemek için düğmeye sağ tıklayın, Denetim Parçalarını Düzenle (Şablon) seçeneğini ve ardından ŞablonuDüzenle'yi seçin.

Şablon düzenleyicisinde, düğmenin artık ve içine ayrıldığına Rectangle dikkat ContentPresenter alın. ContentPresenter, düğmenin içinde içerik sunmak için kullanılır (örneğin, "Düğme") . Hem dikdörtgen hem ContentPresenter de bir içinde yer Grid alır.

Şablon bileşenlerinin adlarını değiştirme: Şablon envanteri içinde dikdörtgene sağ tıklayın, "[Rectangle]" adını "outerRectangle" olarak ve "[ContentPresenter]" öğesini "myContentPresenter" olarak değiştirebilirsiniz.

Dikdörtgeni içinde boş olacak şekilde (donut gibi) değiştirme:outerRectangle öğesini seçin ve "Saydam" ve 5 olarak ayarlayın.

Ardından , Stroke şablonunun rengine ayarlayın. Bunu yapmak için, Darbe'nin yanındaki küçük beyaz kutuya tıklayın,CustomExpression'ı seçinve iletişim kutusuna "{TemplateBinding Background}" yazın.

İç dikdörtgen oluşturma: Şimdi başka bir dikdörtgen oluşturun ("innerRectangle" olarak adlandırılır) ve simetrik olarak outerRectangle'ın içine yerleştirin. Bu tür bir çalışma için büyük olasılıkla düğmeyi düzenleme alanında büyütecek şekilde yakınlaştırmak iyi olur.
Not
Dikdörtgenin şekil içindekinden farklı (örneğin, yuvarlak köşeleri olabilir) farklı görünür.

ContentPresenter'i en üst düzeye taşıma: Bu noktada,"Düğme" metni artık görünür olmayacaktır. Bu durumda innerRectangle,myContentPresenter üzerindedir. Bunu düzeltmek için myContentPresenter'iinnerRectangle altına sürükleyin. Dikdörtgenleri ve myContentPresenter'i aşağıdakine benzer şekilde konumlandırın.
Not
Alternatif olarak, sağ tıklayarak ve Gönder'e basarak myContentPresenter'i üzerine de konumlandırabilirsiniz.

innerRectangle'ın görünümlerini değiştirme: , ve RadiusY değerlerini StrokeThickness 20 olarak ayarlayın. Ayrıca , "{TemplateBinding Background}" özel ifadesini kullanarak şablonun arka planına ayarlayın ve FillStroke "saydam" olarak ayarlayın. FillStroke ve innerRectangle ayarlarının Fill için ayarların tersi Stroke

Üzerine bir cam katman ekleyin: Düğmenin görünümlerini özelleştirmenin son parçası, üzerine bir cam katman eklemek. Bu cam katman üçüncü bir dikdörtgenden oluşur. Cam düğmenin tamamını kaplayca olduğundan, cam dikdörtgen outerRectangle boyutuna benzer. Bu nedenle, yalnızca outerRectangle'ınbir kopyasını yaparak dikdörtgeni oluşturun. outerRectangle'ı vurgulayın ve CTRL+C ve CTRL+V tuşlarını kullanarak kopyalamayı kullanın. Bu yeni dikdörtgene "glassCube" adını girin.
Gerekirse glassCube'i yeniden konumlandır:glassCube düğmenin tamamını kapsıyor olacak şekilde henüz konumlanmazsa, düğmeyi konuma sürükleyin.
glassCube'a outerRectangle'dan biraz farklı bir şekil ver:glassCube'ın özelliklerini değiştirin. başlangıç olarak ve özelliklerini RadiusXRadiusY 10 ve StrokeThickness 2 olarak değiştirin.

glassCube'i cam gibi bir görünüme yerleştirin: %75 opak bir doğrusal gradyan kullanarak ve yaklaşık olarak düz aralıklı 6'dan fazla Beyaz ve Saydam renk arasında geçişler kullanarak, dolgulu bir görünüme ayarlayın. Gradyan durakları şu şekilde ayarlanır:
Gradyan Durdurma 1: Alfa değeri %75 olan beyaz
Gradyan Durdurma 2: Saydam
Gradyan Durdurma 3: Alfa değeri %75 olan beyaz
Gradyan Durdurma 4: Saydam
Gradyan Durdurma 5: Alfa değeri %75 olan beyaz
Gradyan Durdurma 6: Saydam
Bu, "dalgalı" bir görünüm oluşturur.

Cam katmanını gizle: Artık camlı katmanın nasıl göründüğünü gördüğünüze göre Özellikler panelinin Görünüm bölmesine gidin ve gizlemek için Opaklığı %0 olarak ayarlayın. Ön kısımlarda, cam katmanını göstermek ve işlemek için özellik tetikleyicilerini ve olayları kullanacağız.

Düğme Davranışını Özelleştirme
Bu noktada, şablonunu düzenleyerek düğmenin sunumunu özelleştirebilirsiniz, ancak düğme tipik düğmeler gibi kullanıcı eylemlerine tepki vermemektedir (örneğin, fareyle üzerine gelince görünümü değiştirme, odağı alma ve tıklama).) Sonraki iki yordamda, özel düğmeye bunlar gibi davranışların nasıl derlemek üzere olduğu gösterildi. Basit özellik tetikleyicileriyle başlayacağız ve ardından olay tetikleyicileri ve animasyonlar ekleyebilirsiniz.
Özellik tetikleyicilerini ayarlamak için
Yeni bir özellik tetikleyicisi oluşturun:glassCube seçiliyken Tetikleyiciler panelinde +Özellik'e tıklayın (sonraki adımı izleyen şekile bakın). Bu, varsayılan özellik tetikleyicisi ile bir özellik tetikleyicisi oluşturur.
IsMouseOver özelliğini tetikleyici tarafından kullanılan özellik yapma: özelliğini olarak değiştirme. Bu özellik tetikleyicinin özellik olduğunda IsMouseOver (kullanıcı
truefareyle düğmeye geldiğinde) etkinleştirmesini sağlar.
IsMouseOver, glassCube için %100 opaklığı tetikler: Tetikleyici kaydının (önceki şekilde) üzerinde olduğunu farketin. Bu, kayıt açıkken glassCube özellik değerlerde yaptığınız tüm değişikliklerin olduğunda bir eylem haline
truegelir. Kayıt sırasında OpacityOpacity %100 olarak değiştirebilirsiniz.
İlk özellik tetikleyicinizi oluşturdunız. Düzenleyicinin Tetikleyiciler panelinin değiştirileni %100 olarak kaydettiğine dikkat etmek.

Uygulamayı çalıştırmak için F5 tuşuna basın ve fare işaretçisini düğmenin üzerine ve kapatarak hareket ettirin. Düğme üzerindeyken cam katmanın göründüğünü görmeniz gerekir ve işaretçi ayrıldığında kaybolur.
Imouseover Tetikleyicileri vuruş değeri değişikliği: Tetikleyici ile bazı diğer eylemleri ilişkilendirelim . Kayıt devam ederken, seçiminizi glassCube 'den outerRectangle'e geçirin. Sonra outerRectangle öğesini Stroke " Stroke {DynamicResource {X:static SystemColors. Highlightbrühkey}}" özel ifadesine ayarlayın. Bu, öğesini Stroke düğmeler tarafından kullanılan tipik vurgu rengine ayarlar. Düğmenin üzerine fare uyguladığınızda etkisini görmek için F5 tuşuna basın.

Imouseover, bulanık metin tetikler: Daha sonra özellik tetikleyicisiyle bir daha fazla eylem ilişkilendirelim . Cam üzerinde göründüğünde düğme içeriğinin biraz bulanık görünmesini sağlayın. Bunu yapmak için BitmapEffectContentPresenter (BitmapEffect) için bir bulanıklaştırma uygulayabiliriz.

Not
Arama yapmadan önce Özellikler panelini geri döndürmek Için , arama kutusundanmetni temizleyin.
Bu noktada, fare işaretçisinin düğme alanına girdiğinde ve ayrıldığında vurgulama davranışı oluşturmak için birkaç ilişkili eylem içeren bir özellik tetikleyicisi kullandık. Bir düğme için başka bir normal davranış, odağa sahip olduğunda (tıklandıktan sonra olduğu gibi) vurgulanmalıdır. Özelliği için başka bir özellik tetikleyicisi ekleyerek bu davranışı ekleyebiliriz IsFocused .
Isodaklanmış için özellik tetikleyicisi oluştur: İçin aynı yordamın kullanıldığı (Bu bölümün ilk adımına bakın), özelliği için başka bir özellik tetikleyicisi oluşturun IsFocused . Kayıt tetiklemesırasında, tetikleyicisine aşağıdaki eylemleri ekleyin:
glassCube %100 ' ü alır .
outerRectangle "{DynamicResource {X:static SystemColors. Highlightbrühkey}}" özel ifade değerini alır.
Bu izlenecek yolun son adımında, düğmeye animasyon ekleyeceğiz. Bu animasyonlar, olaylar tarafından özellikle, MouseEnter ve olayları tarafından tetiklenecektir Click .
Etkileşimli eklenecek olay tetikleyicilerini ve animasyonlarını kullanmak için
Bir MouseEnter olay tetikleyicisi oluşturun: Yeni bir olay tetikleyicisi ekleyin ve tetikleyicide kullanılacak olay olarak öğesini seçin.

Animasyon zaman çizelgesi oluşturma: Sonra, bir animasyon zaman çizelgesini olayla ilişkilendirin .

Yeni bir zaman çizelgesi oluşturmak için Tamam 'a bastıktan sonra, bir zaman çizelgesi paneli görünür ve "zaman çizelgesi kaydı açık" tasarım panelinde görünür. Bu, zaman çizelgesinde özellik değişikliklerinin kaydına başlayabileceği anlamına gelir (özellik değişikliklerine animasyon ekleme).
Not
Ekranı görmek için pencerenizi ve/veya panellerinizi yeniden boyutlandırmanız gerekebilir.

Bir ana kare oluşturun: Bir animasyon oluşturmak için animasyon eklemek istediğiniz nesneyi seçin, zaman çizelgesinde iki veya daha fazla ana kare oluşturun ve bu ana kareler için, animasyonun arasında enterpolalanmayı istediğiniz özellik değerlerini ayarlayın. Aşağıdaki şekil, bir ana kare oluşturma sürecinde size rehberlik eder.

Bu ana karede glassCube Küçült: İkinci ana kare seçili olarak, glassCube boyutunu Boyut dönüşümünükullanarak tam boyutunun %90 ' una küçültün.

Uygulamayı çalıştırmak için F5'e basın. Fare işaretçisini düğmenin üzerine taşıyın. Cam katmanın düğmenin üstünde küçültüdiğine dikkat edin.
Başka bir olay tetikleyicisi oluşturun ve onunla farklı bir animasyon ilişkilendirin: Daha sonra bir animasyon ekleyelim. Önceki olay tetikleyicisi animasyonunu oluşturmak için kullandığınız işlemin benzer bir yordamını kullanın:
Olayını kullanarak yeni bir olay tetikleyicisi oluşturun Click .
Yeni bir zaman çizelgesini olayla ilişkilendirin Click .

Bu zaman çizelgesinde bir tane olmak üzere iki ana kare oluşturun, biri 0,0 saniye, ikinci ise 0,3 saniye.
Ana kare 0,3 saniye vurgulanmış olarak, dönüşümü Döndür açısını 360 derece olarak ayarlayın.

Uygulamayı çalıştırmak için F5'e basın. Düğmesine tıklayın. Cam katmanın etrafında dönerek göründüğünü unutmayın.
Sonuç
Özelleştirilmiş bir düğmeyi tamamladınız. Bu, uygulamadaki tüm düğmelere uygulanan bir düğme şablonu kullanıyorsunuz. Şablon düzenlemesi modundan ayrıldıysanız (aşağıdaki şekle bakın) ve daha fazla düğme oluşturursanız, varsayılan düğme gibi özel düğmeleriniz gibi göründüğünü ve davrandığını görürsünüz.


Uygulamayı çalıştırmak için F5'e basın. Düğmelere tıklayın ve bunların tümünün aynı davranış şeklini görürsünüz.
Şablonu özelleştirirken, FillFill özelliğini ve StrokeStroke özelliğini şablon arka planına ({TemplateBinding background}) ayarlamış olursunuz. Bu nedenle, ayrı düğmelerin arka plan rengini ayarladığınızda, bu ilgili özellikler için ayarladığınız arka plan kullanılacaktır. Arka planları şimdi değiştirmeyi deneyin. Aşağıdaki şekilde farklı degradeler kullanılır. Bu nedenle, bir şablon düğme gibi denetimlerin genel özelleştirmesi için yararlı olsa da, şablonlara sahip denetimler, birbirleriyle farklı görünecek şekilde değiştirilebilir.

Sonuç olarak, bir düğme şablonunu özelleştirme sürecinde, Microsoft Expression Blend 'de aşağıdakilerin nasıl yapılacağını öğrendiniz:
Bir denetimin görünümünü özelleştirin.
Özellik tetikleyicilerini ayarlayın. Özellik Tetikleyicileri çok faydalı olduğundan, yalnızca denetimler değil birçok nesne üzerinde kullanılabilirler.
Olay Tetikleyicilerini ayarlayın. Olay Tetikleyicileri çok yararlı olur, çünkü yalnızca denetimler değil birçok nesne üzerinde kullanılabilirler.
Animasyonlar oluşturun.
Çeşitli: degradeler oluşturun, BitmapEffects ekleyin, dönüşümler kullanın ve nesnelerin temel özelliklerini ayarlayın.