Setting the Background property of a Button Element in WPF using ImageBrush

Various WPF elements have Background property which can be set using background color using brush API provided in WPF. One of the cool features in WPF is using Image as background source. “ImageBrush” is the API written for setting background property of the WPF element. Let us see how.

Consider the following XAML:

<Grid Margin="22,98,22,21" Name="grid1">
<
ComboBox Height="42" HorizontalAlignment="Right"
Margin="0,15,27,0" Name="lstImages" VerticalAlignment="Top"
Width="171" SelectionChanged="lstImages_SelectionChanged">
<
ComboBoxItem>
<
Image Source="Images/Forest Flowers.jpg" Height="40" Width="40"/>
</
ComboBoxItem>
<
ComboBoxItem>
<
Image Source="Images/Frangipani Flowers.jpg" Height="40" Width="40"/>
</
ComboBoxItem>
<
ComboBoxItem>
<
Image Source="Images/Garden.jpg" Height="40" Width="40"/>
</
ComboBoxItem>
<
ComboBoxItem>
<
Image Source="Images/Green Sea Turtle.jpg" Height="40" Width="40"/>
</
ComboBoxItem>
<
ComboBoxItem>
<
Image Source="Images/Humpback Whale.jpg" Height="40" Width="40"/>
</
ComboBoxItem>
</
ComboBox>
<
Button Height="48" HorizontalAlignment="Left"
Margin="44,21,0,0" Name="btnDynamicImage" VerticalAlignment="Top"
Width="121">

</
Button>
</
Grid>

In the XAML shown above, the Combobox contains various images using “Image” as its child element. In this example, the background property will be set on the button “btnDynamicImage” dynamically. The code in C# and VB.NET is as shown below:

C#

private void lstImages_SelectionChanged(object sender,
SelectionChangedEventArgs e)
{
ComboBoxItem cmbItem = (ComboBoxItem)lstImages.SelectedValue;
Image img = cmbItem.Content as Image;
ImageSource ImgSrc = new BitmapImage(new Uri(img.Source.ToString()));
ImageBrush imgBrush = new ImageBrush(ImgSrc);
btnDynamicImage.Background = imgBrush;
}

VB.NET

Private Sub lstImages_SelectionChanged(ByVal sender As Object, _
ByVal e As SelectionChangedEventArgs)
Dim cmbItem As ComboBoxItem = CType(lstImages.SelectedValue, ComboBoxItem)
Dim img As Image = TryCast(cmbItem.Content, Image)
Dim ImgSrc As ImageSource = New BitmapImage(New Uri(img.Source.ToString()))
Dim imgBrush As New ImageBrush(ImgSrc)
btnDynamicImage.Background = imgBrush
End Sub

The code above explains the way of reading image object using “SelectedValue” property of the Combobox. Since the Combobox is a container of Combobox items, “SelectedValue” returns an object of Combobox item, of which “Content” property is used to read “Image” object. For reading images, WPF has provided the API “BitMapImage” using which “ImageSource” object is created, which is then passed to the “ImageBrush” API. This is then assigned to the background property of the “Button”.

Following is the output:

clip_image002



Will you give this article a +1 ? Thanks in advance


About The Author

Mahesh is having 10 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). He also blogs regularly at DotNetCurry.com. Follow him on twitter @maheshdotnet

1 comment:

Orlando said...

Hi! Why are you using so much code behind and so much effort casting 2 times and creating a useless imagesource? You can do everything using binding in xaml like this:
<ComboBox Width="65" Height="40" x:Name="cmbFlag">
<Image Source="Images/Flag1.jpg"/>
<Image Source="Images/Flag2.jpg"/>
<Image Source="Images/Flag3.jpg"/>
</ComboBox>
<Button Grid.Row="2" Margin="30">
<Button.Background>
<ImageBrush ImageSource="{Binding ElementName=cmbFlag,Path=SelectedItem.Source}"/>
</Button.Background>
</Button>


or if you want to use code behind you can avoid the imagesource class, creating a imagebrush using constructor without parameters and setting the imagesource property.

See you!