İ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.

Önemli

Microsoft Expression Blend, yürütülebilir programı oluşturmak için derlenen Genişletilebilir Uygulama biçimlendirme dili (XAML) oluşturarak çalışır. XAML ile doğrudan çalışmak isterseniz, Blend yerine Visual Studio kullanarak aynı uygulamayı oluşturmanızı sağlayan başka bir izlenecek yol mevcuttur. Daha fazla bilgi için bkz. XAML Kullanarak Düğme Oluşturma .

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. Expression Blend'i Başlat. ( Başlat'a tıklayın, 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: Pencere'yi seçin, Özellikler Sekmesine tıklayın ve özelliğini olarak BackgroundayarlayınBlack.

   

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: Ya dikdörtgenin kontrol noktalarını sürükleyin ya da doğrudan RadiusX ve RadiusY özelliklerini ayarlayın. RadiusX ve RadiusY değerlerini 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 düzenleme görünü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 bir Rectangle ve bir ContentPresenter şeklinde ayrıldığını fark 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 değiştirin (halka gibi):outerRectangle öğesini seçin ve Fill "Saydam" ve StrokeThickness 5 olarak ayarlayın.

   

   Ardından Stroke öğesini, hangi rengin şablona aitse o renge ayarlayın. Bunu yapmak için Stroke'un yanındaki küçük beyaz kutuya tıklayın, CustomExpression'ı 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.

   Uyarı

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

   

5. ContentPresenter'ı en üste taşıyın: 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.

   Uyarı

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

   

6. innerRectangle görünümünü değiştirin:RadiusX, RadiusYve StrokeThickness değerlerini 20 olarak ayarlayın. Buna ek olarak, Fill öğesini "{TemplateBinding Background}" özel ifadesini kullanarak şablonun arka planına ayarlayın ve Stroke öğesini "saydam" olarak ayarlayın. ve FillStroke ayarlarının 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:GlassCube düğmenin tamamını kaplayan şekilde henüz konumlandırılmadıysa, konumuna sürükleyin.

9. glassCube'a outerRectangle değerinden biraz farklı bir şekil verin:glassCube'un özelliklerini değiştirin. Başlayın ve RadiusX ve RadiusY özelliklerini 10, StrokeThickness'yi 2 olarak değiştirin.

   

10. glassCube'un cam gibi görünmesini sağlayın:Fill öğesini, 75% opaklığında ve Beyaz ile Saydam renkler arasında yaklaşık olarak eşit aralıklara sahip 6 bölümde geçiş yapan bir doğrusal gradyan kullanarak camsı bir görünüme ayarlayın. 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ını gizle: Artık camsı katmanın nasıl göründüğünü gördüğünüze göre Özellikler panelininGörünüm bölmesine gidin ve gizlemek için Opaklığı 0% olarak ayarlayın. İlerleyen bölümlerde, cam katmanını açığa çıkarmak ve kontrol etmek için özellik tetikleyicileri ve olayları 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 bir özellik tetikleyicisi oluşturun:glassCube seçili durumdayken Tetikleyiciler panelinde + Özellik'e tı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 haline getirin: Özelliği IsMouseOver olarak değiştirin. Bu, IsMouseOver özelliği true olduğunda, özellik tetikleyicisinin etkinleştirilmesini sağlar (kullanıcı fareyle düğmeye işaret ettiğinde).

   

3. IsMouseOver, glassCube için 100% opaklığını tetikler:Tetikleyici kaydının açık olduğuna dikkat edin (yukarıdaki şekle bakın). Kayıt açıkken glassCube özelliğinin değerlerinde yaptığınız tüm değişiklikler, IsMouseOvertrue olduğunda gerçekleşen bir eylem haline gelecektir. Kaydederken Opacity öğesini 100%olarak değiştirin.

   

   Şimdi ilk özellik tetikleyicinizi oluşturdunuz. Düzenleyicinin Tetikleyiciler panelininOpacity 100%olarak değiştirildiğini kaydettiğine 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: Şimdi tetikleyiciyle IsMouseOver diğer bazı eylemleri ilişkilendirelim. Kayıt devam ederken, seçiminizi glassCube yerine outerRectangle olarak değiştirin. Ardından Stroke değerini "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" özel ifadesi olarak ayarlayın. Bu, c0 öğesini düğmelerin kullandığı tipik vurgu rengine ayarlar. Fareyle düğmenin üzerindeyken efekti görmek için F5 tuşuna basın.

   

5. IsMouseOver bulanık metin tetikler: Özellik tetikleyicisi IsMouseOver ile bir eylem daha ilişkilendirelim. Cam düğmenin üzerine geldiğinde, düğmenin içeriğinin biraz bulanık görünmesini sağlayın. Bunu yapmak için , (BitmapEffect) öğesine ContentPresenter bir bulanıklık uygulayabiliriz.

   

   Uyarı

   Ö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 diğer tipik davranışlarından biri, odaklandığında (tıklandıktan sonra olduğu gibi) vurgulanmasıdı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:IsMouseOver ile aynı yordamı kullanarak (bu bölümün ilk adımına bakın), IsFocused için başka bir özellik tetikleyicisi 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 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).

   Uyarı

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

   

3. Anahtar kare oluşturma: Animasyon oluşturmak için animasyon eklemek istediğiniz nesneyi seçin, zaman çizelgesinde iki veya daha fazla anahtar kare oluşturun ve bu anahtar kareler için animasyonun değerler arasında geçiş yapmasını istediğiniz özellik değerlerini ayarlayın. Aşağıdaki şekil, bir anahtar kare oluşturmanıza yardımcı olur.

   

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

   

   Uygulamayı çalıştırmak için F5 tuşuna 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 onunla 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. Yeni bir olay tetikleyici oluşturmak için Click olayını kullanın.

   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 tuşuna 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 tuşuna basın. Düğmelere tıklayın ve hepsinin nasıl aynı davrandığını fark edin.

Şablonu özelleştirirken FillStroke özelliğini şablon arka planına ({TemplateBinding Background}) ayarladığınızı 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.

custom_button_blend_BlendConclusion

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 bakınız

• XAML Kullanarak Düğme Oluşturma
• Stil oluşturma ve Şablon oluşturma
• Animasyona Genel Bakış
• Düz Renkler ve Gradyanlarla Boyamaya Genel Bakış
• Bit Eşlem Efektlerine Genel Bakış