Så skapar du en intressant spegeleffekt av ett helt WPF-gränssnitt i Expression Blend
En av de mer imponerande effekterna som går att åstadkomma i WPF-applikationer är att skapa en reflektion av ett helt gränssnitt genom att "måla" det spegelvänt på en halvt genomskinlig blank yta - under själva användargränssnittet. Det här ger en 3D-liknande effekt som jag tycker tillför ett djup och ett skönt perspektiv i bilden.
Den här effekten går att skapa väldigt enkelt med hjälp av den 'Brush'-teknik som finns tillgänglig i WPF. En Brush kan användas för att fylla element och objekt med enkla färger, bilder, gradienter och som vi strax ska se - även med mer komplexa mönster - till och med hela speglingar av andra kontroller och objekt kan skapas.
En Brush i WPF kan vara av någon av nedanstånde typer, vilka alla ärver från basklassen System.Windows.Media.Brush:
| Typ |
Beskrivning | |
|---|---|---|
| Solid color brush |  |
Brush som består av en enskild färg. |
| Linear gradient brush |   |
Brush som består av en linjär gradient. |
| Radial gradient brush |   |
Brush som består av en cirkulär gradient. |
| Image brush |    |
Brush skapad från en bild. Här visas, från vänster till höger: ursprunglig image brush, image brush som staplats, och en image brush som vridits ett varv. |
| Drawing brush |    |
Brush skapad utifrån en vektor-grafisk illustration. Från vänster till höger visas: ursprunglig drawing brush, staplad drawing brush, drawing brush som vridits ett varv. |
| Visual brush |   |
Brush skapad från en enskild kontroll, t.ex. en knapp, eller från en hel hierarki med objekt. Från vänster till höger: den ursprungliga knappen, Visual brush med 'Tile mode' satt till 'Tile' . |
Den variant av Brush som jag tänker använda för ändamålet i det här fallet är den sista i tabellen ovan - Visual Brush. Med hjälp av en Visual Brush kan du skapa en grafisk representation av i princip vad som helst i WPF och sedan applicera det utseendet på något annat objekt - och det är inte bara en statisk ögonblicksbild av objektet som sparas. Din yta som är fylld med en Visual Brush kommer att återspegla det som händer med den kontroll eller det objekt som definierat den från början. Om det t.ex. är en knapp så kommer den yta du fyllt med din Visual Brush att visa knappens beteende, t.ex. när du för muspekaren över den. Oroa dig inte för om det låter krångligt - detta är superenkelt att få till!
Om du själv vill testa laddar du hem den senaste test-versionen av Expression Blend 2(May Preview), jag tänker utgå från ett av de demo-projekt som följer med installationen.
Demo-applikationen som jag utgår från heter "Color Swatch" och finns att välja i den välkomstbild som du får upp när du startar Blend (om den inte visas - gå in under "Help" och välj "Welcome Screen").
Till att börja med kan du testa applikationen i originalskick genom att köra F5 för att undersöka vad den gör.
Stegen som jag gick igenom för att skapa effekten var följande:
- Jag la den root-Grid som innehöll originalversionen av gränssnittet inom en ny Canvas som jag döpte till CanvasRoot - detta för att kunna positionera och skala om det ursprungliga gränssnittet. Jag döpte även om root-Grid:en till ColorSwatch.
- Sedan skalade jag ner hela min ColorSwatch-grid till 0,5 X och 0,5 Y under Transform -> Scale och flyttade den till översta vänstra hörnet.
- Därefter markerade jag ColorSwatch-grid:en och valde Tools -> Make Brush Resource -> Make Visual Brush Resource. Jag lät de förvalda värdena vara och tryckte OK. Detta skapar en ny Visual Brush med namnet 'VisualBrush1'.
- Sedan tog jag en rektangel, drog ut den under min ColorSwatch-grid, gick in på egenskaperna för min rektangel, såg till att Fill var markerat under Brushes och valde sedan Brush resources -> Local Brush Resources -> VisualBrush1 .
Resultatet är att en kopia av gränssnittet (min rektangel fylld med hjälp av VisualBrush1) visas under originalet:
- Jag markerade sedan den fyllda rektangeln, gjorde en vertikal flip genom Transform - Flip - Flip Y Axis. Därefter markerade jag Opacity mask under brushes och valde sedan Gradient mask samt satte Alfa-värdet för min mask till 0, vilket skapar en gradient maskning med genomskinlighet. Jag vände även på riktningen av gradienten genom verktyget Brush Transform (B) i verktygspaletten så att den går uppifrån och ned:
- Klart! När jag nu kör projektet visas en reflektion av det övre gränssnittet i min nedre rektangel:
Som ett överkursexperiment så testade jag även att lägga på min VisualBrush1 på ett 3D-objekt, det gick alldeles utmärkt :-)
Källkoden för projektet finns tillgänglig här.