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

The customized button that you will create

Ş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

  1. 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.)

  2. Gerekirse uygulamayı en üst düzeye çıkarma.

  3. Dosya menüsünde Yenidosya'ya Project.

  4. Standart Uygulama (uygulama) .exe seçin.

  5. Projeyi olarak ad girin CustomButton ve Tamam'a CustomButton

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

  1. Pencere Arka Planı özelliğini siyah olarak ayarlayın: Pencere'yi seçin, Özellikler Sekmesi'ne tıklayınve özelliğini olarak ayarlayın.

    How to set the background of a button to black

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

    How to draw a rectangle

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

    How to make the corners of a rectangle round

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

    How to make a shape into a button

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

    The

    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

  1. Ş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.

    How to edit a template

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

    Components in the presentation of a rectangle

  2. Ş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.

    How to rename a component of a template

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

    How to make a rectangle empty

    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.

    How to set the use the color of the template

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

    How to create a rectangle inside another rectangle

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

    How to move one button on top of another button

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

    How to change the appearance of a rectangle

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

  8. Gerekirse glassCube'i yeniden konumlandır:glassCube düğmenin tamamını kapsıyor olacak şekilde henüz konumlanmazsa, düğmeyi konuma sürükleyin.

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

    The appearance settings for glassCube

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

    A rectangle that looks like glass

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

    How to hide the glass rectangle

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

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

  2. 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ı true fareyle düğmeye geldiğinde) etkinleştirmesini sağlar.

    How to set a trigger on a property

  3. 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 true gelir. Kayıt sırasında OpacityOpacity %100 olarak değiştirebilirsiniz.

    How to set the opacity of a button

    İlk özellik tetikleyicinizi oluşturdunız. Düzenleyicinin Tetikleyiciler panelinin değiştirileni %100 olarak kaydettiğine dikkat etmek.

    The

    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.

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

    How to set the stroke to the highlight color

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

    How to blur the content of a button

    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 .

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

  1. Bir MouseEnter olay tetikleyicisi oluşturun: Yeni bir olay tetikleyicisi ekleyin ve tetikleyicide kullanılacak olay olarak öğesini seçin.

    How to create a MouseEnter event trigger

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

    How to add an animation timeline to an event

    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.

    The timeline panel

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

    How to create a keyframe

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

    How to shrink the size of a button

    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.

  5. 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:

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

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

      How to create a new timeline

    3. Bu zaman çizelgesinde bir tane olmak üzere iki ana kare oluşturun, biri 0,0 saniye, ikinci ise 0,3 saniye.

    4. Ana kare 0,3 saniye vurgulanmış olarak, dönüşümü Döndür açısını 360 derece olarak ayarlayın.

      How to create a rotate transform

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

The custom button template

Multiple buttons that use the same template

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.

Buttons with the same template that look diferent

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.

Ayrıca bkz.