#686 – Using Animation to Make an Image Pulse

You can animate the opacity of an Image element to make it appear to pulse.  Below is one example of how to do this, using a Storyboard.  We animate the image’s Opacity property, down to 10% opaque over half a second and then back again.

    <StackPanel Margin="15">
        <CheckBox Content="Turn On" Margin="10" IsChecked="True"/>
        <StackPanel Orientation="Horizontal">
            <CheckBox Content="Tune In" Margin="10" VerticalAlignment="Center"/>
            <Image Name="funkyArrow" Source="Arrow.png" Margin="15,0">
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="funkyArrow"
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.1" Duration="0:0:0.5"
                                    AutoReverse="True" RepeatBehavior="Forever"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Image.Triggers>
            </Image>
        </StackPanel>
        <CheckBox Content="Drop Out" Margin="10"/>
    </StackPanel>


Advertisements

#471 – How FlowDirection Works with the Image Element

Unlike other elements, the Image control will not inherit it’s parent’s value of FlowControl.  However, you can explicitly set FlowControl for an Image to RightToLeft, which will flip the image horizontally.

    <StackPanel Orientation="Horizontal">
        <Image Source="Images\BestYears.jpg" Margin="5"/>
        <Image Source="Images\BestYears.jpg" Margin="5" FlowDirection="RightToLeft"/>
    </StackPanel>

#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>

#297 – Create a Mirror Image of a Control or Image

You can flip any image or control, creating a mirror image, by using a 2D scaling transformation.

A scaling transform is represented by an instance of the ScaleTransform class.  You use it to scale the visual representation of any image or control in the X or Y dimension (or both).

The ScaleX and ScaleY properties of the ScaleTransform represent the scaling factors in either dimension.  These values are normally positive, but we can use values less than zero to indicate that we also want the object flipped in the corresponding dimension.

In the example below, we scale an image to half (50%) its original size, and flip it in the X dimension.

	<StackPanel Orientation="Horizontal">
		<Image Source="NativeAmerican.jpg" Margin="10" Stretch="None"/>
		<Image Source="NativeAmerican.jpg" Margin="10" Stretch="None">
			<Image.LayoutTransform>
				<ScaleTransform ScaleX="-0.5" ScaleY="0.5"/>
			</Image.LayoutTransform>
		</Image>
	</StackPanel>

#285 – Rotating an Image

You can rotate an Image control by assigning a rotation transform to its LayoutTransform property.

		<Image Source="TractorSm.png">
			<Image.LayoutTransform>
				<RotateTransform Angle="45"/>
			</Image.LayoutTransform>
		</Image>

#284 – Making an Image Translucent Using the Opacity Property

Since the Image control inherits (indirectly) from UIElement, it has an Opacity property.  The Opacity property allows content behind the image to show through the image.  Its value ranges from 0.0 to 1.0, with 0.0 indicating that the image is fully transparent (doesn’t appear at all) and 1.0 indicating that the image is fully opaque (nothing shows through).

In the example below, we bind a Slider‘s Value property to the Opacity of an Image, so that we can easily change the opacity.  We also set the window background to a gradient fill.

When the Opacity is 1.0, the image is fully opaque and the gradient doesn’t show through the image at all.

When Opacity is 0.0, the image is transparent and we just see the gradient.

When the Opacity is between 0.0 and 1.0 (e.g. 0.2), the image is translucent and the background gradient shows through.