#516 – Drawing a Path in Blend with the Pen Tool

March 16, 2012 Leave a comment

You can use the Pen tool in Blend to draw a Path object.  A path is just a series of connected line segments or curves.  You draw a Path by specifying a series of individual points.

To start drawing a Path, first select the Pen tool in the tools panel.

You can now left-click on the artboard to place the first point.  After you click, you’ll see the point rendered as a square blue dot.

Left-click again to place the second point, holding the left mouse button down after you click.  You’ll see a straight line segment appear, but if you drag the mouse while holding down the left button, you can create a curve.

Continue in the same way, adding curves that each connects to the end of the previous curve.

You can leave the Path object open, or click on the original point to close the curve.

Advertisement

Filed under Blend Tagged with , , ,

#515 – Zooming In and Out on the Artboard

March 15, 2012 Leave a comment

Because all controls in WPF are rendered using vector graphics, rather than bitmaps, WPF-based GUI elements can be rendered at any size.  This allows zooming in/out on the artboard in Blend, to make it easier to see elements of your GUI.

There are several different ways to zoom in and out on the artboard.  The easiest method is to use one of the following keyboard or mouse shortcuts:

  • Ctrl-+ (plus) : Zoom in
  • Ctrl– (minus) : Zoom out
  • Ctrl-0 : Zoom to fit entire window (also centers window in artboard)
  • Ctrl-1 : Zoom to actual size (100%)
  • Ctrl-9 : Zoom to fit selected control(s)
  • Mousewheel : Zoom in/out

Zoomed In

Zoomed to Fit Window

Zoomed to Actual Size

You can also zoom using the Zoom widget in the lower left corner of the artboard.  Click on the dropdown or left-click and drag.

Filed under Blend Tagged with , ,

#514 – Different Ways to Select Objects in Blend

March 14, 2012 Leave a comment

There are several different ways to select an object on the artboard in Blend, so that you can then change its properties.

Method #1 – Left-click object on artboard when using Selection Tool

Method #2 – With the Selection Tool enabled, left-click and drag to select multiple objects.

Method #3 – Select and object in the Objects and Timeline panel.

Method #4 – Left-click within a XAML element in the XAML editor.

Filed under Blend Tagged with , ,

#513 – Using the Selection Tool in Blend

March 13, 2012 1 Comment

You use the selection tool in Blend to select and object on the artboard so that you can then modify the object by changing its properties.

To activate the selection tool, click on the top icon in the tools panel (an arrow), or press the “V” key.

With the selection tool active, you can now left-click to select an individual object on the artboard.  The object will change to show a blue border, indicating that it is selected.

In the example below, we’ve left-clicked on the button labeled “Click Me”.

Once you’ve selected a particular object, you’ll see its properties listed in the Properties panel (normally on the right side of the screen).

 

Filed under Blend Tagged with , ,

#512 – Areas of the Screen in Blend

March 12, 2012 1 Comment

When you open a WPF project in Blend, you’ll see a lot of different widgets in the Blend user interface.  The entire screen can be broken down into various regions, with each region serving a different purpose.

The Tools Panel, on the left, contains icons representing different “tools” that you can use to interact with your application.

To the right of the tools panel is a set of tabs containing:

  • The Project Panel – showing the contents of your current project
  • The Assets Panel – showing all the controls that you can use in your project
  • Triggers and States panels

Projects Panel

Assets Panel

Below these tabs is the Objects and Timeline panel, which shows the structure of all objects in your user interface.

In the center of the screen is the Artboard, which shows a visual representation of your user interface and an optional pane showing the corresponding XAML.

On the far right, you’ll see the Properties Panel, where you can set properties for the currently selected object.

You can also click on the Resources tab to see the Resources panel, where you can browse/edit any resources that you’ve defined in your application.

Filed under Blend Tagged with ,

#511 – Blend Basics – The Tools Panel

March 9, 2012 1 Comment

When you start up Expression Blend, you’ll see a series of icons down the left side of the window.  Each icon represents a tool that you can use to work with elements in your application.  This area of the window is known as the Tools Panel.

This panel includes the following tools:

  •   Selection and Direct Selection – Select objects
  •    Pan – Slide the view in the artboard to see a different area of the GUI
  •     Zoom – Zoom in/out on the artboard
  •     Camera Orbit – Move the camera around in a 3D scene
  •     Eyedropper and Paint Bucket – Copy attributes from one object to another
  •     Gradient Tool – Create and edit gradient brushes
  •     Pen – Draw and modify paths
  •     Rectangle, Ellipse and Line – Draw a shape
  •     Grid et al – Add a layout panel
  •    TextBlock et al – Add a TextBox, Label or similar control
  •     Button et al – Add a Button, CheckBox or similar control

Filed under Blend Tagged with , ,

#510 – The Header of an Expander Can Be Anything

March 8, 2012 Leave a comment

The Header property of an Expander control doesn’t have to be a string.  You can set it to any object and that object will be displayed at the top of the Expander, whether the Expander is collapsed or expanded.

In the example below, we use an Image for the header of the Expander and then a GroupBox for its content.

        <Expander Margin="10" >
            <Expander.Header>
                <Image Source="Images/CptBlood-1935.png" Width="51" Height="72"/>
            </Expander.Header>
            <GroupBox Header="More Info">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Label Grid.Row="0" Grid.Column="0" Content="Title" FontWeight="Bold" HorizontalAlignment="Right"/>
                    <Label Grid.Row="0" Grid.Column="1" Content="Captain Blood"/>

                    <Label Grid.Row="1" Grid.Column="0" Content="Year" FontWeight="Bold" HorizontalAlignment="Right"/>
                    <Label Grid.Row="1" Grid.Column="1" Content="1935"/>

                    <Label Grid.Row="2" Grid.Column="0" Content="Director" FontWeight="Bold" HorizontalAlignment="Right"/>
                    <Label Grid.Row="2" Grid.Column="1" Content="Michael Curtiz"/>

                    <Label Grid.Row="3" Grid.Column="0" Content="Star" FontWeight="Bold" HorizontalAlignment="Right"/>
                    <Label Grid.Row="3" Grid.Column="1" Content="Errol Flynn"/>
                </Grid>
            </GroupBox>
        </Expander>

The Expander starts out collapsed:

Then shows GroupBox when expanded:

Filed under Controls Tagged with , , ,

#509 – Displaying a Busy Indicator in a Data Template

March 7, 2012 Leave a comment

Here’s another variation on the earlier example of displaying a spinning busy indicator using an Image control.  This example shows how to do the same thing when the Image control is hosted in a DataTemplate.

In the code below, the Image control is part of the data template.  If the Movie object’s Loading flag is true, the image will be displayed and the Storyboard will animate (spin) it.  Once Loading becomes false, the Image stops animating and disappears.

<Window x:Class="WpfApplication11.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="clr-namespace:System.Windows.Controls;assembly=PresentationFramework"
        Title="Spinny" Height="500" Width="300">

    <Window.Resources>
        <ResourceDictionary>
            <controls:BooleanToVisibilityConverter x:Key="boolToVisibilityConverter" />
        </ResourceDictionary>
    </Window.Resources>

    <Grid Margin="15">
        <ListBox ItemsSource="{Binding MovieList}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Name="imgBusy" Source="Images\spinny3.jpg" Height="40" Width="40"
                               Visibility="{Binding Path=Loading, Converter={StaticResource boolToVisibilityConverter}}">
                            <Image.RenderTransform>
                                <RotateTransform Angle="0" CenterX="20" CenterY="20"/>
                            </Image.RenderTransform>
                        </Image>

                        <Label Content="{Binding Title}"/>
                        <Label Content="{Binding Year}"/>
                        <Label Content="{Binding Director}"/>
                    </StackPanel>

                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding ElementName=imgBusy, Path=Visibility}" Value="Visible">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard Name="rotatingStoryboard">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="imgBusy"
                                            Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                            From="0" To="360" Duration="0:0:1.5" RepeatBehavior="Forever"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>

                            <!-- Must remove the Storyboard, or it will continue animating forever in the background -->
                            <DataTrigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="rotatingStoryboard"/>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

Filed under Controls Tagged with , ,

#508 – Displaying a Spinning Busy Indicator

March 6, 2012 3 Comments

You’ll often see a circular spinning icon used in an application to indicate that some work is in progress. You can easily do this in WPF by animating an Image control.

In the example below, we have an Image control that animates (rotates) whenever a Busy property becomes true.  (The Button triggers this flag).  We start the rotation when Busy becomes true using a Storyboard and then remove the Storyboard when the flag goes back to being false.

    <StackPanel>
        <Image Source="Images\Spinny3.jpg" Height="40" Width="40" Stretch="None"
               HorizontalAlignment="Center" VerticalAlignment="Center" Margin="15">
            <Image.RenderTransform>
                <RotateTransform  CenterX="20" CenterY="20"/>
            </Image.RenderTransform>
            <Image.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Busy}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard Name="rotatingStoryboard">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.Target="{Binding TemplatedParent}"
                                            Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
                                            From="0" To="360" Duration="0:0:1" RepeatBehavior="Forever"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="rotatingStoryboard"/>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
        <Button Content="Start-Stop" HorizontalAlignment="Center" Margin="15" Padding="10,5" Click="Button_Click_1"/>
    </StackPanel>

You could also set the Visibility of the Image based on the same flag (visible when busy).

Filed under Controls Tagged with , ,

#507 – Expander Control Lets you Expand/Collapse a Set of Controls

March 5, 2012 4 Comments

You can use an Expander control to hide a set of controls.  When you click on the Expander, the hidden controls are shown.  When you click again, they are hidden again.

The Expander control is a ContentControl, so contains a single child element.  This is typically a panel control, so that you can then include multiple controls in the panel.

    <StackPanel>
        <Expander Header="Goals" Margin="10" >
            <StackPanel Orientation="Vertical">
                <CheckBox Content="Read Ulysses"/>
                <CheckBox Content="Visit Bruges"/>
                <CheckBox Content="Take out the trash"/>
            </StackPanel>
        </Expander>
        <Label Content="Next guy in vertical StackPanel is down here"/>
    </StackPanel>

Notice that when the Expander is expanded, it takes up more room in the container (a StackPanel in this example) and other child elements are shifted.

Filed under Controls Tagged with , ,

← Older posts

Newer posts →