#537 – Changing a Layout Panel to a Different Type

April 16, 2012 Leave a comment

In Blend, you can easily change an existing layout panel to a different type of panel, by interacting with the panel object in the Objects and Timeline panel.

Let’s say that you have a series of Button controls as child elements of a StackPanel.

If you want to use a UniformGrid panel as a container, rather than the StackPanel, you can right-click on the StackPanel object in the Objects and Timeline panel and select Change Layout Type.  Then select the desired type of panel that you’d like to use.

Once you select the new layout panel type, the XAML will be updated to replace the old panel with the new one.  Both the artboard and the Objects and Timeline panel will also immediately update to reflect the new panel.

Advertisement

Filed under Blend Tagged with , , ,

#536 – Adding Layout Panels Using the Tools Panel in Blend

April 13, 2012 1 Comment

The tools panel in Blend includes a button that lets you insert layout panels into your user interface.

By default, the icon on the tools panel will allow you to insert a Grid into your user interface.

If you right-click on this icon, or left-click and hold, you’ll see the full list of available layout panels.  You can then left-click to select the one that you want to insert.

With the desired panel selected, you can double-click the icon to insert the panel.  The panel will be created as a child of the currently selected layout container or as a child of the layout container where the cursor is currently located in the XAML editor.

In the example below, we add a StackPanel as a child of the main Grid by selecting the StackPanel icon on the tools panel and then double-clicking it.

Filed under Blend Tagged with , ,

#535 – Drawing Symmetrical Shapes in Blend

April 12, 2012 Leave a comment

Using the Shape Tool in Blend, you can draw a Rectangle, Ellipse or Line by left-clicking and dragging with the mouse.

If you hold the Shift key down while dragging with the mouse, you will be constrained to drawing symmetrical shapes–squares (symmetrical rectangle) or circles (symmetrical ellipse).

If you hold the Shift key down while drawing a Line, you’ll be limited to drawing lines at multiples of 15 degrees.  This makes it easier to draw lines at common angles.

If you hold down the ALT key while drawing any of these shapes, your starting mouse position will be used as the center point of the shape, rather than one corner.

Filed under Blend Tagged with , , , , ,

#534 – Drawing Shapes with the Shape Tools in Blend

April 11, 2012 Leave a comment

There are three shape tools in the Tools Panel in Blend that will let you draw shapes on your user interface.  They share an icon on the Tools Panel, so you can see them all by clicking and holding the left button down.

These tools allow you to draw the following elements:

  • System.Windows.Shapes.Rectangle
  • System.Windows.Shapes.Ellipse
  • System.Windows.Shapes.Path  (a path with a single line segment)

With a shape tool enabled, you can draw directly on the artboard with your mouse.

	<Canvas>
		<Ellipse Fill="#FFF4F4F5" Height="63" Canvas.Left="84" Stroke="Black" Canvas.Top="119" Width="133"/>
	</Canvas>

Filed under Blend Tagged with , , , , , ,

#533 – Using the Gradient Tool to Modify a Radial Gradient

April 10, 2012 1 Comment

You can use the Gradient Tool in Blend to adjust a radial gradient, as well as a linear gradient.

Below is a radial gradient that transitions from a darker green at the center of the region to a light green at the outside of the circle.

		<Border.Background>
			<RadialGradientBrush RadiusY="0.496" RadiusX="0.496">
				<GradientStop Color="#FF239D23"/>
				<GradientStop Color="#FFABD2AB" Offset="0.762"/>
				<GradientStop Color="#FFD9F1D9" Offset="1"/>
			</RadialGradientBrush>
		</Border.Background>

When you click on the Gradient Tool, you’ll see an arrow appear in Blend that represents the gradient.

As with linear gradients, you can click and drag any of the gradient stops, represented by the small circles on the arrow.  This will change the point on the radial line at which the gradient achieves the color specified for that gradient stop.

The origin of a radial gradient defaults to the center of the control.  You can change this origin by dragging the tail end of the arrow.





				


				

					

						Filed under Blend
						Tagged with , , , 					

				


			


		
			


				


					
#532 – Using the Gradient Tool to Move Gradient Stops


					

						

							April 9, 2012
																						Leave a comment
																				

					


					
You can use the Gradient Tool in Blend to adjust an existing gradient.  You can move the starting and ending points of the gradient, as well as any of the gradient stops.


When you first create a gradient, the endpoints are typically located on the edge of the control and there is a gradient stop at each end.


		<Border.Background>
			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="Green" Offset="0.0"/>
				<GradientStop Color="White" Offset="1"/>
			</LinearGradientBrush>
		</Border.Background>





Using the Gradient Tool, you can move one or more gradient stops outside of the control boundaries, to indicate what the color should be at that starting or ending point.  The gradient used inside the control will then be a subset of the full gradient.






				


				

					

						Filed under Blend
						Tagged with , , , 					

				


			


		
			


				


					
#531 – Adjusting a Gradient Using the Gradient Tool


					

						

							April 6, 2012
																						1 Comment
																				

					


					
You can change an existing gradient fill by using the Gradient Tool.


To adjust a gradient, start by selecting the control that uses a gradient that you want to change, either in the Objects and Timeline panel, or in the XAML editor.  In this example, we’re going to change the background color gradient for a Border.




If your control uses a gradient for more than one property, select the property on the Properties panel.  You’ll see the existing gradient displayed.




Click the Gradient Tool icon.




You’ll see a visual indication of the gradient drawn on the control, with an arrow showing the direction of the gradient and little circles showing each gradient stop.




You can move the head or tail of the arrow to change the starting/stopping point of the gradient, as well as its direction.




You can change the position of a gradient stop by dragging the corresponding circle.






				


				

					

						Filed under Blend
						Tagged with , , , , 					

				


			


		
			


				


					
#530 – Creating a Linear Gradient in Blend


					

						

							April 5, 2012
																						1 Comment
																				

					


					
A linear gradient is a fill style that fills an area with a pattern that starts out as one color and gradually changes to one or more other colors.


You can create a linear gradient directly in XAML using the <LinearGradientBrush> element.  You can also use the the tools in Blend to create a gradient.


Let’s create a new gradient to use as the background brush for a Window.  Start by selecting the window object.




Now click the Background property on the Properties panel.




Select the gradient brush option.




You’ll see that the default gradient has two gradient stops, going from black to white.




Click on the black gradient stop and select a new color in the color palette.  This will change the first gradient stop, so the gradient will now run from your new color, to white.




Your Window now has a gradient background.






				


				

					

						Filed under Blend
						Tagged with , , , 					

				


			


		
			


				


					
#529 – Using the the Paint Bucket Tool to Copy Attributes


					

						

							April 4, 2012
																						Leave a comment
																				

					


					
The Paint Bucket tool works in a similar manner in Blend to the Eyedropper tool, in letting you copy attributes from one object to another.  They only differ in whether you are clicking an object that you want to copy attributes from vs. clicking an object that you want to copy attributes to.


To use the Eyedropper tool:


    

  • Select the object that you want to change
    • 

  • Select the Eyedropper tool
    • 

  • Click on an object from which you want to copy attributes
    • 



To use the Paint Bucket tool:


    

  • Select the object that you want to copy attributes from
    • 

  • Select the Paint Bucket tool
    • 

  • Click on one or more objects to which you want to copy attributes
    • 



The Paint Bucket allows copying attributes from a single object to a number of other objects.




				


				

					

						Filed under Blend
						Tagged with , , , 					

				


			


		
			


				


					
#528 – Using the Eyedropper Tool in the Color Editor


					

						

							April 3, 2012
																						Leave a comment
																				

					


					
In addition to the eyedropper tool on the tools panel, you can select colors using the eyedropper tool in the color editor, found in the Brushes panel.




To use the eyedropper, first select a control having a color property that you want to change.




In the Brushes section of the Properties panel, pick a property that you want to change.  (E.g. Background).




Select the kind of brush that you want to use (e.g. solid color brush).




Click on the eyedropper icon in the color editor.




Now you can move around the screen and click to pick up the color at the current mouse position.  You can click anywhere on the screen–even outside of Blend.


As you move around the screen, the target element will change to preview using the color of the pixel that your mouse is hovering over.  Left-click to actually use the color.






				


				

					

						Filed under Blend
						Tagged with , , , 					

				


			


		
		

			
← Older posts

			
Newer posts →