Przewodnik: tworzenie przycisku przy użyciu programu Microsoft Expression Blend

Ten przewodnik przeprowadzi Cię przez proces tworzenia dostosowanego przycisku WPF przy użyciu programu Microsoft Expression Blend.

Ważne

Program Microsoft Expression Blend działa przez wygenerowanie języka XAML (Extensible Application Markup Language), który jest następnie kompilowany w celu tworzenia programu wykonywalnego. Jeśli wolisz pracować bezpośrednio z językiem XAML, istnieje inny przewodnik, który tworzy tę samą aplikację, co ta, korzystając z języka XAML z programem Visual Studio, a nie aplikacją Blend. Aby uzyskać więcej informacji, zobacz Create a Button by Using XAML (Tworzenie przycisku przy użyciu języka XAML ).

Na poniższej ilustracji przedstawiono dostosowany przycisk, który zostanie utworzony.

Konwertowanie kształtu na przycisk

W pierwszej części tego przewodnika utworzysz niestandardowy wygląd przycisku niestandardowego. W tym celu należy najpierw przekonwertować prostokąt na przycisk. Następnie dodajesz dodatkowe kształty do szablonu przycisku, tworząc bardziej skomplikowanie wyglądający przycisk. Dlaczego nie zaczynać się od zwykłego przycisku i dostosowywać go? Ponieważ przycisk ma wbudowaną funkcjonalność, której nie potrzebujesz; w przypadku przycisków niestandardowych łatwiej jest rozpocząć od prostokąta.

Aby utworzyć nowy projekt w programie Expression Blend

1. Uruchom Expression Blend. (Kliknij przycisk Start, wskaż Wszystkie programy, wskaż Microsoft Expression, a następnie kliknij program Microsoft Expression Blend).

2. Maksymalizuj aplikację w razie potrzeby.

3. W menu Plik kliknij pozycję Nowy projekt.

4. Wybierz pozycję Aplikacja Standardowa (.exe).

5. Nadaj projektowi CustomButton nazwę i naciśnij przycisk OK.

W tym momencie masz pusty projekt WPF. Możesz nacisnąć F5, aby uruchomić aplikację. Jak można się spodziewać, aplikacja składa się tylko z pustego okna. Następnie utworzysz zaokrąglony prostokąt i przekonwertujesz go na przycisk.

Aby przekonwertować prostokąt na przycisk

1. Ustaw właściwość Tło okna na czarne: Wybierz okno, kliknij kartę Właściwości i ustaw Background właściwość na Black.

   

2. Rysuj prostokąt w przybliżeniu rozmiar przycisku w oknie: Wybierz narzędzie prostokąta na panelu narzędzi po lewej stronie i przeciągnij prostokąt do okna.

   

3. Zaokrąglić rogi prostokąta: Możesz przeciągnąć punkty kontrolne prostokąta lub bezpośrednio ustawić właściwości RadiusX oraz RadiusY. Ustaw wartości RadiusX i RadiusY na 20.

   

4. Zmień prostokąt na przycisk: Wybierz prostokąt. W menu Narzędzia kliknij przycisk Utwórz.

   

5. Określ zakres stylu/szablonu: Zostanie wyświetlone okno dialogowe podobne do poniższego.

   

   W polu Nazwa zasobu (klucz) wybierz pozycję Zastosuj do wszystkich. Spowoduje to zastosowanie wynikowego stylu i szablonu przycisku do wszystkich obiektów, które są przyciskami. W obszarze Zdefiniuj w wybierz pozycję Aplikacja. Spowoduje to, że wynikowy szablon stylu i przycisku będzie miał zakres w całej aplikacji. Po ustawieniu wartości w tych dwóch polach, styl i szablon przycisków mają zastosowanie do wszystkich przycisków w całej aplikacji oraz każdy przycisk utworzony w aplikacji będzie domyślnie używał tego szablonu.

Edytowanie szablonu przycisku

Masz teraz prostokąt, który został zmieniony na przycisk. W tej sekcji zmodyfikujesz szablon przycisku i dostosujesz jego wygląd.

Aby edytować szablon przycisku, aby zmienić wygląd przycisku

1. Przejdź do widoku edycji szablonu: Aby jeszcze bardziej dostosować wygląd przycisku, musimy edytować szablon przycisku. Ten szablon został utworzony podczas konwertowania prostokąta na przycisk. Aby edytować szablon przycisku, kliknij prawym przyciskiem myszy przycisk i wybierz polecenie Edytuj części sterujące (szablon), a następnie edytuj szablon.

   

   W edytorze szablonów zauważ, że przycisk jest teraz podzielony na Rectangle i ContentPresenter. Element ContentPresenter służy do prezentowania zawartości w przycisku (na przykład ciągu "Przycisk"). Zarówno prostokąt, jak i ContentPresenter są ułożone wewnątrz obiektu Grid.

   

2. Zmień nazwy składników szablonu: Kliknij prawym przyciskiem myszy prostokąt w spisie szablonów, zmień nazwę z "[Prostokąt]" na "outerRectangle", a następnie zmień Rectangle wartość "[ContentPresenter]" na "myContentPresenter".

   

3. Zmień prostokąt tak, aby był pusty wewnątrz (tak jak pączek): Wybierz outerRectangle i ustaw na Fill "Przezroczysta" oraz StrokeThickness 5.

   

   Następnie ustaw Stroke na kolor odpowiedni dla szablonu. Aby to zrobić, kliknij małe białe pole obok Pociągnięcie, wybierz CustomExpression i wpisz ciąg "{TemplateBinding Background}" w oknie dialogowym.

   

4. Utwórz prostokąt wewnętrzny: Teraz utwórz kolejny prostokąt (nadaj mu nazwę "innerRectangle") i umieść go symetrycznie na środku zewnętrznegoRektangle . W przypadku tego rodzaju pracy prawdopodobnie zechcesz powiększyć przycisk, aby był większy w obszarze edycji.

   Uwaga / Notatka

   Prostokąt może wyglądać inaczej niż ten na rysunku (na przykład może mieć zaokrąglone rogi).

   

5. Przenieś element ContentPresenter na górę: W tym momencie istnieje możliwość, że tekst "Przycisk" nie będzie już widoczny. Jeśli tak jest, jest to spowodowane tym, że innerRectangle znajduje się na szczycie myContentPresenter. Aby rozwiązać ten problem, przeciągnij element myContentPresenter poniżej elementu innerRectangle. Zmień położenie prostokątów i myContentPresenter , aby wyglądać podobnie jak poniżej.

   Uwaga / Notatka

   Alternatywnie możesz również ustawić myContentPresenter na górze, klikając go prawym przyciskiem myszy i naciskając polecenie Przenieś do przodu.

   

6. Zmień wygląd elementu innerRectangle:RadiusXUstaw wartości , RadiusYi StrokeThickness na 20. Ponadto ustaw Fill na tło szablonu przy użyciu wyrażenia niestandardowego "{TemplateBinding Background}" i ustaw Stroke na wartość "transparent". Zwróć uwagę, że ustawienia dla Fill i StrokeinnerRectangle są przeciwieństwem tych dla outerRectangle.

   

7. Dodaj warstwę szkła na górze: Ostatnim elementem dostosowywania wyglądu przycisku jest dodanie szklanej warstwy na górze. Ta warstwa szkła składa się z trzeciego prostokąta. Ponieważ szkło będzie pokrywać cały przycisk, szklany prostokąt ma podobne wymiary do zewnętrznego prostokąta. W związku z tym utwórz prostokąt, po prostu tworząc kopię zewnętrznego prostokąta. Wyróżnij zewnętrzneRectangle i użyj CTRL+C i CTRL+V, aby utworzyć kopię. Nadaj temu nowemu prostokątowi nazwę "glassCube".

8. Zmień położenie glassCube w razie potrzeby: Jeśli glassCube nie jest jeszcze umieszczony tak, aby zakrywał cały przycisk, przeciągnij go w położenie.

9. Nadaj glassCube nieco inny kształt od outerRectangle: Zmień właściwości glassCube. Rozpocznij od zmiany właściwości RadiusX i RadiusY na 10 oraz StrokeThickness na 2.

   

10. Zrób glassCube wyglądać jak szkło:Fill Ustaw na szklany wygląd przy użyciu gradientu liniowego, który jest 75% nieprzezroczyste i alternatywne między kolorem Biały i Przezroczysty przez około 6 równomiernie rozmieszczonych interwałów. Oto, jak ustawić punkty zatrzymania gradientu:

    • Stop gradientu 1: biały z wartością alfa 75%

    • Punkt gradientu 2: przezroczystość

    • Stop gradientu 3: biały z wartością alfa 75%

    • Przystanek gradientu 4: przezroczysty

    • Przystanek gradientu 5: biały z wartością alfa równą 75%

    • Punkt gradientu 6: przezroczysty

    Tworzy to szklany wygląd o pofalowanej fakturze.

    

11. Ukryj warstwę szkła: Teraz, gdy zobaczysz, jak wygląda warstwa szkła, przejdź do okienka Wyglądpanelu Właściwości i ustaw przezroczystość na 0%, aby ją ukryć. W kolejnych sekcjach użyjemy wyzwalaczy właściwości i zdarzeń, aby pokazać i manipulować warstwą szkła.

    

Dostosowywanie zachowania przycisku

W tym momencie dostosowano prezentację przycisku, edytując jego szablon, ale przycisk nie reaguje na akcje użytkownika, jak to zwykle robią przyciski (na przykład zmiana wyglądu po najechaniu myszą, otrzymywanie fokusu i klikanie). W następnych dwóch procedurach pokazano, jak dodać tego typu zachowania w przycisku niestandardowym. Zaczniemy od prostych wyzwalaczy właściwości, a następnie dodamy wyzwalacze zdarzeń i animacje.

Aby ustawić wyzwalacze właściwości

1. Utwórz nowy wyzwalacz właściwości: Z wybraną opcją glassCube kliknij przycisk + Właściwość w panelu Wyzwalacze (zobacz rysunek, który następuje po następnym kroku). Spowoduje to utworzenie wyzwalacza właściwości z domyślnym wyzwalaczem właściwości.

2. Make IsMouseOver właściwość używana przez wyzwalacz: Zmień właściwość na IsMouseOver. Powoduje to, że wyzwalacz właściwości jest aktywowany, gdy IsMouseOver właściwość jest true (gdy użytkownik wskazuje przycisk kursorem myszy).

   

3. IsMouseOver wyzwala nieprzezroczystość 100% dla glassCube: Zwróć uwagę, że nagranie wyzwalacza jest włączone (zobacz poprzedni rysunek). Oznacza to, że wszelkie zmiany wprowadzone w wartościach właściwości glassCube podczas rejestrowania staną się akcją, która ma miejsce, gdy IsMouseOver ma truewartość . Podczas nagrywania zmień Opacity w glassCube na 100%.

   

   Teraz stworzyłeś swój pierwszy wyzwalacz właściwości. Zwróć uwagę, że panel Triggersów edytora zarejestrował zmianę wartości Opacity na 100%.

   

   Naciśnij F5, aby uruchomić aplikację, i przesuń wskaźnik myszy na i z przycisku. Kiedy najedziesz kursorem na przycisk, powinna pojawić się warstwa szkła i znikać, gdy kursor odsunie się.

4. IsMouseOver wyzwala zmianę wartości pociągnięcia: Skojarzmy inne akcje z wyzwalaczem IsMouseOver . Podczas nagrywania, przełącz zaznaczenie z szklanegoSześcianu na zewnętrznyProstokąt. Następnie ustaw Stroke właściwość outerRectangle na wyrażenie niestandardowe "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". Spowoduje to ustawienie Stroke na typowy kolor wyróżnienia używany przez przyciski. Naciśnij F5, aby zobaczyć efekt po kliknięciu myszy nad przyciskiem.

   

5. IsMouseOver wyzwala rozmyty tekst: Skojarzmy jeszcze jedną akcję z wyzwalaczem IsMouseOver właściwości. Sprawić, aby zawartość przycisku była nieco rozmyta, gdy na nim pojawi się szkło. W tym celu możemy zastosować rozmycie BitmapEffect do elementu ContentPresenter (myContentPresenter).

   

   Uwaga / Notatka

   Aby zwrócić panel Właściwości z powrotem do tego, co było przed wyszukiwaniem BitmapEffect, wyczyść tekst w polu Wyszukiwania.

   W tym momencie użyliśmy wyzwalacza właściwości z kilkoma skojarzonymi akcjami, aby utworzyć zachowanie wyróżniania, gdy wskaźnik myszy przechodzi i opuszcza obszar przycisku. Innym typowym zachowaniem przycisku jest wyróżnienie, gdy ma fokus (tak jak po kliknięciu). Możemy dodać takie zachowanie, dodając kolejny wyzwalacz dla właściwości IsFocused.

6. Utwórz wyzwalacz właściwości dla elementu IsFocused: Korzystając z tej samej procedury co w IsMouseOver przypadku (zobacz pierwszy krok tej sekcji), utwórz inny wyzwalacz właściwości dla IsFocused właściwości. Podczas rejestrowania wyzwalacza dodaj następujące akcje do wyzwalacza:

   • glassCube otrzymuje wartość Opacity 100%.

   • outerRectangle otrzymuje niestandardową Stroke wartość wyrażenia "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

W ostatnim kroku tego przewodnika dodamy animacje do przycisku. Te animacje będą wyzwalane przez zdarzenia — w szczególności zdarzenia MouseEnter i Click .

Aby użyć wyzwalaczy zdarzeń i animacji w celu dodania interakcyjności

1. Utwórz wyzwalacz zdarzenia MouseEnter: Dodaj nowy wyzwalacz zdarzenia i wybierz MouseEnter jako zdarzenie, które ma być używane w wyzwalaczu.

   

2. Utwórz oś czasu animacji: Następnie skojarz oś czasu animacji ze zdarzeniem MouseEnter .

   

   Po naciśnięciu przycisku OK aby utworzyć nową oś czasu, zostanie wyświetlony panel osi czasu, a na panelu projektowym będzie widoczny komunikat "Rejestrowanie osi czasu jest włączone". Oznacza to, że możemy rozpocząć rejestrowanie zmian właściwości na osi czasu (animowanie zmian właściwości).

   Uwaga / Notatka

   Aby wyświetlić ekran, może być konieczne zmianę rozmiaru okna i/lub paneli.

   

3. Utwórz ramkę kluczową: Aby utworzyć animację, wybierz obiekt, który chcesz animować, utwórz co najmniej dwie ramki kluczowe na osi czasu, a dla tych klatek kluczowych ustaw wartości właściwości, które mają być interpolowane między animacją. Na poniższej ilustracji przedstawiono sposób tworzenia ramki kluczy.

   

4. Zmniejsz szkłoCube w tej ramce kluczowej: Po wybraniu drugiej ramki kluczowej zmniejsz rozmiar szkłaCube do 90% pełnego rozmiaru za pomocą przekształcenia rozmiaru.

   

   Naciśnij F5, aby uruchomić aplikację. Najedź wskaźnikiem myszy na przycisk. Zwróć uwagę, że warstwa szkła zmniejsza się na górze przycisku.

5. Utwórz inny wyzwalacz zdarzenia i skojarz z nim inną animację: Dodajmy jeszcze jedną animację. Użyj podobnej procedury do tego, co zostało użyte do utworzenia poprzedniej animacji wyzwalacza zdarzenia:

   1. Utwórz nowy wyzwalacz zdarzenia przy użyciu Click.

   2. Połącz nową oś czasu ze zdarzeniem Click.

      

   3. Na potrzeby tej osi czasu utwórz dwie ramki kluczowe, jedną na 0,0 sekundy, a drugą na 0,3 sekundy.

   4. Po zaznaczeniu klatki kluczowej przy czasie 0,3 sekundy, ustaw kąt obrotu przekształcenia na 360 stopni.

      

   5. Naciśnij F5, aby uruchomić aplikację. Kliknij przycisk . Zwróć uwagę, że warstwa szkła obraca się wokół.

Podsumowanie

Zakończono personalizację przycisku. Zrobiono to przy użyciu szablonu przycisku, który został zastosowany do wszystkich przycisków w aplikacji. Jeśli opuścisz tryb edycji szablonu (zobacz poniższy rysunek) i utworzysz więcej przycisków, zobaczysz, że wyglądają one i zachowują się jak przycisk niestandardowy, a nie jak przycisk domyślny.

Naciśnij F5, aby uruchomić aplikację. Kliknij przyciski i zwróć uwagę, jak wszystkie zachowują się tak samo.

Pamiętaj, że podczas dostosowywania szablonu należy ustawić Fill właściwość innerRectangle i Stroke właściwość outerRectangle na tło szablonu ({TemplateBinding Background}). W związku z tym po ustawieniu koloru tła poszczególnych przycisków ustawione tło będzie używane dla odpowiednich właściwości. Spróbuj teraz zmienić tła. Na poniższej ilustracji używane są różne gradienty. W związku z tym, mimo że szablon jest przydatny do ogólnego dostosowywania kontrolek, takich jak przycisk, kontrolki z szablonami można modyfikować tak, aby wyglądały inaczej od siebie.

Podsumowując, w procesie dostosowywania szablonu przycisku przedstawiono sposób wykonywania następujących czynności w programie Microsoft Expression Blend:

• Dostosuj wygląd kontrolki.

• Ustaw wyzwalacze właściwości. Wyzwalacze właściwości są bardzo przydatne, ponieważ mogą być używane w większości obiektów, a nie tylko kontrolek.

• Ustaw wyzwalacze zdarzeń. Wyzwalacze zdarzeń są bardzo przydatne, ponieważ mogą być używane w większości obiektów, a nie tylko kontrolek.

• Tworzenie animacji.

• Różne: tworzenie gradientów, dodawanie map bitowych, używanie przekształceń i ustawianie podstawowych właściwości obiektów.

Zobacz także

• Tworzenie przycisku przy użyciu XAML
• Stylizowanie i Tworzenie Szablonów
• Animacja — omówienie
• Malowanie za pomocą kolorów stałych i gradientów — omówienie
• Efekty bitmapowe: omówienie