Import souboru aplikace Adobe Photoshop do programu Blend

Převod materiálů ze souboru aplikace Photoshop na interaktivní ovládací prvky

Import grafických materiálů z jiných nástrojů pro návrh je důležitá funkce programu Expression Blend. Převod se zachováním vysoké míry věrnosti je klíčem ke zjednodušení pracovního postupu při přechodu od grafického k interaktivnímu návrhu.

V této lekci do programu Blend importujeme vybrané vrstvy ze souboru aplikace Adobe Photoshop. S použitím šablon platformy Silverlight vytvoříme nové šablony, které je možné použít pro převod prvků na funkční ovládací prvky.

01 Vytvoření nového projektu

Spusťte program Blend a použijte položku nabídky File > New Project (Soubor > Nový projekt). Jako typ projektu zvolte Silverlight 3 Application + Website (Aplikace + web platformy Silverlight 3) a projekt pojmenujte ImportPhotoshop (Import z aplikace Photoshop) . Po stisknutí klávesy OK bude projekt vytvořen a na pracovní ploše Artboard bude otevřena hlavní stránka MainPage.

02 Import souboru PSD

Stáhněte a uložte soubor BestLogin.psd. V programu Blend pak použijte nabídku File -> Import Adobe Photoshop (Soubor -> Import z aplikace Adobe Photoshop) a vyberte soubor BestLogin.psd. Otevře se dialogové okno pro import, které zobrazuje náhled importovaného obsahu spolu s nastavitelným seznamem vrstev. Chceme použít pouze prvky obrazovky pro přihlášení, a proto zrušte zaškrtnutí vrstvy Background (Pozadí) a pak proces spusťte kliknutím na tlačítko OK.

03 Podívejte se na výsledky

Po dokončení importu budou vybrané vrstvy aplikace Photoshop zobrazeny na pracovní ploše Artboard jako ovládací prvky platformy Silverlight. Když si ovládací prvky prohlédnete na panelu Objects (Objekty), můžete si také všimnout, že byly umístěny uvnitř objektu typu Canvas (Plátno). To umožňuje zachování absolutní pozice obsahu aplikace Photoshop. Podívejme se na další převedené vlastnosti.

04 Prohlédněte si bloky textu

Když vyberete text „Welcome to the best login ever“ („Vítejte na nejlepší přihlašovací obrazovce na světě“), můžete si všimnout, že proces importu detekoval obsah jako textovou vrstvu aplikace Photoshop a importoval ji jako prvek TextBlock (Blok textu). Povšimněte si také, že byla převedena i skupina písem, nastavení tučného písma a velikost. Pokud vyberete text „username:“ („uživatelské jméno:“) nebo „password:“ („heslo:“), uvidíte, že byl také importován jako blok textu.

05 Prohlédněte si ostatní prvky

Vyberte zakulacený žlutý obdélník a uvidíte, že proces importu ho rozpoznal jako vrstvu s obrazcem aplikace Photoshop a převedl jej na prvek Path (Dráha). Navíc byl rozpoznán styl vrstvy Drop Shadow (Stín) a převeden na efekt DropShadowEffect. Obrázek žárovky byl převeden jako rastrový obrázek a zobrazen s použitím ovládacího prvku Image (Obrázek). Když změníte pozadí rozložení LayoutRoot (Hlavní rozložení) a použijete červenou barvu, uvidíte, že byla zachována i průhlednost obrázku.

06 Od statického obrázku k interaktivnímu

Import grafiky nám poskytl výborný počáteční bod pro budování naší aplikace. Dostali jsme do programu prvky návrhu a teď z nich uděláme interaktivní ovládací prvky. Ovládací prvky platformy Silverlight vycházejí z myšlenky, že „nemají vzhled“. Původní vývojář ovládacího prvku definuje jeho funkce a základní šablonu neboli „vzhled“ ovládacího prvku. Můžeme tento ovládací prvek vzít a šablonu zcela předefinovat, a neztratíme přitom žádné jeho funkce. Vytvoříme teď naše vlastní šablony pro textové pole a zaškrtávací políčko.

07 Přeměna dráhy na textové pole

Vidíme, že materiály ze souboru aplikace Photoshop mají dva stavy pro návrh textového pole. Žlutá dráha se stínem je indikátorem toho, že textové pole je aktivní, přičemž základním stavem ovládacího prvku je šedá dráha. Budeme nyní implementovat návrh stavů s použitím třídy ovládacího prvku TextBox (Textové pole). Klikněte na žlutou dráhu pravým tlačítkem a použijte příkaz Make Into Control (Přeměnit na ovládací prvek). V dialogovém okně vyberte ovládací prvek TextBox (Textové pole) a klikněte na tlačítko OK. Pokud nemůžete najít ovládací prvek TextBox, můžete seznam jednoduše filtrovat zadáním názvu ovládacího prvku do pole Search (Vyhledat).

08 Přidání součástí textového pole

Po stisknutí tlačítka OK v dialogovém okně Make Control (Přeměna na ovládací prvek) se dostáváme do režimu úpravy šablony, což poznáme podle zobrazení navigační nabídky v horní části pracovní plochy Artboard a stromového seznamu Template (Šablona) na panelu Objects (Objekty). Abychom získali funkce třídy TextBox, jako jsou editace a výběr textu, přidáme ovládací prvek, který bude sloužit jako jedna z očekávaných součástí. Na panelu Assets (Materiály) nebo na panelu nástrojů vyberte nástroj ScrollViewer (Posouvatelný prohlížeč) a přidejte ho na mřížku. Nastavte vlastnosti BorderBrush (Štětec ohraničení) na hodnotu No Brush (Žádný), Width (Šířka) na hodnotu Auto, HorizontalAligment (Horizontální zarovnání) na hodnotu Stretch (Roztáhnout) a Margin (Okraj) na hodnoty 8,8,8,8. Klikněte na prvek ScrollViewer pravým tlačítkem a vyberte příkaz Make Into Part of TextBox -> ContentElement (Přeměnit na součást textového pole -> Prvek s obsahem).

09 Definice stavů textového pole

Po definici součásti jsme získali funkční textové pole a můžeme nyní definovat vizuální rozdíly mezi stavy Base (Základní) a Focused (Aktivní). Vyberte dráhu a zkopírujte barvu výplně do schránky. Teď klikněte na nástroj Color EyeDropper (Kapátko barvy) a kliknutím na šedivý zakulacený obdélník dráhy tuto barvu zkopírujte. Nastavte vlastnost Opacity (Průhlednost) efektu DropShadowEffect (Stín) na hodnotu 0. Otevřete panel States (Stavy) a vyberte stav Focused (Aktivní). Červený obrys je indikátorem toho, že veškeré změny, které teď provedete, se provedou i v okamžiku, kdy ovládací prvek dosáhne tohoto stavu. Změňte vlastnost Opacity (Průhlednost) efektu DropShadowEffect (Stín) na hodnotu 75 % a vlastnost Fill (Výplň) dráhy na barvu uloženou ve schránce (#FFFFFDDA).

10 Vyzkoušejte své upravené textové pole

Spusťte projekt stisknutím klávesy F5 a vyzkoušejte si vlastní textové pole v akci. Když kliknete na textové pole, uvidíte, že se změní barva pozadí a objeví se stín, protože se ovládací prvek přepnul do stavu Focused (Aktivní). Když teď stisknete pár kláves na klávesnici, budete text měnit stejně jako u libovolného jiného textového pole.

11 Opakované použití vlastního stylu

Tím, že jste vytvořili vlastní šablonu, jste ve své aplikaci definovali nový styl. Styly se podobají třídám šablon stylů CSS, ale definují sestavu ovládacích prvků spolu s vizuálními vlastnostmi. Vlastní styl, který jste vytvořili, znovu použijeme pro určení stylu dalšího textového pole. Opusťte režim úpravy šablony kliknutím na položku [TextBox] (Textové pole) v navigační nabídce nebo na objekt TextBoxStyle1 na panelu Objects (Objekty). Odstraňte importovanou šedou dráhu a na plátno BestLogin přidejte nové textové pole. Klikněte na textové pole pravým tlačítkem a vyberte příkaz Edit Template -> Apply Resource -> TextBoxStyle1 (Upravit šablonu -> Použít prostředek -> TextBoxStyle1). Když teď projekt spustíte, uvidíte, že vlastní styl používají dvě upravená textová pole.

12 Rozsviťte žárovku

Metaforicky a v přeneseném slova smyslu si ověříme, zda se vám v hlavě rozsvítilo ohledně konceptu ovládacích prvků, které „nemají vzhled“. V posledních několika krocích jsme vytvořili vlastní styl pro textové pole, ale nevzdálili jsme se příliš od původního vzhledu ovládacího prvku. Abychom zdůraznili myšlenku opakovaného použití funkcí, „rozsvítíme“ obrázek žárovky s využitím stavů Checked (Zaškrtnuté) a Unchecked (Nezaškrtnuté) ovládacího prvku CheckBox (Zaškrtávací políčko).

13 Přeměna na zaškrtávací políčko

Klikněte pravým tlačítkem na ovládací prvek Image (Obrázek) s názvem lightbulb (žárovka) a vyberte příkaz Make Into Control (Přeměnit na ovládací prvek). V dialogovém okně vyberte ovládací prvek CheckBox (Zaškrtávací políčko) a klikněte na tlačítko OK. V režimu úpravy šablony přesuňte ovládací prvek [ContentPresenter] (Předkladatel obsahu) napravo, aby nezakrýval žárovku. Vyberte nástroj Pen (Tužka), klávesová zkratka P, a nakreslete dráhu, která sleduje dráhu žárovky. Změňte vlastnost Fill (Výplň) nakreslené dráhy na jasnou barvu s vlastností Alpha nastavenou na hodnotu 70 %, aby bylo možné přes ni vidět.

14 Definice stavů zaškrtávacího políčka

Nastavte vlastnost Opacity (Průhlednost) dráhy na hodnotu 0, čímž určíte, že základní stav bude představovat pozici „vypnuto“. Otevřete panel States (Stavy) a vyberte stav Checked (Zaškrtnuté). V režimu nahrávání stavu teď nastavte vlastnost Opacity (Průhlednost) dráhy na hodnotu 100 %. Spusťte projekt a kliknutím na zaškrtávací políčko s motivem žárovky žárovku „rozsvítíte“ čili zaškrtnete. Opětovným kliknutím žárovku „zhasnete“ a vrátíte ji zpět do nezaškrtnutého stavu.

Pokud se chcete dozvědět víc o importu souborů aplikace Photoshop do programu Blend, můžete si přečíst sérii příspěvků od Janete Perezové.