![]() ![]() Blend needs to be separate because its primarily for a Designer/UX role that isn’t comfortable with the breadth of Visual Studio. ![]() While I understand the desire, I’ve never been bothered by the dual programs. I hear the complaint a lot that developers want the functionality of Blend hosted in Visual Studio. I got in a discussion with several of the speakers about the common complaint of some Silverlight/WPF folks that they want Blend to be in Visual Studio or why Cider has always been disabled by most dev’s. Then I select both drawings and set their Opacity to 50% by dragging the Opacity value in the property pane to the left (or you can simply type 50).Īt this point the visual is created.I am here at DevTeach and having a great time. Notice that the circle takes on the same stroke color and thickness I just used with the chevron's Path (nice feature of Blend to remember that). So I draw an ellipse holding the SHIFT key down while dragging my mouse to give the ellipse a uniform radius. Now that the chevron is drawn, I want to enclose it within a circle, as in Figure 6. Then, using the direct selection key again (A), I move each of the two endpoints closer to each other, reducing the inner angle. I want it to look less jagged, so I set the StrokeEndLineCap, StrokeStartLineCap, and StrokeLineJoin properties to Round. The lines have been converted to Paths, making them easy to delete. Then I select the two left-most sides of the square and press the DEL key. To do this, I click the A key which allows me to do direct selection. Now that it's a Path, I can remove the points and lines I no longer need and make it look like a Chevron. The square (really a Rectangle) can be converted to a Path by right-clicking on the Rectangle and choosing Path | Convert To Path. Setting the RotateTransform property to 45 degrees. If you use the mouse and hold the SHIFT key down, the rotation will occur in 15 degree increments, which is handy.įigure 3. This indicates you can hold the left mouse button and then rotate the selection. You can do this by either setting the RotateTransform property to 45 degrees in the property pane, or using the mouse by hovering just outside one of the square's corners until you see the arced mouse icon. Next I select the square and rotate it 45 degrees, yielding the result in Figure 3. ![]() It may not look like a chevron yet, but bear with me. At this point I have a square with no Fill color, a white border, and a border thickness of 20. I set the Stroke to white, and the StrokeThickness to 20. Then I reset the Fill color by clicking the Fill property's Advanced Options square in the properties pane, and selecting Reset. I made my square's sides about 185 pixels wide. I start by drawing a square on the page by holding the SHIFT key down, which makes both sides of the rectangle the same length. The next thing I want to do is draw the chevron. Figure 1 is the end result.įirst, I opened a new Silverlight (could have been Windows Phone) project in Blend and set the background of my page to black, so I could see the drawing better. The idea is that we have a chevron inside of a circle using paths. I'm going to walk through one way to creat e a visual that could be used for a button (Feel free to get creative and add your own drawings if mine are too boring). I hope after reading this some of you may see how quickly and easily you can create visuals. Yeah, Blend isn't perfect and it's not free, but there are some real advantages to using it. I love creating simple animations and states with Expression Blend. Papa shows how to build a simple button using Expression Blend. Papa's Perspective Expression Blend Drawing Tips
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |