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

Tweet

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:

Tweet

About The Author

Mahesh Sabnis is a Microsoft MVP having over 18 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