Blend for Visual Studio allows XAML to be visually designed like WinForm, the difference between Blend and Studio

1. Advanced functions unique to Blend

Task	Visual Studio	Blend for Visual Studio	More information
design visual state	There are no tools to help you design visual states;	They must be created programmatically.	Use the design tool to change the appearance of a control based on its state.
create animation	There are no design tools for animations; they must be created programmatically. This requires an understanding of the animation and timing systems in WPF, as well as extensive coding expertise.	Animations can be created intuitively and they can be previewed in Blend for Visual Studio. This is faster and more precise than building animations in code. Triggers can be added to handle user interaction, and you can switch to code to add event handlers and other functionality.	dynamically display objects
Convert shapes and text to paths for easier manipulation	not support.	You can make subtle or dramatic changes to shapes (such as rectangles and ellipses) by converting them to paths, which provide greater editing control. Paths can be reshaped or merged, and compound paths can be created from multiple shapes. You can also convert text blocks to paths so you can manipulate them as vector images.	Draw shapes and paths
Edit controls, templates and styles	Coding and knowledge of WPF styles and templates are required.	Turn any image into a control. Use the template editing tool to make changes to controls, styles, and templates with just a few mouse clicks. For example, you can use Blend for Visual Studio style resources to implement common WPF controls (such as buttons, list boxes, scroll bars, menus, etc.) and change their color, style or underlying template directly in Blend for Visual Studio. You can then switch to code to put the finishing touches if needed.	modify object style
Connect the UI interface to the data	You can create data sources from resources such as SQL Server databases, WCF or Web services, objects, or SharePoint lists, and then bind the data sources to UI controls. Design-time data must be manually created for an interaction design experience.	For .NET Framework apps, sample data can be easily created for prototyping and testing. Switch to live data when ready. Blend for Visual Studio's data generation capabilities are excellent (names, numbers, URLs and photos can be dynamically added easily) and can save a lot of time. For live data, UI controls can be bound to XML files or any CLR data source.	Display Data

2. Common functions of Blend and studio

For the most basic development tasks, Visual Studio and Blend for Visual Studio share the same set of windows and features (with some minor differences). Some highlights include:
IntelliSense: Both IDEs support IntelliSense features such as statement endings.

Debugging: You can debug in Visual Studio and Blend for Visual Studio, including setting breakpoints in code to debug a running app and using hot reloading to change XAML code while the app is running. To maintain a consistent debugging experience with Visual Studio, Blend for Visual Studio includes most of Visual Studio's debugging windows and toolbars.

File Overload: XAML files can be edited in Visual Studio or Blend for Visual Studio. Saved edits are automatically reloaded when switching between IDEs. The reloading behavior can be controlled by navigating to Tools > Options > Environment > Documentation in any IDE.

Synced Layouts and Settings: Design Sync your custom tool window layout and settings preferences for Visual Studio or Blend for Visual Studio across devices and versions when signed in with the same Personalization account. See Synchronize settings across multiple computers.

3. Blend XAML Designer

3.1 Drawing shapes and paths

In the XAML designer, "shape" is exactly what you'd expect. For example: rectangle, circle or ellipse. Paths are a more flexible version of shapes. You can do things like reshape them, or merge them together to form new shapes.

Shapes and paths use vector graphics, so they scale well for high-resolution displays.

3.2 Drawing shapes

Find the shape in the Assets window.

Drag any shape you want onto the artboard. Then, use the shape's handles to scale, rotate, move, or distort the shape.

Blend makes xaml visual design like winform

3.3 Drawing paths

A path is a series of connected lines and curves. Use paths to create interesting shapes not available in the Assets window.

Paths can be drawn with a line, pen, or pencil. These tools can be found in the Tools window.

3.4 Draw a straight line

Use the " 笔" tool or the " 线条" tool.

Use the " 笔" tool

On the artboard, click once to define the start point, then click again to define the end of the line.

Use the " 线条" tool

On the artboard, drag from where you want the line to start and release where you want the line to end.

3.5 Draw a curve

Use the "``Pen`" tool.

On the artboard, click once to define the start point of the line, then click and drag the pointer to create the desired curve.

If you want to close the path, click the first point on the line.

3.6 Changing the shape of the curve

Use the " 路径选择" tool.

Click on the shape, then drag any point on the shape to change the curve shape.

3.7 Draw a path of any shape

Use the " 铅笔" tool.

On the artboard, draw paths of any shape as if using a real pencil.

3.8 Delete part of the path

Use the " 路径选择" tool.

Select the path containing the segment to be deleted, and click the " 删除" button.

3.9 Delete points in the path

Use the " 选择" tool to select the path. Then, use the " 笔" tool to click the point you want to delete.

3.10 Adding points to a path

Use the " 选择" tool to select the path. Use 笔the tool to click anywhere on the path where you want to add a point.

3.11 Converting Shapes to Paths

To modify a shape in the same way as a path, convert the shape to a path. Select the shape, then choose 格式> 路径> 转换为路径> .

Remark

"Convert to Path" is currently not available for UWP apps with TargetPlatformVersionat least version 10.0.16299.0 or later.

3.12 Merge paths

Paths and shapes can be combined into a single path.

3.13 Creating Compound Paths

When creating a compound path, any intersecting parts of the paths are subtracted from the result, and the resulting path takes on the visual properties of the bottommost path.

Compound paths can be detached at any time after creation.

3.14 Create clipping path

4. Blend modifies the style of the object

If you want to reuse a setting or group of settings, create a reusable resource. This could be a style, template, or something as simple as a custom color. You can also make controls appear differently based on their state. For example, a button turns green when the user clicks it.

4.1 Brushes: modifying the appearance of objects

If you want to change the appearance of an object, apply a brush to it.

4.2 Drawing a repeating image or pattern on an object

You can use the tile brush to paint repeating images or patterns on objects.

To create a tile brush, first create an image brush, graphics brush, or visual brush resource.

Use an image to create an image brush. The following illustrations show image brushes, tiled image brushes, and flipped image brushes.

Create graphic brushes using vector graphics such as paths or shapes. The following illustrations show a graphics brush, a tiled graphics brush, and a flipped graphics brush.

Create visual brushes from controls such as buttons. The following image shows a visual brush and a tiled visual brush.

4.3 Styles and Templates: Creating a Consistent Appearance Across Controls

You can design the appearance and behavior of a control once, and then apply that design to other controls so that you don't have to maintain them separately.

Should styles be used? : Use styles if you just want to set default properties such as the button's color. Controls can be modified even after styles have been applied.

Should templates be used? : Use a template if you want to change the structure of the control. Suppose you convert a graphic or logo into a button. A control cannot be modified after a template has been applied to it.

4.4 Create a template or style

Templates can be created in two ways. You can convert any object on the artboard to a control, or base a template on an existing control.

To convert any object into a control template, select the object, and then on the Tools menu, choose 构成控件.

If you want to base the template on an existing control, select the object on the artboard. Then, at the top of the artboard, select the breadcrumb button, select " 编辑模板", and then select " 编辑副本" or " 创建空白项".

To create a style, select an object, 对象choose on the menu 编辑样式, and then choose 编辑副本either or 创建空白项.

• Select Edit Copy to start with the control's default style or template.

• Select Create Empty Item to start from scratch.

编辑当前形状The " " option appears only when editing a style or template that has already been created . It will not appear for controls that are still using the default system template.

In 创建样式资源the dialog box, you can name the style or template so that you can use it later, and you can also apply the style or template to all controls of that type.

Remark

You cannot create styles or templates for every type of control. If the control doesn't support them, the breadcrumb buttons don't appear above the artboard. To return to the editing scope of the main document, click Back to Scope.

4.5 Applying styles or templates to controls

Right-click an object in the object and timeline windows, choose 编辑模板, and then choose Apply Resource.

4.6 Restoring a control's default style or template

Select the control, and 属性find the " 样式" or " 模板" property in the " " window. Select Advanced Options, and then click Reset on the shortcut menu.

5. Visual state

Using visual states, you can change the appearance of a control based on its state. Controls can have different visual appearances based on user interaction. For example, you can make a button green when the user clicks it, or you can run an animation. You can use transitions to shorten or extend the time between visual states.

6 Resources: Create colors, styles, and templates and reuse them later

Almost any object in a project can be converted to a resource. Resources are just objects that can be reused in different places in the application. For example, you can create a color once, make it a resource, and then use that color on multiple objects. To change the color of all these objects, just change the color resource.

7. Dynamically display objects in the XAML designer

Blend for Visual Studio makes it easy to create short animations that move objects or make them fade in and out, etc.

To create animations, you need storyboards. A storyboard contains one or more timelines. Set keyframes on the timeline to mark property changes. When the animation is then run, Blend for Visual Studio will interpolate property changes over the specified time period. This allows for a smooth transition. Any property (even non-visual properties) belonging to an object can be animated.

The image below shows a storyboard named "Storyboard1". The timeline contains keyframes marking the X and Y position of the rectangle. While this animation is running, the rectangle moves smoothly from one position to another.

7.1 Creating animations

1. To create a storyboard, select the 对象和时间线" " button in the " " window 情节提要选项, and then select " 新建".

2. In the Create Storyboard Resource dialog box, enter a name for the storyboard.

3. In the Assets panel in Design view, add a rectangle to the bottom left corner of the page.

4. In the Objects and Timeline window, move the yellow time pointer to 3 seconds.

5. In the design view of the page, drag the rectangle to the right side of the page.
6. Press "Play" and watch the rectangle move from the left side of the page to the right side of the page. Make other changes to the rectangle at different points in time. For example, you can change the fill color or flip the orientation in the Properties window.

8. Display data in Blend for Visual Studio

When customizing the layout of the page, you can view sample data in the designer. Sample data can be generated from scratch or using existing classes. You can also connect to live data that appears in the app when you connect to it.

Remark

The Data panel in Blend is only supported for projects targeting the .NET Framework. It is not supported for UWP projects or projects targeting .NET Core.

8.1 Generate sample data

To generate sample data, open a XAML document. In the Data panel, choose the red button in the Create Sample Data diagram, and then choose New Sample Data.

Define the structure of your data in the Data panel, then bind it to UI elements on any page.

If you want the sample data to appear in the page when you run the app, select the Data Source option (the button with the arrow pointing to it), and then select Enable When Running Application.

8.2 Generating example data from classes

If you have created classes that describe the structure of your data, you can generate sample data from those classes.

To generate sample data from a class, open a XAML document, and in the Data panel, click the Create sample data icon button, and then click Create sample data from a class.