Nagy fába vágtam a fejszém, amikor szerettem volna valami igazán szépet alkotni Silverlightban, ugyanis a dizájnhoz egyáltalán nem értek. Valahonnan viszont rémlett, hogy az Expression Design tud Photoshopból importálni és XAML-be exportálni, így letöltöttem egy pofás iPhone stílusú gombot a netről .psd formátumban és megpróbáltam .xaml-lé alakítani. Nem sikerült :(

Szerencsétlen Expression Designnak volt pofája PNG fájlként kimenteni, majd a XAML-be egy Image taget tenni. Noooooormális?

Így nem volt más hátra, nekem kellett rajzolnom. Szerencsére Buck Wilson oldalán találtam egy Photoshop tutorialt, csak ugyanazt kellett Expressionben végigkattintgatnom.

Kezdjük egy keret nélküli, lekerekített négyzettel:

    <Rectangle x:Name="background" Width="180" Height="180" 
               RadiusX="30" RadiusY="30" Fill="#FF0677D5" StrokeThickness="0" />

Az alsó színátmenethez a háttérre rákerült egy ugyanekkora négyzet, átlátszóba tűnő színátmenettel:

    <Rectangle x:Name="underglow" Width="180" Height="180" 
               Stroke="#FF000000" RadiusX="30" RadiusY="30" StrokeThickness="0">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#00FFFFFF" Offset="0.7"/>
                <GradientStop Color="#B2FFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

A felső részhez lemásoltam a négyzetet Blendben, majd rárajzoltam egy elliszist és vettem a két objektum metszetét az Intersect menüpont segítségével. Így lett egy alulról íves, felülről lekerekített Path objektumom, amit színátmenettel tudtam kitölteni:

    <Path x:Name="topglare" Height="93.5" Margin="10,10,10,96" 
          Stretch="Fill" Stroke="#FF000000" StrokeThickness="0" Data="...">
        <Path.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B2FFFFFF"/>
                <GradientStop Color="#4CFFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Path.Fill>
    </Path>

Sokat kísérleteztem a szép árnyékkal, végül több körvonallal sikerült megoldani:

    <Canvas x:Name="shadow" Margin="6, 7, 0, 0">
        <Border CornerRadius="30" Canvas.Left="4" Canvas.Top="4" Width="180" Height="180" 
                BorderThickness="1" BorderBrush="Black" Opacity="0.50" />
        <Border CornerRadius="31" Canvas.Left="3" Canvas.Top="3" Width="182" Height="182" 
                BorderThickness="1" BorderBrush="Black" Opacity="0.40" />
        <Border CornerRadius="32" Canvas.Left="2" Canvas.Top="2" Width="184" Height="184" 
                BorderThickness="1" BorderBrush="Black" Opacity="0.20" />
        <Border CornerRadius="33" Canvas.Left="1" Canvas.Top="1" Width="186" Height="186" 
                BorderThickness="1" BorderBrush="Black" Opacity="0.10" />
    </Canvas>

Ezzel a gomb lényegében elkészült, már csak egy nyilat akartam rárajzolni. Ehhez rajzoltam egy négyzetet, elforgattam 45 fokkal, hogy a sarkán álljon, majd elmetszettem egy négyzettel. Így lett egy csúcsán álló háromszögem, amit csak hozzá kellett ragasztanom egy téglalaphoz és kész is lett a nyilat leíró Path:

    <Path x:Name="arrow" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF0677D5" StrokeThickness="4" 
          Data="..." Height="94.641" Margin="0,25.479,-8.949,79.521" RenderTransformOrigin="0.251,0.202" 
          d:LayoutOverrides="Height" Width="95" HorizontalAlignment="Right">
        <Path.RenderTransform>
            <TransformGroup>
                <RotateTransform Angle="45"/>
                <TranslateTransform X="-43.27" Y="23.665"/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path> 

A nyíl vastag körvonalat kapott (StrokeThickness=”4”) és olyan körvonal színt, mint a háttér. Ha más színű gombot szeretnék, csak a #FF0677D5 színt kell másikra cserélni.

A tapasztalatom az, hogy ha az ember tudja, mit akar rajzolni, egészen jól lehet az Expression Blendben boldogulni. A generált Path objektumokat viszont fehér ember biztosan nem fogja kódból módosítani Visual Studioban.

Akinek épp ilyen gombra van szüksége, letöltheti a teljes XAML fájlt.