İzlenecek yol: Microsoft Expression Blend Kullanarak Düğme OluşturmaWalkthrough: Create a Button by Using Microsoft Expression Blend

Bu izlenecek yol, oluşturma işleminde size yol gösterir bir WPFWPF Microsoft Expression Blend kullanarak özelleştirilmiş düğmesi.This walkthrough steps you through the process of creating a WPFWPF customized button using Microsoft Expression Blend.

Önemli

Microsoft Expression Blend çalışır oluşturarak Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) , ardından derlenmiş yürütülebilir program yapma.Microsoft Expression Blend works by generating Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) that is then compiled to make the executable program. Bunun yerine ile işe yarar, Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) doğrudan bir kullanmakla aynı uygulamayı oluşturan başka bir gözden geçirme yok Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) Blend yerine Visual Studio ile.If you would rather work with Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) directly, there is another walkthrough that creates the same application as this one using Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) with Visual Studio rather than Blend. Bkz: tarafından XAML kullanarak bir düğme oluşturma daha fazla bilgi için.See Create a Button by Using XAML for more information.

Aşağıdaki çizimde özelleştirilmiş bir düğme, oluşturacağınız gösterilir.The following illustration shows the customized button that you will create.

Oluşturacağınız özelleştirilmiş bir düğmeThe customized button that you will create

Bir düğmeye bir şekle DönüştürConvert a Shape to a Button

Bu kılavuzun ilk bölümünde özel düğme özel görünüşünü oluşturun.In the first part of this walkthrough you create the custom look of the custom button. Bunu yapmak için önce bir düğmeye bir dikdörtgen dönüştürmeniz gerekir.To do this, you first convert a rectangle to a button. Ardından ek şekiller düğmenin şablonuna daha karmaşık görünen bir düğme oluşturma eklersiniz.You then add additional shapes to the template of the button, creating a more complex looking button. Neden normal bir düğme ile çalışmaya başlayabilir ve özelleştirilmelidir?Why not start with a regular button and customize it? Gereksinim duymadığınız yerleşik işlevleri bir düğme olduğu için; özel düğmeler için bir dikdörtgen ile başlamak kolaydır.Because a button has built-in functionality that you do not need; for custom buttons, it is easier to start with a rectangle.

Expression Blend içinde yeni bir proje oluşturmak içinTo create a new project in Expression Blend

  1. Expression Blend başlatın.Start Expression Blend. (Tıklayın Başlat, işaret tüm programlar, işaret Microsoft Expressionve ardından Microsoft Expression Blend.)(Click Start, point to All Programs, point to Microsoft Expression, and then click Microsoft Expression Blend.)

  2. Uygulama gerekirse en üst düzeye çıkarın.Maximize the application if needed.

  3. Üzerinde dosya menüsünü tıklatın yeni proje.On the File menu, click New Project.

  4. Seçin standart uygulaması (.exe).Select Standard Application (.exe).

  5. Projeyi adlandırın CustomButton basın Tamam.Name the project CustomButton and press OK.

Bu noktada, boş bir sahip WPFWPF proje.At this point you have a blank WPFWPF project. Uygulamayı çalıştırmak için F5 tuşuna basabilirsiniz.You can press F5 to run the application. Bekleyebileceğiniz gibi uygulamayı yalnızca boş bir pencerenin oluşur.As you might expect, the application consists of only a blank window. Ardından, bir Yuvarlatılmış Dikdörtgen oluşturur ve bir düğme Dönüştür.Next, you create a rounded rectangle and convert it into a button.

Bir düğmeye bir dikdörtgen dönüştürmek içinTo convert a Rectangle to a Button

  1. Pencere arkaplanı özelliği siyah olarak ayarlar: penceresi seçin, Özellikleri sekmesi, ayarlayıp Background özelliğini Black.Set the Window Background property to black: Select the Window, click the Properties Tab, and set the Background property to Black.

    Bir düğmenin arka planı siyah olarak ayarlamak nasılHow to set the background of a button to black

  2. Pencere üzerinde bir düğme yaklaşık boyutunu dikdörtgen çizme: aracı sol panelde dikdörtgen Aracı'nı seçin ve dikdörtgen pencerenin sürükleyin.Draw a rectangle approximately the size of a button on the Window: Select the rectangle tool on the left-hand tool panel and drag the rectangle onto the Window.

    Bir dikdörtgen çizmek nasılHow to draw a rectangle

  3. Dikdörtgenin köşelerini kullanıma yuvarlak: dikdörtgenin kontrol noktalarını sürükleyin ya da doğrudan ayarlayın RadiusX ve RadiusY özellikleri.Round out the corners of the rectangle: Either drag the control points of the rectangle or directly set the RadiusX and RadiusY properties. Değerlerini ayarlayın RadiusX ve RadiusY 20.Set the values of RadiusX and RadiusY to 20.

    Dikdörtgenin köşelerini yuvarlar hale getirmeHow to make the corners of a rectangle round

  4. Bir düğme dikdörtgenin değiştirin: dikdörtgeni seçin.Change the rectangle into a button: Select the rectangle. Üzerinde Araçları menüsünde tıklatın olun düğmesi.On the Tools menu, click Make Button.

    Bir şekil bir düğme oluşturmak nasılHow to make a shape into a button

  5. Stil/şablonu kapsamını belirtin: görünür aşağıdaki gibi bir iletişim kutusu.Specify the scope of the style/template: A dialog box like the following appears.

    "Stil kaynağı oluştur" iletişim kutusuThe "Create Style Resource" dialog box

    İçin kaynak adı (anahtar) seçin tümüne uygula.For Resource name (Key), select Apply to all. Bu, sonuçta elde edilen stil ve düğmeleri olan tüm nesneler için geçerli bir düğme şablonunun yapar.This will make the resulting style and button template apply to all objects that are buttons. İçin tanımlamakseçin uygulama.For Define in, select Application. Bu, elde edilen stil ve düğme şablonunu uygulamanın tamamı kapsama sahip olmanızı sağlar.This will make the resulting style and button template have scope over the entire application. Bu iki kutularında değerleri ayarlamak, tüm uygulama içindeki tüm düğmeler düğmeye stil ve şablon uygulamak ve uygulama içinde oluşturduğunuz her düğme, varsayılan olarak, bu şablonu kullanın.When you set the values in these two boxes, the button style and template apply to all buttons within the entire application and any button you create in the application will, by default, use this template.

Düğme şablonunu DüzenleEdit the Button Template

Artık bir düğme değiştirildi bir dikdörtgen var.You now have a rectangle that has been changed to a button. Bu bölümde, düğmenin şablonun değiştirmek ve nasıl göründüğüne özelleştirin.In this section, you'll modify the template of the button and further customize how it looks.

Düğme görünümünü değiştirmek için düğme şablonunu düzenlemek içinTo edit the button template to change the button appearance

  1. Düzenleme şablonu görünümde gidin: daha fazla düğmemizin görünümünü özelleştirmek için düğme şablonunu düzenlemek gerekiyor.Go into edit template view: To further customize the look of our button, we need to edit the button template. Bu şablon, biz bir düğme dikdörtgenin dönüştürüldüğünde oluşturuldu.This template was created when we converted the rectangle into a button. Düğme şablonunu düzenlemek için düğme sağ tıklayıp denetim bölümlerini (şablon) Düzenle ardından şablonu Düzen.To edit the button template, right-click the button and select Edit Control Parts (Template) and then Edit Template.

    Şablon düzenlemeHow to edit a template

    Şablonu Düzenleyicisi'nde düğmesi artık ayrılır, dikkat edin. bir Rectangle ve ContentPresenter.In the template editor, notice that the button is now separated into a Rectangle and the ContentPresenter. ContentPresenter (Örneğin, "Button" dizesi) düğmesi içinde içerik sunmak için kullanılır.The ContentPresenter is used to present content within the button (for example, the string "Button"). Her iki dikdörtgen ve ContentPresenter içine yerleştirilir bir Grid.Both the rectangle and ContentPresenter are laid out inside of a Grid.

    Belirli bir dikdörtgen bileşenlerdeComponents in the presentation of a rectangle

  2. Şablonu bileşenleri adlarını değiştirme: şablon stoktaki değişiklik dikdörtgen sağ Rectangle "outerRectangle için" ad "[dikdörtgenden]" ve "myContentPresenter" için "[ContentPresenter]" değiştirin.Change the names of the template components: Right-click the rectangle in the template inventory, change the Rectangle name from "[Rectangle]" to "outerRectangle", and change "[ContentPresenter]" to "myContentPresenter".

    Bir bileşeni olan bir şablonu yeniden adlandırmaHow to rename a component of a template

  3. Böylece (halka gibi) boş içinde dikdörtgen alter: seçin outerRectangle ayarlayıp Fill "Saydam" ve StrokeThickness 5.Alter the rectangle so that it is empty inside (like a donut): Select outerRectangle and set Fill to "Transparent" and StrokeThickness to 5.

    Bir dikdörtgen boş hale getirmeHow to make a rectangle empty

    Ardından Stroke ne olursa olsun şablonu olacaksa, renk.Then set the Stroke to the color of whatever the template will be. Bunu yapmak için küçük beyaz yanındaki kutusu vuruşseçin CustomExpressionve "{TemplateBinding arka plan}" iletişim kutusuna yazın.To do this, click the small white box next to Stroke, select CustomExpression, and type "{TemplateBinding Background}" in the dialog box.

    Kullanımı şablon rengini ayarlamaHow to set the use the color of the template

  4. Bir iç dikdörtgen oluşturma: şimdi başka bir dikdörtgen oluşturun (bunu adı "innerRectangle") ve içi simetrik olarak konumlandırın outerRectangle .Create an inner rectangle: Now, create another rectangle (name it "innerRectangle") and position it symmetrically on the inside of outerRectangle . Bu iş türü için büyük olasılıkla düğmesi düzenleme alanı büyütmek için yakınlaştırma isteyeceksiniz.For this kind of work, you will probably want to zoom to make the button larger in the editing area.

    Not

    Dikdörtgen, farklı şekilde görünebilir (örneğin, yuvarlak köşeler olacak).Your rectangle might look different than the one in the figure (for example, it might have rounded corners).

    İçinde başka bir dikdörtgen bir dikdörtgen oluşturmaHow to create a rectangle inside another rectangle

  5. ContentPresenter en üste Taşı: bu noktada, "Button" metin artık görünür olmaz, mümkündür.Move ContentPresenter to the top: At this point, it is possible that the text "Button" will not be visible any longer. Bu durumda, bunun nedeni, innerRectangle üstünde olan myContentPresenter.If this is so, this is because innerRectangle is on top of the myContentPresenter. Bu sorunu gidermek için sürükleyin myContentPresenter aşağıda innerRectangle.To fix this, drag myContentPresenter below innerRectangle. Dikdörtgenler yeniden konumlandırma ve myContentPresenter aşağıdakine benzer şekilde.Reposition rectangles and myContentPresenter to look similar to below.

    Not

    Alternatif olarak, aynı zamanda yerleştirebilir myContentPresenter tıklayıp tuşuna basarak üstte İleri Gönder.Alternatively, you can also position myContentPresenter on top by right-clicking it and pressing Send Forward.

    Başka bir düğme üzerine bir düğme nasıl taşırımHow to move one button on top of another button

  6. İnnerRectangle görünümünü değiştirme: ayarlamak RadiusX, RadiusY, ve StrokeThickness 20 değerleri.Change the look of innerRectangle: Set the RadiusX, RadiusY, and StrokeThickness values to 20. İn addition, ayarlamak Fill arka planını kullanarak özel ifade "{TemplateBinding arka plan}" şablonu için) ve Stroke "saydam".In addition, set the Fill to the background of the template using the custom expression "{TemplateBinding Background}" ) and set Stroke to "transparent". Dikkat ayarlarını Fill ve Stroke , innerRectangle olanlar için karşıtı olduğu outerRectangle.Notice that the settings for the Fill and Stroke of innerRectangle are the opposite of those for outerRectangle.

    Bir dikdörtgen görünümünü değiştirmek nasılHow to change the appearance of a rectangle

  7. Üst kısımdaki cam katman ekleyin: düğmenin görünümünü özelleştirme son parçası üstte cam katman eklemektir.Add a glass layer on top: The final piece of customizing the look of the button is to add a glass layer on top. Bu cam katman üçüncü bir dikdörtgen oluşur.This glass layer consists of a third rectangle. Cam tüm düğmenin ele alınacaktır, cam dikdörtgeni içinde boyutları benzer çünkü outerRectangle.Because the glass will cover the entire button, the glass rectangle is similar in dimensions to the outerRectangle. Bu nedenle, bir kopyasını yaparak dikdörtgen oluşturma outerRectangle.Therefore, create the rectangle by simply making a copy of the outerRectangle. Vurgulama outerRectangle bir kopyasını oluşturmak için CTRL + C ve CTRL + V kullanın.Highlight outerRectangle and use CTRL+C and CTRL+V to make a copy. Bu yeni dikdörtgen "glassCube" olarak adlandırın.Name this new rectangle "glassCube".

  8. Gerekirse glassCube yeniden konumlandırmak: varsa glassCube olan tüm düğmesini kullanabilirsiniz, böylece henüz konumlandırılmış, istediğiniz konuma sürükleyin.Reposition glassCube if necessary: If glassCube is not already positioned so that it covers the entire button, drag it into position.

  9. GlassCube outerRectangle değerinden biraz daha farklı bir şekil vermek: özelliklerini değiştirmek glassCube.Give glassCube a slightly different shape than outerRectangle: Change the properties of glassCube. Değiştirerek başlayın RadiusX ve RadiusY 10 özellikleri ve StrokeThickness 2.Start off by changing the RadiusX and RadiusY properties to 10 and the StrokeThickness to 2.

    Görünüm ayarlarını glassCubeThe appearance settings for glassCube

  10. Cam gibi ara glassCube olun: ayarlamak Fill % 75 opak ve rengini beyaz ve saydam arasında 6 yaklaşık olarak eşit diğerleri doğrusal gradyan aralıklı aralıkları kullanarak glassy arama konumu.Make glassCube look like glass: Set the Fill to a glassy look by using a linear gradient that is 75% opaque and alternates between the color White and Transparent over 6 approximately evenly spaced intervals. Gradyan duraklarının ayarlamak gerekenler budur:This is what to set the gradient stops to:

    • Gradyan durağını 1: Alfa değeri % 75'ini beyazGradient Stop 1: White with Alpha value of 75%

    • Gradyan Durdur 2: saydamGradient Stop 2: Transparent

    • Gradyan durağını 3: Alfa değeri % 75'ini beyazGradient Stop 3: White with Alpha value of 75%

    • Gradyan Durdur 4: saydamGradient Stop 4: Transparent

    • Gradyan durağını 5: Alfa değeri % 75'ini beyazGradient Stop 5: White with Alpha value of 75%

    • Gradyan Durdur 6: saydamGradient Stop 6: Transparent

    Bu, "dalgalı" Acil Durum görünümünü oluşturur.This creates a "wavy" glass look.

    Cam gibi görünen bir dikdörtgenA rectangle that looks like glass

  11. Cam katmanı Gizle: glassy katman nasıl göründüğüne bakın, kısımlarda görünümü bölmesinde , özellikler panelini ve için %0 gizlemek için saydamlığı ayarlayın.Hide the glass layer: Now that you see what the glassy layer looks like, go into the Appearance pane of the Properties panel and set the Opacity to 0% to hide it. Bölümlerde önceden, özellik Tetikleyicileri ve olayları göstermek ve cam katman işlemek için kullanacağız.In the sections ahead, we'll use property triggers and events to show and manipulate the glass layer.

    Cam dikdörtgeni gizlemeHow to hide the glass rectangle

Düğme davranışını özelleştirmeCustomize the Button Behavior

Bu noktada, düğmeyi sunumu şablonunu düzenleyerek özelleştirdiğiniz ancak düğme tipik düğmeleri yapın (örneğin, fare bekletme temel görünümünü değiştirme, odak alma ve tıklayarak.) kullanıcı eylemlerine tepki vermez Sonraki iki yordamlar nasıl oluşturacağınızı bu özel düğme gibi davranışları gösterir.At this point, you have customized the presentation of the button by editing its template, but the button does not react to user actions as typical buttons do (for example, changing appearance upon mouse-over, receiving focus, and clicking.) The next two procedures show how to build behaviors like these into the custom button. Biz basit özellik tetikleyicileri ile başlatın ve ardından olay tetikleyicilerini ve animasyonlar ekleyebilirsiniz.We'll start with simple property triggers, and then add event triggers and animations.

Özellik tetikleyicileri ayarlamak içinTo set property triggers

  1. Yeni bir özellik tetikleyicisi oluşturma: ile glassCube seçili tıklayın + özelliği içinde Tetikleyicileri paneli (sonraki adım aşağıdaki şekle bakın).Create a new property trigger: With glassCube selected, click + Property in the Triggers panel (see the figure that follows the next step). Bu, varsayılan özellik tetikleyicisi ile bir özellik tetikleyicisi oluşturur.This creates a property trigger with a default property trigger.

  2. Tetik tarafından kullanılan özellik IsMouseOver olun: özelliğini değiştirmek IsMouseOver.Make IsMouseOver the property used by the trigger: Change the property to IsMouseOver. Bu özellik tetikleyicisi etkinleştirin sağlar IsMouseOver özelliği true (ne zaman kullanıcı işaret fare düğmesi).This makes the property trigger activate when the IsMouseOver property is true (when the user points to the button with the mouse).

    Bir tetikleyici bir özellik ayarlamaHow to set a trigger on a property

  3. IsMouseOver tetikler opaklık glassCube için % 100: dikkat tetikleyici kayıt açıktır (önceki şekilde bakın).IsMouseOver triggers opacity of 100% for glassCube: Notice that the Trigger recording is on (see the preceding figure). Özellik değerleri, yaptığınız değişiklikleri buna glassCube olduğunda gerçekleşir, bir eylem kaydı açıkken olacak IsMouseOver olduğu true.This means that any changes you make to the property values of glassCube while recording is on will become an action that takes place when IsMouseOver is true. Kayıt sırasında değiştirme Opacity , glassCube % 100.While recording, change the Opacity of glassCube to 100%.

    Bir düğme opaklığını ayarlamaHow to set the opacity of a button

    İlk özellik tetikleyicinize oluşturdunuz.You have now created your first property trigger. Dikkat Tetikleyicileri paneli düzenleyiciyi kaydettiği Opacity % 100 olarak değiştiriliyor.Notice that the Triggers panel of the editor has recorded the Opacity being changed to 100%.

    "Tetikleyici" paneliThe "Triggers" panel

    Uygulamayı çalıştırmak ve fareyi üzerine ve kapama düğmesi taşımak için F5 tuşuna basın.Press F5 to run the application, and move the mouse pointer over and off the button. Görünür cam katman görmelisiniz, düğmenin fare bekletme ve de işaretçi çıktığında kaybolur.You should see the glass layer appear when you mouse-over the button and disappear when the pointer leaves.

  4. IsMouseOver Tetikleyicileri vuruş değeri değişikliği: şimdi başka bazı eylemler ilişkilendirmek IsMouseOver tetikleyici.IsMouseOver triggers stroke value change: Let's associate some other actions with the IsMouseOver trigger. Kaydı devam ederken seçiminizden geçiş glassCube için outerRectangle.While recording continues, switch your selection from glassCube to outerRectangle. Ardından Stroke , outerRectangle özel ifade, "{DynamicResource {x: Static SystemColors.HighlightBrushKey}}".Then set the Stroke of outerRectangle to the custom expression of "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". Bu ayarlar Stroke tipik düğmeler tarafından kullanılan rengi vurgulayın.This sets the Stroke to the typical highlight color used by buttons. Düğmenin üzerine fare imlecinizle etkisini görmek için F5 tuşuna basın.Press F5 to see the effect when you mouse over the button.

    Vurgu renginin vuruş ayarlamaHow to set the stroke to the highlight color

  5. IsMouseOver tetikler bulanık metin: şimdi bir daha fazla eyleme ilişkilendirmek IsMouseOver özellik tetikleyicisi.IsMouseOver triggers blurry text: Let's associate one more action to the IsMouseOver property trigger. Düğme içeriğini cam göründüğünde biraz bulanık olun.Make the content of the button appear a little blurry when the glass appears over it. Bunu yapmak için biz Bulanıklaştırma uygulayabilirsiniz BitmapEffect için ContentPresenter (myContentPresenter).To do this, we can apply a blur BitmapEffect to the ContentPresenter (myContentPresenter).

    Bir düğme içeriğini BulanıklaştırmaHow to blur the content of a button

    Not

    Döndürülecek özellikler panelini BT'nin için geri arama yaptığınız önce olan BitmapEffect, metni temizleyin arama kutusuna.To return the Properties panel back to what it was before you did the search for BitmapEffect, clear the text from the Search box.

    Bu noktada, biz bir özellik tetikleyicisi birkaç ilişkili eylem fare işaretçisi girer ve düğme alanının bırakır vurgulama davranışı oluşturmak için kullanılan.At this point, we have used a property trigger with several associated actions to create highlighting behavior for when the mouse pointer enters and leaves the button area. Başka bir tipik bir düğmenin odağa sahip olduğunda vurgulamak için bir davranıştır (gibi tıklandığı sonra).Another typical behavior for a button is to highlight when it has focus (as after it is clicked). Benzer bir davranış için başka bir özellik tetikleyicisi ekleyerek ekleyebiliriz IsFocused özelliği.We can add such behavior by adding another property trigger for the IsFocused property.

  6. Özellik tetikleyicisi için IsFocused oluşturma: olarak için aynı yordamı kullanarak IsMouseOver (Bu bölümün ilk adımı bakın), başka bir özellik tetikleyicisi için oluşturma IsFocused özelliği.Create property trigger for IsFocused: Using the same procedure as for IsMouseOver (see the first step of this section), create another property trigger for the IsFocused property. Sırada tetikleyici kayıt açıktır, aşağıdaki eylemleri tetikleyiciyi ekleyin:While Trigger recording is on, add the following actions to the trigger:

    • glassCube alır bir Opacity % 100.glassCube gets an Opacity of 100%.

    • outerRectangle alır bir Stroke özel ifade değeri, "{DynamicResource {x: Static SystemColors.HighlightBrushKey}}".outerRectangle gets a Stroke custom expression value of "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

Bu kılavuzdaki son adım olarak düğmeye animasyon ekleyeceğiz.As the final step in this walkthrough, we will add animations to the button. Animasyonlarına olaylar tarafından tetiklenen — özellikle MouseEnter ve Click olayları.These animations will be triggered by events—specifically, the MouseEnter and Click events.

Olay tetikleyicileri kullanma ve animasyon, etkileşim eklemek içinTo use event triggers and animations to add interactivity

  1. MouseEnter olay tetikleyicisi oluşturmak: seçin ve yeni bir olay tetikleyicisi Ekle MouseEnter tetikleyiciyi kullanan etkinlik olarak.Create a MouseEnter Event Trigger: Add a new event trigger and select MouseEnter as the event to use in the trigger.

    MouseEnter olay tetikleyicisi oluşturmak nasılHow to create a MouseEnter event trigger

  2. Bir animasyon zaman çizelgesini oluşturun: ardından, bir animasyon zaman çizelgesi için ilişkilendirme MouseEnter olay.Create an animation timeline: Next, associate an animation timeline to the MouseEnter event.

    Bir olay için bir animasyon zaman çizelgesini eklemeHow to add an animation timeline to an event

    Tuşuna bastıktan sonra Tamam yeni bir zaman çizelgesi oluşturmak için bir zaman çizelgesi paneli görünür ve "zaman çizelgesi kaydı açıktır" tasarım panelinde görünür.After you press OK to create a new timeline, a Timeline Panel appears and "Timeline recording is on" is visible in the design panel. Başka bir deyişle, biz özellik değişiklikleri (Canlandır özellik değişiklikleri) zaman çizelgesinde kaydı başlatın.This means we can start recording property changes in the timeline (animate property changes).

    Not

    Pencere ve/veya görüntüyü görmek için paneller yeniden boyutlandırmak gerekebilir.You may need to resize your window and/or panels to see the display.

    Zaman Çizelgesi paneliThe timeline panel

  3. Bir ana kare oluşturma: bir animasyon oluşturmak için animasyon, iki veya daha fazla ana kareleri zaman çizelgesi üzerinde bu ana kareleri oluşturun, ayarlanan özellik değerleri arasında enterpolasyon için animasyon istediğiniz nesneyi seçin.Create a keyframe: To create an animation, select the object you want to animate, create two or more keyframes on the timeline, and for those keyframes, set the property values you want the animation to interpolate between. Aşağıdaki şekilde, bir ana kare oluşturulmasını size yol gösterir.The following figure guides you through the creation of a keyframe.

    Bir ana kare oluşturmaHow to create a keyframe

  4. Bu ana kare, glassCube Daralt: seçili ikinci ana kare ile boyutunu küçültmek glassCube tam boyutlu kullanarak % 90 boyutu dönüştürme.Shrink glassCube at this keyframe: With the second keyframe selected, shrink the size of the glassCube to 90% of its full size using the Size Transform.

    Düğmenin boyutunu küçültmeHow to shrink the size of a button

    Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the application. Fare işaretçisi düğmenin üzerine taşıyın.Move the mouse pointer over the button. Cam katman düğmenin üzerine küçüldüğünü dikkat edin.Notice that the glass layer shrinks on top of the button.

  5. Başka bir olay tetikleyicisi oluşturmak ve farklı bir animasyon ilişkilendirin: tek daha fazla animasyon ekleyelim.Create another Event Trigger and associate a different animation with it: Let's add one more animation. İçin önceki olay tetikleyicisi animasyon oluşturmak için kullanılan benzer bir yordamı kullanın:Use a similar procedure to what you used to create the previous event trigger animation:

    1. Kullanarak yeni bir olay tetikleyicisi oluşturmak Click olay.Create a new event trigger using the Click event.

    2. Yeni bir zaman çizelgesi ile ilişkilendirmek Click olay.Associate a new timeline with the Click event.

    Yeni bir zaman çizelgesi oluşturmaHow to create a new timeline

    1. Bu zaman çizelgesi için iki ana kare, 0.0 saniye, diğeri ikinci 0,3 saniye oluşturun.For this timeline, create two keyframes, one at 0.0 seconds and the second one at 0.3 seconds.

    2. İle vurgulanmış 0,3 saniye, ayarlanan dönüştürme açı döndürme 360 derece için.With the keyframe at 0.3 seconds highlighted, set the Rotate Transform Angle to 360 degrees.

    Döndürme dönüşümü oluşturmak nasılHow to create a rotate transform

    1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the application. Düğmesine tıklayın.Click the button. Cam katman etrafında dönerek dikkat edin.Notice that the glass layer spins around.

SonuçConclusion

Özelleştirilmiş bir düğme tamamladınız.You have completed a customized button. Bu uygulamadaki tüm düğmelerin uygulandığı bir düğme şablonunu kullanarak yaptığınız.You did this using a button template that was applied to all buttons in the application. Şablon düzenleme modunda bırakırsanız (Aşağıdaki şekle bakın) ve daha fazla düğme oluşturmak, arayın ve özel düğmenizin gibi yerine varsayılan düğme gibi davranan görürsünüz.If you leave the template editing mode (see the following figure) and create more buttons, you will see that they look and behave like your custom button rather than like the default button.

Özel düğme şablonununThe custom button template

Aynı şablonu kullanan birden çok düğmeleriMultiple buttons that use the same template

Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the application. Bu düğmeleri tıklatabilir ve bunların tümü aynı nasıl davranacağını dikkat edin.Click the buttons and notice how they all behave the same.

Şablonu özelleştirme, ancak ayarladığınız unutmayın Fill özelliği innerRectangle ve Stroke özelliği outerRectangle ({şablon arka plan TemplateBinding arka}).Remember that while you were customizing the template, you set the Fill property of innerRectangle and the Stroke property outerRectangle to the template background ({TemplateBinding Background}). Düğmelerin, arka plan rengini ayarladığınızda, bu nedenle, bu ilgili özellikler için ayarladığınız arka plan kullanılır.Because of this, when you set the background color of the individual buttons, the background you set will be used for those respective properties. Arka planları artık değiştirmeyi deneyin.Try changing the backgrounds now. Aşağıdaki resimde, farklı gradyanlar kullanılır.In the following figure, different gradients are used. Bu nedenle, bir şablon genel özelleştirme düğmesi gibi denetimleri için kullanışlı olsa da, denetim şablonları ile hala birbirinden farklı aramak için değiştirilebilir.Therefore, although a template is useful for overall customization of controls like button, controls with templates can still be modified to look different from each other.

Aynı şablonun farklı konum düğmeleriyleButtons with the same template that look diferent

Conclusion, bir düğme şablonunu özelleştirme sürecinde, Microsoft Expression Blend içinde aşağıdakileri gerçekleştirmeyi öğrendiniz:In conclusion, in the process of customizing a button template you have learned how to do the following in Microsoft Expression Blend:

  • Bir denetimin görünümünü özelleştirebilirsiniz.Customize the look of a control.

  • Özellik tetikleyicileri ayarlayın.Set property triggers. Özellik tetikleyicileri, çoğu nesneler üzerinde tam denetim kullanılabildiğinden çok yararlı olur.Property triggers are very useful because they can be used on most objects, not just controls.

  • Olay tetikleyicileri ayarlayın.Set event triggers. Çoğu nesneler üzerinde tam denetim kullanılabildiğinden olay tetikleyicilerini çok yararlı olur.Event triggers are very useful because they can be used on most objects, not just controls.

  • Animasyonlar oluşturun.Create animations.

  • Çeşitli: gradyan, oluşturun, BitmapEffects ekleyin, dönüşümler kullanma ve nesnelerin temel özelliklerini ayarlayın.Miscellaneous: create gradients, add BitmapEffects, use transforms, and set basic properties of objects.

Ayrıca Bkz.See Also

XAML Kullanarak bir Düğme OluşturmaCreate a Button by Using XAML
Stil ve Şablon OluşturmaStyling and Templating
Animasyona Genel bakışAnimation Overview
Düz Renkler ve Gradyanlar ile Boyamaya Genel BakışPainting with Solid Colors and Gradients Overview
Bit Eşlem Etkilerine Genel BakışBitmap Effects Overview