Blend 2015 Tutorial (i) Basics

Microsoft has made many revolutionary changes in the Visual Studio 2015 product suite, including the. NET open source,. NET Server-side part cross-platform, launched to personal and small team free Community Edition, mobile app development part of cross-platform support, store app support C # compile cost code, etc.

Another significant improvement is that blend is recreated using the Visual Studio framework, so that the editing capabilities of XAML and C # code reach the level of Visual Studio. Stability has been greatly improved by using an independent process for parsing XAML. The following is a preliminary study of this recreated blend.

Start with the menu file-new-project to open the following dialog box to create a new WPF project.

Now that the user interface has been changed to Visual Studio mode, the Solution Explorer and the Team Explorer panel and Visual Studio are exactly the same, which means that the ability to manage project files and class libraries and the ability to support source code control have reached the level of VS, This is a great thing to be happy about. Interface menu item arrangement, error List panel, output panel, find results panel as well as VS, the use of the Find and replace function is also consistent with vs.

The original property editing feature was implemented using the Properties panel, and the original Object Browser functionality was implemented using the enhanced version of the document Outline panel. Asset Panel, Status Panel, trigger Panel, Data Panel and resource panel are consistent with the original version.

The original artboard section is now implemented using the core document editing feature in the VS Framework, opening a XAML file, using a similar interface with VS, and adding the blend toolbar to the left, as in.

The ability to visualize edits has reached the level of the original blend, and the ability to write code has reached the level of VS, a perfect combination of VS and blend. C # Development is also consistent with VS, including IntelliSense, lookup support for features such as references, but currently does not support ReSharper (Visual Studio 2015 can support Resharper9). The people who do the view layer development later can use only a blend tool, instead of opening vs and blend as before, and synchronizing the code.

The following is a simple small example of how to add controls, modify layouts, style extraction, create sample data, edit data templates, data binding, and more to explore the use of new blend through visual development.

1. First move the mouse in the artboard and see a yellow line Click to add a row to the grid.

Then move the mouse to the location, the artboard appears 39* icon, click the asterisk, you can switch between the various modes, first temporarily changed to 39 lock.

The current code is as follows

<window x:class= "Blenddemo.mainwindow" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d = "HTTP://SCHEMAS.MICROSOFT.COM/EXPRESSION/BLEND/2 008 "XMLNS:MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "xmlns:local =" clr-namespace:ble Nddemo "mc:ignorable =" D "title=" MainWindow "Height =" C "width=" 525 "> <grid > <grid. rowdefinitions> <rowdefinition Height = "/>" <RowDefinition/> </grid.rowde Finitions> </grid ></window> 

2. Press the shortcut key T or select the TextBlock tool in the left-hand toolbar, draw a block of text in the first row of the grid, press Escape to cancel the edit state, press the CTRL+SHIFT+R key combination, or reset all layout parameters by using the menu format-layout-Reset all commands. With the text block control selected, click the Black square to the right of the Text property in the Properties panel, and select Reset to reset the property. Click the drop-down button below the Text Group property to expand more properties and reset the TextWrapping property to the default value in the same way.

Here is the meaning of the various colors of the small squares,

Black represents the local value, which is the value set directly through the XAML label property.

Green indicates resources that are referenced, static, or dynamic.

Yellow indicates binding, normal binding, or template binding.

Purple represents the inherited value.

Blue indicates the value obtained through the style.

You should remember the meanings of these colors so that you can see the properties panel at a glance.

In the Text property, enter the People list, modify the font and the font size of Simhei and 22px, if the font size is in PT, you can change the pixel in the Menu tool-Options-xaml Designer-type unit to be consistent with the XAML code. Set margin to 10,10,10,10.

Change the first line of the grid to auto (click Lock to Auto) as described above.

This is the code below

<window x:class= "Blenddemo.mainwindow" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d = "HTTP://SCHEMAS.MICROSOFT.COM/EXPRESSION/BLEND/2 008 "XMLNS:MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "xmlns:local =" clr-namespace:ble Nddemo "mc:ignorable =" D "title=" MainWindow "Height =" C "width=" 525 "> <grid > <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <RowDefinition/> </grid.row definitions> <textblock FontFamily = "Simhei" text= "People list" fontsize= "all" Margin = "ten"/> </grid >< ;/window> 

3. After selecting the TextBlock control in the Document Outline panel, right-click, select Edit Style in the popup menu-Create a blank style, click the OK button in the pop-up window to create the style.

You can see that a palette-like icon appears in the navigation bar at the top of the artboard, indicating that the style is now being edited.

In the Properties panel, in the Text group, click the small square to the right of the font and font size, choose Convert to local value, you can see the font and size is extracted into the style, the code is as follows.

<window x:class= "Blenddemo.mainwindow" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d = "HTTP://SCHEMAS.MICROSOFT.COM/EXPRESSION/BLEND/2 008 "XMLNS:MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "xmlns:local =" clr-namespace:ble        Nddemo "mc:ignorable =" D "title=" MainWindow "Height =" C "width=" 525 "> <window.resources > <style x:key= "TextBlockStyle1" targettype= "{x:type TextBlock}" > <setter property = "FontFamily" V Alue= "Simhei"/> <setter property = "FontSize" value= "All"/> </Style> &LT;/WINDOW.RESOURC Es > <grid > <Grid.RowDefinitions> <rowdefinition Height = "Auto"/> &L T rowdefinition/> </Grid.RowDefinitions> <textblock Text = "People list" margin= "ten" Style = "{Dynamicresou Rce TextBlockStyle1} "/&Gt </grid ></Window>

4. Click the Back button (horizontal and up arrow) at the top of the document Outline panel to exit the style editing mode. In the Assets panel, select the ListBox control, drag a ListBox control at the location of the second row of the grid in the artboard, and press Ctrl+shift+r to reset the layout.

5. Add sample data to the data panel. First select the project or this document, where you select the project so that you can do multiple file sharing data. Click the Create Sample Data button at the top right of the panel, select New Sample data, enter the data source name in the popup dialog box, tick the Enable Sample data option when the application is running, and click OK.

To change collection,property1 and Property2 to Persons,name and sex, you can try adding other types of attributes, including simple and set properties.

6. Click the set design-time data context button below the data panel to bring up the following dialog box.

Select DesignData and click the OK button.

You can see that D:datacontext is added to the code.

<window x:class= "Blenddemo.mainwindow"        xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x = "Http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:d = "http://schemas.microsoft.com/ expression/blend/2008 "        XMLNS:MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "        xmlns: Local = "Clr-namespace:blenddemo"        mc:ignorable = "D"        title= "MainWindow" Height = "C" width= "525" d:d Atacontext = "{D:designdata/sampledata/sampledatasource/sampledatasource.xaml}" >

This means that the design time data does not occupy the normal DataContext attribute, later ViewModel layer developer can use normally.

7. Select the ListBox control in the artboard or Document Outline panel, click the Small square to the right of the ItemsSource property in the Properties panel, and choose Create data binding from the pop-up menu. In the dialog box that pops up, select persons and click the OK button.

8. Select the ListBox control in the artboard or Document Outline panel, click the ListBox in the top navigation bar of the artboard, choose Edit Other template in the pop-up menu-Edit the generated item-Create a blank entry, enter a name, click OK. Now enter ItemTemplate edit mode, the artboard navigation bar as.

Click the Grid button in the left column of the artboard, draw a grid layout in the artboard, divide the grid into two columns using the method described earlier, draw a block of text in the first column, draw a checkbox in the second column, and use the shortcut keys to reset the layout of the text block and the checkbox (Ctrl + SHIFT+R). Change the first column of the grid to *, the second column to auto, and clear width and height (in the Document Outline panel, select Grid Layout, in the Properties panel, click the width and height of the small square, select reset). The text block and checkbox are not stretched, such as.

Click the ListBox button in the artboard navigation bar to change the horizontalcontentalignment to stretch in the properties panel, so it becomes as shown.

9. Click the Grid button in the artboard navigation bar to re-enter the ItemTemplate edit state. Select the TextBlock control, click the small square of the Text property in the Properties panel, select Create Data binding, select the Name property in the popup dialog, and click OK.

Select the CheckBox control and change the content to male in the properties panel. Click on the small square of the IsChecked property, select Create Data binding, select the Sex attribute in the popup dialog and click OK.

At this point the basic development of the view layer has been initially completed, the final effect such as.

The design-time view already shows the design effect, and the Run program ListBox does not display anything, the sample data does not affect normal business logic, the view and ViewModel layers are independently developed (possibly divided into front-end and back-end developers), the binding property name and type are the interfaces of both, which is exactly what we want.

If you look at the code generated by the data panel for sample data, such as SampleDataSource.xaml.cs, you can see that a conditional compilation statement exists, such as

#if Disable_sample_data

Internal class Sampledatasource {}

#else

As the note says, to significantly reduce the sample data involved in a production (environment) application, you can set the Disable_sample_data conditional compilation constants and disable sample data at run time.

The final code is as follows,

<window x:class= "Blenddemo.mainwindow" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d = "HTTP://SCHEMAS.MICROSOFT.COM/EXPRESSION/BLEND/2 008 "XMLNS:MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "xmlns:local =" clr-namespace:ble Nddemo "mc:ignorable =" D "title=" MainWindow "Height =" C "width=" 525 "D:datacontext =" {D:designdata/sampl  Edata/sampledatasource/sampledatasource.xaml} "> <window.resources > <style x:key=" TextBlockStyle1 " Targettype= "{x:type TextBlock}" > <setter property = "FontFamily" value= "Simhei"/> <set            ter property = "FontSize" value= "/>" </Style> <datatemplate x:key= "DataTemplate1" >                    <Grid> <Grid.ColumnDefinitions> <columndefinition Width = "*"/> <columnDefinition Width = "Auto"/> </Grid.ColumnDefinitions> <textblock Height = "Auto" T extwrapping= "Wrap" text= "{Binding Name}" width= "Auto"/> <checkbox Content = "Male" grid.column= "1" Height = "Auto" Width = "Auto" ischecked= "{Binding Sex}"/> </Grid> </DataTemplate> </window .            Resources > <grid > <Grid.RowDefinitions> <rowdefinition Height = "Auto"/> <RowDefinition/> </Grid.RowDefinitions> <textblock Text = "People list" margin= "ten" Style = "{Dyn Amicresource TextBlockStyle1} "/> <listbox grid.row =" 1 "itemssource=" {Binding Persons} "itemtemplate=" {Dynam Icresource DataTemplate1} "horizontalcontentalignment=" Stretch "/> </grid ></Window>

We did not write any code directly, all visual development, and generated code from blend.

Please pay attention to the next detail style changes.

Blend 2015 Tutorial (i) Basics