Everything a WPF Developer Needs to Know, in Bite-Sized Chunks
January 12, 2012 1 Comment
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>
July 13, 2011 Leave a comment
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>
July 12, 2011 Leave a comment
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.
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>
May 11, 2011 Leave a comment
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>
April 25, 2011 2 Comments
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>
April 22, 2011 1 Comment
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.
April 19, 2011 1 Comment
An Image control will normally try to fill all of the available space, with the Stretch property dictating in which dimensions the image is stretched to fill the container.
If you want to stretch the image to fill the space, but you want a little whitespace around the edges of the image, you can use the Margin property.
When specified in XAML, the Margin property takes four comma-separated values, specifying “left, top, right, bottom” margin values. The units are the standard WPF device independent units.
<Image Name="imgKlondike" Source="TractorSm.png" Margin="5,10,5,10"/>
Notice that if we look at the Image control in the designer, we can see the margins. The light blue lines show the boundaries of the Image control itself and you can see the margins outside the line. The white vertical bands are due to the Stretch behavior–the image stretches just to fit, preserving its aspect ratio.
April 18, 2011 Leave a comment
If an Image control is not set to fill all of the available space, you can specify how it should be aligned horizontally and vertically within the available space.
In the example below, the Stretch property is set to Uniform, so we would normally have empty space on either side of the image when the window’s aspect ratio is greater than the aspect ratio of the image. The Image control’s HorizontalAlignment is set to Center, by default, so there are white bars on both sides of the image.
<Image Name="imgKlondike" Source="TractorSm.png"/>
If we want to left-align the image in the available space, we can set the HorizontalAlignment property to Left.
<Image Name="imgKlondike" Source="TractorSm.png" HorizontalAlignment="Left"/>
April 17, 2011 Leave a comment
To add a border around an Image control, you can embed the Image in a Border element.
<Border BorderBrush="SaddleBrown" BorderThickness="3"> <Image Name="imgKlondike" Source="TractorSm.png" /> </Border>
If this Border element is the single child element in a Window, this will look like:
Notice that the Border fills the available space in the Window, but the Image ends up with white bands on either size. Because the image’s Stretch property is set to Uniform, it’s preserving the aspect ratio of the image and so doesn’t fill all of the available space.
If you want the Border to surround the image without including the white bands, you can add alignment attributes to the Border element.
<Border BorderBrush="SaddleBrown" BorderThickness="3" HorizontalAlignment="Center" VerticalAlignment="Center"> <Image Name="imgKlondike" Source="TractorSm.png" /> </Border>
April 16, 2011 Leave a comment
Normally, when you set the Stretch property of an Image control to something other than None, the image can be resized up (larger) or down (smaller), obeying the rule of the specific Stretch value that you specify.
For example, if Stretch is set to Uniform, so that the image stretches to preserve the aspect ratio, you can resize a container window so that the image ends up either larger or smaller than its original size.
Smaller than original:
Larger than original:
If you want to constrain the image so that it can’t go larger or smaller than the original size, you can use the StretchDirection property.
Setting StretchDirection to DownOnly indicates that you can make the image smaller than the original, but not larger.
Setting StretchDirection to UpOnly indicates that you can make the image larger than the original, but not smaller.
