İzlenecek yol: Microsoft Expression Blend Kullanarak Düğme Oluşturma

Bu kılavuz, Microsoft Expression Blend kullanarak WPF özelleştirilmiş düğmesi oluşturma işleminde size yol gösterir.

Aşağıdaki çizimde, oluşturacağınız özelleştirilmiş düğme gösterilmektedir.

Şekli Düğmeye Dönüştürme

Bu kılavuzun ilk bölümünde özel düğmenin özel görünümünü oluşturursunuz. Bunu yapmak için önce bir dikdörtgeni bir düğmeye dönüştürürsiniz. Ardından düğmenin şablonuna ek şekiller ekleyerek daha karmaşık bir görünüm düğmesi oluşturursunuz. Neden normal bir düğmeyle başlayıp özelleştirmiyor? 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

1. Start Expression Blend. (Tıklayın Başlat'ı seçin, Tüm Programlar'ın üzerine gelin, Microsoft İfadesi'nin üzerine gelin ve ardından Microsoft Expression Blend'e tıklayın.)

2. Gerekirse uygulamayı en üst düzeye çıkarın.

3. Dosya menüsünde Yeni Proje'ye tıklayın.

4. Standart Uygulama (.exe) öğesini seçin.

5. Projeyi CustomButton adlandırın ve Tamam'a basın.

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, yuvarlatılmış bir dikdörtgen oluşturacak ve bunu bir düğmeye dönüştürebilirsiniz.

Dikdörtgeni Düğmeye dönüştürmek için

1. Pencere Arka Planı özelliğini siyah olarak ayarlayın: Pencereyi seçin, Özellikler Sekmesine tıklayın ve özelliğini olarak BlackayarlayınBackground.

   

2. Penceredeki bir düğmenin boyutuna yakın bir dikdörtgen çizin: Sol taraftaki araç panelinde dikdörtgen aracını seçin ve dikdörtgeni Pencere'ye sürükleyin.

   

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

   

4. Dikdörtgeni bir düğme olarak değiştirin: Dikdörtgeni seçin. Araçlar menüsünde Düğme Oluştur'a tıklayın.

   

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

   

   Kaynak adı (Anahtar) için Tümüne uygula'yı seçin. Bu, sonuçta elde edilen stilin ve düğme şablonunun düğme olan tüm nesnelere uygulanmasını sağlar. Içinde tanımla için Uygulama'yı seçin. Bu, sonuçta elde edilen stilin ve düğme şablonunun tüm uygulama genelinde kapsama sahip olmasını sağlar. Bu iki kutudaki değerleri ayarladığınızda, düğme stili ve şablon tüm uygulama içindeki tüm düğmelere uygulanır ve uygulamada oluşturduğunuz tüm düğmeler varsayılan olarak bu şablonu kullanır.

Düğme Şablonunu Düzenleme

Artık düğme olarak değiştirilmiş bir dikdörtgene sahipsiniz. Bu bölümde düğmenin şablonunu değiştirecek ve görünümünü daha da özelleştireceksiniz.

Düğme görünümünü değiştirmek üzere düğme şablonunu düzenlemek için

1. Şablon görünümünü düzenleme bölümüne gidin: Düğmemizin görünümünü daha fazla özelleştirmek için düğme şablonunu düzenlememiz gerekir. Bu şablon, dikdörtgeni bir düğmeye dönüştürdüğümizde oluşturuldu. Düğme şablonunu düzenlemek için düğmeye sağ tıklayın ve Denetim Bölümlerini Düzenle (Şablon) ve ardından Şablonu Düzenle'yi seçin.

   

   Şablon düzenleyicisinde, düğmenin artık ve Rectangle içine ayrıldığına ContentPresenterdikkat edin. ContentPresenter, düğme içinde içerik sunmak için kullanılır (örneğin, "Düğme" dizesi). Hem dikdörtgen hem ContentPresenter de bir Gridiçine yerleştirilmiş.

   

2. Şablon bileşenlerinin adlarını değiştirin: Şablon envanterinde dikdörtgene sağ tıklayın, adı "[Rectangle]" yerine "outerRectangle" olarak değiştirin Rectangle ve "[ContentPresenter]" değerini "myContentPresenter" olarak değiştirin.

   

3. Dikdörtgeni, içinde boş olacak şekilde (halka gibi) değiştirin: outerRectangle öğesini seçin ve "Saydam" ve StrokeThickness 5 olarak ayarlayınFill.

   

   Ardından öğesini Stroke şablonun rengine ayarlayın. Bunu yapmak için Vuruş'un yanındaki küçük beyaz kutuya tıklayın, Özel İfade'yi seçin ve iletişim kutusuna "{TemplateBinding Background}" yazın.

   

4. İç dikdörtgen oluşturma: Şimdi başka bir dikdörtgen oluşturun ("innerRectangle" olarak adlandırın) ve bunu outerRectangle öğesinin içine simetrik olarak yerleştirin. Bu tür bir çalışma için, büyük olasılıkla düğmeyi düzenleme alanında büyütmek için yakınlaştırmak isteyeceksiniz.

   Dekont

   Dikdörtgeniniz şekildekinden farklı görünebilir (örneğin, yuvarlatılmış köşeleri olabilir).

   

5. ContentPresenter'ı en üste taşıma: Bu noktada, "Düğme" metninin artık görünmemesi mümkündür. Bu durumda, bunun nedeni innerRectangle öğesinin myContentPresenter üzerinde olmasıdır. Bunu düzeltmek için myContentPresenter öğesini innerRectangle öğesinin altına sürükleyin. Dikdörtgenleri ve myContentPresenter'ı aşağıdakine benzer şekilde yeniden konumlandırın.

   Dekont

   Alternatif olarak, sağ tıklayıp İlet'e basarak myContentPresenter öğesini en üste yerleştirebilirsiniz.

   

6. innerRectangle görünümünü değiştirme: , RadiusYve StrokeThickness değerlerini 20 olarak ayarlayınRadiusX. Buna ek olarak, Fill "{TemplateBinding Background}" ) özel ifadesini kullanarak şablonun arka planına ayarlayın ve "saydam" olarak ayarlayın Stroke . ve Stroke innerRectangle ayarlarının Fill outerRectangle ayarlarının tersi olduğuna dikkat edin.

   

7. Üstüne cam bir katman ekleyin: Düğmenin görünümünü özelleştirmenin son parçası, üstüne cam bir katman eklemektir. Bu cam katman üçüncü bir dikdörtgenden oluşur. Cam tüm düğmeyi kapladığı için, cam dikdörtgen dışRectangle boyutlarına benzer. Bu nedenle, outerRectangle öğesinin bir kopyasını oluşturarak dikdörtgeni oluşturun. outerRectangle'ı vurgulayın ve bir kopya oluşturmak için CTRL+C ve CTRL+V tuşlarını kullanın. Bu yeni dikdörtgene "glassCube" adını verin.

8. Gerekirse glassCube'ı yeniden konumlandırın:glassCube düğmenin tamamını kaplayan şekilde henüz konumlandırılmadıysa, konumuna sürükleyin.

9. glassCube'a outerRectangle'dan biraz farklı bir şekil verin: glassCube'un özelliklerini değiştirin. ve özelliklerini 10 ve RadiusYStrokeThickness 2 olarak değiştirerek RadiusX başlayın.

   

10. glassCube'un cam gibi görünmesini sağlama: %75 opak doğrusal gradyan kullanarak ve yaklaşık 6 eşit aralıklı aralıkta Beyaz ve Saydam rengi arasında geçiş yaparak öğesini camsı bir görünüme ayarlayın Fill . Gradyan durakları şu şekilde ayarlanır:

    • Gradyan Durağı 1: Alfa değeri %75 olan beyaz

    • Gradyan Durağı 2: Saydam

    • Gradyan Durağı 3: Alfa değeri %75 olan beyaz

    • Gradyan Durağı 4: Saydam

    • Gradyan Durağı 5: Alfa değeri %75 olan beyaz

    • Gradyan Durağı 6: Saydam

    Bu, "dalgalı" bir cam görünümü oluşturur.

    

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

    

Düğme Davranışını Özelleştirme

Bu noktada, şablonu düzenleyerek düğmenin sunusunu özelleştirdiniz, ancak düğme normal düğmeler gibi kullanıcı eylemlerine tepki vermez (örneğin, fare üzerinde çalışırken görünümü değiştirme, odağı alma ve tıklama.) Sonraki iki yordamda, özel düğmede bunlar gibi davranışların nasıl derileceği gösterilir. Basit özellik tetikleyicileriyle başlayacağız ve ardından olay tetikleyicileri ve animasyonlar ekleyeceğiz.

Özellik tetikleyicilerini ayarlamak için

1. Yeni özellik tetikleyicisi oluşturma: glassCube seçili durumdayken Tetikleyiciler panelinde + Özellik'etıklayın (sonraki adımı izleyen şekilde bakın). Bu, varsayılan özellik tetikleyicisiyle bir özellik tetikleyicisi oluşturur.

2. IsMouseOver'ı tetikleyici tarafından kullanılan özellik yapın: özelliğini olarak IsMouseOverdeğiştirin. Bu, özellik true olduğunda özellik tetikleyicisinin etkinleştirilmesini IsMouseOver sağlar (kullanıcı fareyle düğmeye işaret ettiğinde).

   

3. IsMouseOver, glassCube için %100 opaklığı tetikler: Tetikleyici kaydının açık olduğuna dikkat edin (yukarıdaki şekilde bakın). Bu, kayıt açıkken glassCube özelliğinin değerlerinde yaptığınız tüm değişikliklerin olduğunda IsMouseOvertruegerçekleşen bir eylem olacağı anlamına gelir. Kayıt sırasında glassCube değerini Opacity %100 olarak değiştirin.

   

   Şimdi ilk özellik tetikleyicinizi oluşturdunuz. Düzenleyicinin Tetikleyiciler panelinin %100 olarak değiştirildiğini kaydettiğine Opacity dikkat edin.

   

   Uygulamayı çalıştırmak için F5 tuşuna basın ve fare işaretçisini düğmenin üzerine ve dışına taşıyın. Düğmenin üzerine fareyle bastığınızda cam katmanın göründüğünü ve işaretçi ayrıldığında kaybolduğunu görmeniz gerekir.

4. IsMouseOver, vuruş değeri değişikliğini tetikler: Diğer bazı eylemleri tetikleyiciyle IsMouseOver ilişkilendirelim. Kayıt devam ederken, seçiminizi glassCubeyerine outerRectangle olarak değiştirin. Ardından outerRectangle değerini "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" özel ifadesi olarak ayarlayınStroke. Bu, öğesini Stroke düğmeler tarafından kullanılan tipik vurgu rengine ayarlar. Fareyle düğmenin üzerindeyken efekti görmek için F5 tuşuna basın.

   

5. IsMouseOver bulanık metin tetikler: Bir eylemi daha özellik tetikleyicisi ile IsMouseOver ilişkilendirelim. Düğmenin içeriğinin üzerinde cam göründüğünde biraz bulanık görünmesini sağlayın. Bunu yapmak için , (myContentPresenter) öğesine ContentPresenter bir bulanıklık BitmapEffect uygulayabiliriz.

   

   Dekont

   Özellikler panelini aramadan öncekine geri döndürmek içinBitmapEffect, Arama kutusundaki metni temizleyin.

   Bu noktada, fare işaretçisi düğme alanına girdiğinde ve düğme alanından ayrıldığında için vurgulama davranışı oluşturmak için birkaç ilişkili eylem içeren bir özellik tetikleyicisi kullandık. Bir düğmenin bir diğer tipik davranışı da odak noktası olduğunda (tıklandıktan sonra olduğu gibi) vurgulamaktır. Özellik için başka bir özellik tetikleyicisi IsFocused ekleyerek bu tür bir davranış ekleyebiliriz.

6. IsFocused için özellik tetikleyicisi oluşturma: ile aynı yordamı IsMouseOver kullanarak (bu bölümün ilk adımına bakın), özellik için başka bir özellik tetikleyicisi IsFocused oluşturun. Tetikleyici kaydı açıkken tetikleyiciye aşağıdaki eylemleri ekleyin:

   • glassCube %100 alır Opacity .

   • outerRectangle , "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" özel ifade Stroke değerini alır.

Bu kılavuzdaki son adım olarak, düğmeye animasyonlar ekleyeceğiz. Bu animasyonlar, özellikle MouseEnter ve Click olayları tarafından tetiklenir.

Etkileşim eklemek için olay tetikleyicilerini ve animasyonlarını kullanmak için

1. MouseEnter Olay Tetikleyicisi Oluşturma: Yeni bir olay tetikleyicisi ekleyin ve tetikleyicide kullanılacak olay olarak öğesini seçin MouseEnter .

   

2. Animasyon zaman çizelgesi oluşturma: Ardından, animasyon zaman çizelgesini olayla ilişkilendirin MouseEnter .

   

   Yeni bir zaman çizelgesi oluşturmak için Tamam'a bastıktan sonra Bir Zaman Çizelgesi Paneli görüntülenir ve tasarım panelinde "Zaman çizelgesi kaydı açık" görünür. Bu, özellik değişikliklerini zaman çizelgesinde kaydetmeye başlayabileceğiniz anlamına gelir (özellik değişikliklerine animasyon ekleme).

   Dekont

   Ekranı görmek için pencerenizi ve/veya panellerinizi yeniden boyutlandırmanız gerekebilir.

   

3. Ana kare oluşturma: 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 animasyonu ilişkilendirmek istediğiniz özellik değerlerini ayarlayın. Aşağıdaki şekil, bir ana bilgisayar oluşturma işleminde size yol gösterir.

   

4. GlassCube'ı bu ana karede küçült: İkinci ana kare seçiliyken, Boyut Dönüştürme'yi kullanarak glassCube'un boyutunu tam boyutunun %90'ını küçültün.

   

   Uygulamayı çalıştırmak için F5'e basın. Fare işaretçisini düğmenin üzerine getirin. Düğmenin üzerinde cam katmanının küçüldüğünü görebilirsiniz.

5. Başka bir Olay Tetikleyicisi oluşturun ve farklı bir animasyonu ilişkilendirin: Şimdi bir animasyon daha ekleyelim. Önceki olay tetikleyicisi animasyonunu oluşturmak için kullandığınız yordama benzer bir yordam kullanın:

   1. Olayı kullanarak yeni bir olay tetikleyicisi Click oluşturun.

   2. Yeni bir zaman çizelgesini olayla ilişkilendirin Click .

      

   3. Bu zaman çizelgesi için biri 0,0 saniye, ikincisi 0,3 saniyede iki ana kare oluşturun.

   4. Ana kare 0,3 saniye olarak vurgulanmışken Dönüştürme Açısını Döndür'ü 360 dereceye ayarlayın.

      

   5. Uygulamayı çalıştırmak için F5'e basın. düğmesine tıklayın. Cam katmanının etrafında döndürdüğünü fark edin.

Sonuç

Özelleştirilmiş bir düğmeyi tamamladınız. Bunu, uygulamadaki tüm düğmelere uygulanan bir düğme şablonu kullanarak yaptınız. Şablon düzenleme modundan çıkarsanız (aşağıdaki şekilde bakın) ve daha fazla düğme oluşturursanız, bunların varsayılan düğme yerine özel düğmeniz 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 hepsinin nasıl aynı davrandığını fark edin.

Şablonu özelleştirirken innerRectangle özelliğini ve Stroke outerRectangle özelliğini şablon arka planına ({TemplateBinding Background}) ayarladığınızı Fill unutmayın. Bu nedenle, tek tek düğmelerin arka plan rengini ayarladığınızda, ayarladığınız arka plan ilgili özellikler için kullanılır. Arka planları değiştirmeyi şimdi deneyin. Aşağıdaki şekilde farklı gradyanlar kullanılmıştır. Bu nedenle, bir şablon düğme gibi denetimlerin genel olarak özelleştirilmesi için yararlı olsa da, şablon içeren denetimler yine de birbirinden farklı görünecek şekilde değiştirilebilir.

Sonuç olarak, bir düğme şablonunu özelleştirme sürecinde, Microsoft Expression Blend'de aşağıdakileri nasıl yapacağınızı öğrendinsiniz:

• Denetimin görünümünü özelleştirin.

• Özellik tetikleyicilerini ayarlayın. Özellik tetikleyicileri, yalnızca denetimlerde değil, çoğu nesnede kullanılabildiğinden çok yararlıdır.

• Olay tetikleyicilerini ayarlayın. Olay tetikleyicileri yalnızca denetimlerde değil, çoğu nesnede kullanılabildiğinden çok yararlıdır.

• Animasyonlar oluşturun.

• Çeşitli: gradyanlar oluşturun, BitmapEffects ekleyin, dönüşümleri kullanın ve nesnelerin temel özelliklerini ayarlayın.

Ayrıca bkz.

• XAML Kullanarak bir Düğme Oluşturma
• Stil ve Şablon Oluşturma
• Animasyona Genel bakış
• Düz Renkler ve Gradyanlar ile Boyamaya Genel Bakış
• Bit Eşlem Etkilerine Genel Bakış