by
kirupa | 27 March 2008
In the
previous page,
you modified your textblock to say hello, world, and
you also changed the font and font size. The last
few
things we are going to focus on are making some
minor visual tweaks.
First, let's
resize our application, because currently we are
taking up a lot of space. The easiest way to resize
your application is to look in your Objects and
Timeline panel and select the object marked
UserControl:
[ your UserControl is almost like the root element ]
With your UserControl
object selected, look in the artboard, and find a
corner with the resize adorner displayed. Once you have found
a resize adorner, click on it with your mouse and
begin dragging:
[ your resize adorner allows you to drag your
selected object to a new size ]
Continue dragging your
resize adorner inward to make your application's width
and height smaller:
[ my application is now significantly smaller! ]
The size you choose to
resize to is entirely up to you, but I'm going to
keep it at a smaller size as shown above.
The next
thing we will do is change the background color of
our application. From the Objects and Timeline
panel, select the control labeled LayoutRoot:
[ LayoutRoot is actually a Grid control, but I'll
discuss that at a later time ]
Once you have selected
LayoutRoot, look in your Properties panel and find the
category marked Brushes:
[ your Brushes category allows you to play with
colors ]
Select the Background
brush (it should be selected by default already as
shown in the above image), and use the Color Editor
to pick a color that you like. Lacking creativity at
this moment, I'll pick a light-gray color:
[ select a single color that you would like to use ]
Notice that whatever
color you pick, the background of your application
changes to reflect that:
[ black text on a gray background - very colorful! ]
While you can actually
do more than just have a single, solid-color
background, we'll keep it simple this time around.
The very last thing we are
going to do is move our textblock to the center of
our application. This is actually a lot easier than
you may think. Simply click on your
hello, world
text block and just drag it towards the center of
your application:
[ dragging things around is a quick and dirty way of
positioning items ]
And now - we are done
with our little hello, world application. Hopefully
the past few pages gave you a quick glimpse of
Expression Blend and how to use it to create a very
simple application.
If you are curious to
see how my version of this application looks like,
feel free to download and extract the Blend / Visual
Studio 2008 solution files below:
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
|