combine image and solidcolor background for a WPF Form

Question

I have a WPF form that I am building. I want to specify a background image for the window, which is easy enough. However, I also want to specify a color so that the area of the form not covered by the image is white. I've seen some examples that show using two different background brushes, but when I try that VS.NET tells me I can't have multiple brushes.

This is the XAML I'm using

<Window x:Class="Consent.Client.Shell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cal="http://www.codeplex.com/CompositeWPF"
    Title="Shell" WindowStyle="None" WindowState="Maximized" FontSize="24">
    <Window.Background>
        <ImageBrush AlignmentX="Left" AlignmentY="Top"  Stretch="None" TileMode="None" ImageSource="logo_header2.png" />
    </Window.Background>
    <ItemsControl Background="White" VerticalAlignment="Center" cal:RegionManager.RegionName="MainRegion" >
    </ItemsControl>
</Window>

This works great for the image, but the background not covered by the image is black. How do I make it white? Changing the image itself is not really an option.

Answer 1

Try this (I removed everything not directly relevant to the question to make the code clearer):

<Window x:Class="Consent.Client.Shell"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Background="White">
   <Grid>
      <Grid.Background>
         <ImageBrush ImageSource="logo_header2.png" />
      </Grid.Background>
      <ItemsControl>
      </ItemsControl>
   </Grid>
</Window>

Basically, set the window's background to the behind the image color, than put a grid in the window and give the grid you background image, put everything inside the grid instead of directly in the window.

Answer 2

As an Extension to Nirs answer. If you want to have margins around your content, but let the background image be able to fill the whole window, you can also stack backgrounds using borders:

<Window x:Class="Consent.Client.Shell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="White">

    <Border Padding="10">
        <Border.Background>
            <ImageBrush ImageSource="logo_header2.png" />
        </Border.Background>
     <!--<Your content >-->
    </Border>

</Window>

Answer 3

I'm not sure you can combine brushes. You could play around with ImageBrush, or you could forget the "background" and stack the items on top of each other in a Grid:

<Window x:Class="Consent.Client.Shell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cal="http://www.codeplex.com/CompositeWPF"
    Title="Shell" WindowStyle="None" WindowState="Maximized" FontSize="24">
    <Grid>
        <Image Source="logo_header2.png" Stretch="None" VerticalAlignment="Top" />
        <ItemsControl Background="White" VerticalAlignment="Center" cal:RegionManager.RegionName="MainRegion" >
        </ItemsControl>
    </Grid>
</Window>