Blend for Visual Studio 2015

1. BLEND FOR VISUAL STUDIO 2015
Jiří Danihelka
MsFest 2015

2. Agenda
• K čemu nástroj Blend slouží
• Vývoj verzí Blendu
• Návrh GUI v Blendu
• Integrace s Visual Studiem
• Debugování GUI

3. K ČEMU NÁSTROJ
BLEND SLOUŽÍ

4. K čemu Blend slouží
• Visuální vývojové prostředí pro XAML
• XAML je jazyk pro popis vzhledu
uživatelského rozhraní (GUI)
• Blend umožňoje částečně rozdělit práci na
vývoji aplikace mezi:
– návrháře – Blend a XAML
– programátora – Visual Studio a C#

5. Analogie s HTML
• Webový návrhář napšíe
– HTML kód stránky (XAML Controls)
– CSS soubory se syly (XAML Styles and Templates)
• Programátor napíše
– JavaScriptový kód (C# code behind)
– serverový kód (C# model layer)
• Rozdělení nefunguje na 100%

6. Podporované druhy aplikací
• Univerzální Windows 10 aplikace (UWP)
– Windows 10
– Windows 10 Mobile
• Windows 8.1 aplikace
• Windows Phone 8.1 aplikace
• webový Silverlight
• Windows Presentation Foundation (WPF)
• Není podporováno
– Windows Phone 8.1 Silverlight

7. Podporované jazyky
• XAML + C#
• XAML + Visual Basic
• XAML + C++ (C++/CX)
– pouze UWP, Windows 8.1 a Windows Phone 8.1
– nepodporuje Silverlight a WPF
• Není podporováno ve verzi 2015
– HTML + JavaScript (WinJS/WWA)

8. JavaScript a Blend
• Podpora JavaScriptu byla ve verzích
– Blend for Visual Studio 2012
– Blend for Visual Studio 2013
• Blend se v té době nerozvíjel o nové funkce
– část funkcí přešla do Visual Studia
– část funkcí byla zrušena
• Ve verzi 2015 se zrušené funkce vrací zpět

9. JavaScript aplikace ve Windows
• Jedna z možností vývoje pro Windows 8
– moderní aplikace (dříve Metro)
• Původní myšlenka:
– jazyk HTML umí velké množství programátorů
– vývoj HTML je levnější než XAML
• Realita:
– WinJS/WWA není to samé co webové stránky
– mnoho rozšíření převzatých z jazyka XAML
– horší výkon aplikací
– špatně dostupné výukové materiály
• Nyní odklon od silné podpory JavaScriptu

10. VÝVOJ VERZÍ BLENDU

11. Vývoj verzí Blendu
• Nejprve součást balíku Expression Studio

12. Vývoj verzí Blendu
• Následně součást Windows Phone 7 SDK

13. Vývoj verzí Blendu
• Součástí Visual Studia 2012
• Blend for Visual Studio

14. Blend 2015 používá Visual Studio Shell

15. NÁVRH GUI BLENDU

16. První otevření v Blendu
• Spuštení přes kontextové menu na souboru
– Open in Blend...

17. První otevření v Blendu
• Můžete se setkat s tímto:

18. Chyba při otevření
• Konstruktory nesmí házet výjimky
– designer volá konstruktor, ale program nespouští
– globální proměnné mouhou být neinicializované
• Rovněž není dobré dělat
– výpočetně náročné věci v konstruktoru
– vytěžování jiných prostředků
• Co s tím?
– kontrola inicializace při použití objektů
– přesunout kód z konstruktoru do metody Init
– testovat na podmínku běhu v designeru

19. Design Mode
if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
// falešná inicializace pro designer
this.ConnectedToDatabase = true;
}
else
{
// skutečná inicializace za běhu aplikace
this.ConnectedToDatabase = MyDatabase.IsConnected;
//hází neošetřenou výjimku, pokud je MyDatabase null
};

20. Data pro visuální design
• Často se data načítají až za běhu aplikace
• Typicky je se využívá rozdělení aplíkace na vrstvy
podle modelu MVVM
– model načítá data (z databáze, souboru, ...)
– view zobrazuje data pomocí XAMLu
– viewmodel propojuje model a view
• Databinding – promojení V a VM

21. Vzor MVVM

22. Blend 2015 Sample Data

23. Podpora pro vytváření animací
• Lze posouvat v čase pomocí Timeline

24. Podpora pro management stavů
• Kombinace vizuální stavů komponent

25. INTEGRACE
S VISUAL STUDIEM

26. Integrace s Visual Studiem
• konzistentní vzhled
• podobné sady příkazů
– Visual Studio 2015
– Blend 2015
– Blend 2013

27. IntelliSense
• editor jako Visual Studio
• IntelliSense pro XAML i C#

28. Editor Blendu 2015
• Výrazné zlepšení
– dříve spíše takový Notepad
• Již se nedá přepínat do Visual Studia pro
každou editaci
• Není podpora doplňků – např. ReSharper
• Lepší synchronizace kódu
– automatické načítání změněných souborů

29. Peek Definition
• Alt + F12

30. DEBUGOVÁNÍ GUI
(ŽIVÁ UKÁZKA)

31. SHRUNUTÍ

32. Shrnutí přednášky
• Blend je vizuální vývojové prostředí pro XAML
– Univerzální aplikace, Windows Phone, WPF
• S každou verzí je postupně sbližován s VS
– původně samostatný SW produkt
– nyní součást Visual Studia
– přesun funkcí oběma směry
• Některé designovací funkce má navíc
– Vyváření animací, vytváření stavů

33. Další zdroje informací
• MVA: Windows 8.1 Design Jump Start
https://mva.microsoft.com/en-us/training-courses/windows-81-
ux-design-jump-start-8235
• MVA: Designing Your XAML UI with Blend
https://mva.microsoft.com/en-us/training-courses/designing-
your-xaml-ui-with-blend-jump-start-8260
• Channel 9: New XAML Tools in Visual Studio 2015
https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/New-
XAML-Tools-in-Visual-Studio-2015-and-Blend

34. DOTAZY?