#1,164 – Using Animation to Bounce a Control

The XAML fragment below will start a Button bouncing when you click on it.  This uses the BounceEase object as an easing function.  You can play with the animation duration, # bounces, and “bounciness” to get different effects.

	<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Button Content="Click Me" Margin="20,5,20,35"
                VerticalAlignment="Bottom">
            <Button.RenderTransform>
                <TranslateTransform x:Name="transTransform" X="0" Y="0"/>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="0" To="35" Duration="00:00:01" 
                                    Storyboard.TargetName="transTransform" 
                                    Storyboard.TargetProperty="Y"
                                    AutoReverse="True" RepeatBehavior="Forever">
                                <DoubleAnimation.EasingFunction>
                                    <BounceEase Bounces="1" EasingMode="EaseOut"
                                                Bounciness="2" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Border Grid.Row="1"
            BorderBrush="Black" BorderThickness="10"/>
    </Grid>

#1,163 – Make an Image Clickable with a Control Template

You can allow clicking on an Image by using it as the control template for a Button.

In the example below, we define a button that consists of an image and a border that lights up when you hover over the image.

	<StackPanel>
		<Button Click="Button_Click"
                Margin="10"
			    HorizontalAlignment="Center"
			    ToolTip="Click on Fred">
			<Button.Template>
				<ControlTemplate>
					<Border x:Name="theBorder" 
                            BorderBrush="Transparent"
                            BorderThickness="2">
						<Image Source="Astaire.png" Height="45"/>
					</Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" TargetName="theBorder" 
                                    Value="LightSkyBlue"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
				</ControlTemplate>
			</Button.Template>
		</Button>
	</StackPanel>

Below, we can see the clickable Image in action.
1163-001

1163-002

1163-003

#540 – Adding Common Controls in Blend

You can add various common controls to your application in Blend using buttons on the tools panel.  You select the icon for the control that you want to add and then double-click the icon to add it.

If you left-click and hold on the Button icon on the tools panel, or right-click, you’ll see a series of controls that you can insert by clicking on the icon at this location in the tools panel.

  • Button – Click on a button to perform some action
  • CheckBox – Check an item in a list
  • ComboBox – Select an item from a dropdown list
  • ListBox – Select an item from a list
  • RadioButton – Select one item from a group
  • ScrollBar – Scroll stuff
  • Slider – Pick a value from a range
  • TabControl – Switch between separate tabbed parts of app
  • GridSplitter – Make section of app bigger/smaller

Select the control that you want and then double-click to add to your GUI.

#347 – How to Set Content Property for Button Based on Command

When you set the Command property of a MenuItem, the menu item automatically picks up a label from the command object, so you don’t need to set the menu item’s Header property.  Unfortunately, this doesn’t work for Button controls.

If you do want to set a Button control’s Content property based on the Text property of the associated command, you can do this in either XAML or code.

To set Content based on command in XAML:

        <Button Content="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}"
                Command="ApplicationCommands.Open"
                VerticalAlignment="Center" Padding="10,5" Margin="5"/>

To set the Content in code:

            btnOpen.Content = ApplicationCommands.Open.Text;

#342 – Binding a Button to a Command

In WPF, the preferred method for executing some code when a button is clicked is to use a commandA command is an object that represents an action to be taken and is bound to a particular method that performs the action.  The button is then associated with the command by setting its Command property.

Here’s an example.

        <Button Content="Open" Command="ApplicationCommands.Open" />

ApplicationCommands.Open is a predefined command that is just a placeholder that you bind to some “open” logic in your application.  You do this by adding a new CommandBinding object to the parent window’s CommandBindings collection.

You specify handlers for the Executed and CanExecute events of the command.

		public MainWindow()
		{
			this.InitializeComponent();

            CommandBindings.Add(new CommandBinding(ApplicationCommands.Open, Open_Executed, Open_CanExecute));
        }

        public void Open_Executed(object sender, ExecutedRoutedEventArgs e)
        {
            // Open file here
        }

        public void Open_CanExecute(object sender, CanExecuteRoutedEventArgs e)
        {
            e.CanExecute = true;   // Can we open file?
        }

#341 – Create a Button with an Image and Text

Since a Button is a ContentControl, it can have any other control as its content, rather than text.  You can include an Image control, to create a button with an image on its face.  You can also include multiple controls on the button, by settings its main content to be a container, which in turn contains other controls.

In the example below, we create a Button that has both an image and some text (a caption).

        <Button HorizontalAlignment="Center" VerticalAlignment="Center"
                Margin="10" >
            <StackPanel>
                <Image Source="Misc-Settings-icon.png" Height="64" Width="64"/>
                <Label Content="Settings" HorizontalAlignment="Center"/>
            </StackPanel>
        </Button>

#340 – Create a Button with an Image

To create a Button that has an image on the surface of the button, rather than text, you use an Image control as the content of the button.

You need to tell the Image control where to find its image.  The easiest way to locate images is to just include them as resources in your project.

  • Embed the image as a binary resource in your project
  • Set the Build Action of the image to Resource
  • Use the filename as the image’s Source

In the example below, we’ve added the Misc-Settings-icon.png file to our project.

We can then create a Button that has this image as its main content.  Because Button is a ContentControl, it can contain another control as its content.

    <StackPanel>
        <Button HorizontalAlignment="Center" VerticalAlignment="Center"
                Margin="10" >
            <Image Source="Misc-Settings-icon.png" Height="64" Width="64"/>
        </Button>
        <Label Content="That's a button up there.." HorizontalAlignment="Center"/>
    </StackPanel>

#339 – Wrapping a Button’s Text Content to Multiple Lines

When a Button control automatically sizes to fit its content, it will grow to fit the text in the Content property.  However, the text will always remain on a single line.

        <Button Content="Click me if you want to see something cool.  In fact, click as many times as you like."
                HorizontalAlignment="Center" VerticalAlignment="Center"


If you constrain the button’s Width, however, the text will be clipped.

To get the text on a face of a Button to wrap, you can use a TextBlock as the button’s Content, rather than a simple text string.  You also set the TextWrapping property on the TextBlock.

        <Button HorizontalAlignment="Center" VerticalAlignment="Center"
                Margin="10" Width="120">
            <TextBlock Text="Click me if you want to see something cool.  In fact, click as many times as you like."
                       TextWrapping="Wrap"/>
        </Button>

#316 – Changing the ClickMode of a Button

A standard Button in WPF (and in Windows in general) performs some action when you click it.  Traditionally “click it” has meant “depress and then release the left mouse button”.  The action associated with the button typically occurs only on the release of the button.

In WPF, you can change when the button fires its Click event by using the Button.ClickMode property.

  • ClickMode.Release – fires when you release the mouse button  (Default)
  • ClickMode.Press – fires when you press the mouse button
  • ClickMode.Hover – fires when you hover over the button
<StackPanel>
    <Button Content="Release" ClickMode="Release" Height="30" Width="100" Margin="15" Click="Button_Click"/>
    <Button Content="Press" ClickMode="Press" Height="30" Width="100" Margin="15" Click="Button_Click"/>
    <Button Content="Hover" ClickMode="Hover" Height="30" Width="100" Margin="15" Click="Button_Click"/>
    <Label Name="lblInfo" Margin="15"/>
</StackPanel>

 

        private int clickNum = 1;
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;

            lblInfo.Content = string.Format("Click {0}, Mode {1}", clickNum++, b.ClickMode.ToString());
        }

#300 – Button is a ContentControl

Button is a ContentControl, which means that it can contain exactly one child control.  The child element can be any .NET object.

A simple string is the most common content for a Button.

        <Button Content="Click me" Click="Button_Click"/>

Examining the Button control at runtime, you can see that its stores an instance of a string in its Content property.  Also note that the base type of Content is object, meaning that the button could store any .NET object as its content.

Here’s a Button that contains a single Ellipse control as its content:

        <Button Click="Button_Click" Width="140" Height="80">
            <Ellipse Fill="PaleGreen" Stroke="Blue" StrokeThickness="5" Width="120" Height="60"/>
        </Button>


And here’s a Button that uses a StackPanel to host several child controls.

        <Button Click="Button_Click" Width="140" Height="120">
            <StackPanel>
                <Ellipse Stroke="Blue" StrokeThickness="5" Width="120" Height="60"/>
                <Label Content="Name my ellipse"/>
                <TextBox />
            </StackPanel>
        </Button>