It will update as we keep changing the design. Above the art board, we can see the name of the document MainPage. We can open multiple documents in different tabs and navigate between them.
Open documents : This is highlighted as 2. When we click on the white downward arrow icon in the top-right corner of the art board, we can see the files that are currently open in this project. It is helpful to navigate through them if the list of open files becomes too long to fit in a single row on the screen, as shown here:. The Assets panel : This is highlighted as 3. In the top-left corner, we see the Assets panel. This is the place where we have a list of all the controls, styles, media, behaviors, and effects that we could add.
We could select the element we want to use or even search for it. We could add the element to the art board by simply grabbing that element and dragging it to the workspace and start working with it.
We could also add them to the art board by double-clicking on the element. The Objects and Timeline panel : This is highlighted as 4. We can see the Objects and Timeline panel below the Projects panel. This panel shows the complete hierarchy of elements in the document that we are working on. We can select the objects that we want to modify. The Projects panel : This is highlighted as 5. Alongside the Assets panel, we also see the Projects panel.
If we click on it, it will show the project we are working on currently. This is the place from where we can view all files of the currently open project. The first item in this panel is a search box where we can search for a project file. This is shown in the following screenshot:. On the extreme left, we can see the tools panel. In this panel, we have the set of common elements that are used to create the UI of our applications. Some of these tools panel items have multi buttons the ones with a little triangle alongside them.
These are the buttons that have multiple functions. So, if we move the mouse cursor to the text icon, as shown in the following image, and press and hold the mouse's left button, we can see the multiple text controls available in the tools panel. If we simply click on the text button, it is the same as selecting the default text control or the last selected text control. There might be a slight difference between the tools that are available in a Silverlight application and a WPF application.
This is the place where we will get the building blocks of our application. The toolbox can be divided into nine sections:. Selection tools : This section is highlighted as 1.
These tools allow us to select objects:. Selection : The black arrow is the selection tool to select any object. Direct selection : The white arrow is known as the direct selection tool, which is used to select nested objects and paths. View tools : This section is highlighted as 2. These tools are used to pan, zoom, and orbit the camera on the art board. The camera orbit tool is not available in a Silverlight project:.
Pan : This is used to position the art board in the workspace area. We can double-click on the pan icon to center the art board in the workspace available for the art board.
Zoom : This is used to see the different views of the art board and objects. We can double-click on the zoom icon to resize the current document to its actual size percent zoom. Camera orbit : This is used to position the camera face for a 3D object.
Brush tools : This section is highlighted as 3. These tools are used to work with the various visual attributes, such as foreground, background, and so on. The brush tools are as follows:. Eyedropper : This allows us to select our color of choice by clicking on any element inside Blend or even elsewhere. Paint bucket : This allows us fill an area with a brush. Gradient : This tool helps us to add the gradient effect to the control.
Path tools : This section is highlighted as 4. The pen and pencil tools are both path tools:. Pencil : This provides the option to create freeform graphics. Pen : This provides an easier way to draw complex shapes. Shape tools : This section is highlighted as 5. The rectangle, ellipse, and line are used to draw the respective shapes onto the art board. Layout panels : This section is highlighted as 6. These are the various layout panels that help us to design the layout structure of the application screen.
Text controls : This section is highlighted as 7. Text controls allow us to display text to the user or take text input from the users. Common controls : This section is highlighted as 8. The other controls can be accessed using the Assets toolbar menu described next.
Assets : This toolbar menu is highlighted as 9. This is the place where we can find all the controls:. UI components : These include button, label, textbox, menu, and listbox, among others and are referred to as controls. Styles : This is a group of property settings that determines how a control will appear. Effects : This is an easy-to-use API to create a graphical effect. Behaviors : These are reusable code packages that can be added to any object and then fine-tuned by changing their properties.
Styles, effects, and behaviors allow us to enhance the controls and add more interactivity. We will have a look at each of these in detail in later chapters. Let's add TextBlock to the art board. Left-click and hold the text tool icon until we see the popup to select one of the text controls. Move the mouse to the art board, press the mouse's left button down, and, without releasing the mouse button, drag the mouse diagonally to create TextBlock.
Once we do that, we can see multiple things. The first thing that we notice is that we have the Properties panel filled with various options to configure TextBlock.
Before we move on, let's take a look at the Properties panel in detail:. Different eyedroppers are available depending on where the solid and gradient brushes are selected.
RGB values can also be set here. Also, you will notice that, in the Objects and Timeline panel, we have a new element named TextBlock below LayoutRoot. Sign up using Email and Password.
Post as a guest Name. Email Required, but never shown. The Overflow Blog. Stack Gives Back Safety in numbers: crowdsourcing data on nefarious IP addresses. Featured on Meta. New post summary designs on greatest hits now, everywhere else eventually. Related 1. Hot Network Questions. Question feed. It provides the same basic XAML design experience as Visual Studio and adds visual designers for advanced tasks such as animations and behaviors. Blend for Visual Studio is a component of Visual Studio.
NET desktop development workload. Both of these workloads include the Blend for Visual Studio component. If you're new to Blend for Visual Studio, take a moment to become familiar with the unique features of the workspace.
This topic takes you on a quick tour. You can use the Tools panel in Blend for Visual Studio to create and modify objects in your application. Some of the tools in the Tools panel have variations, for example, instead of a rectangle, you can choose an ellipse or a line.
To access these variations, right-click or click and hold on the tool. Select objects and paths. Use the Direct Selection tool to select nested objects and path segments.
0コメント