How to set a .PNG image as a TILED background image for my WPF Form?

Question

I'm learning WPF on my own and I can't seem to find a way to make this work.

Here's my code:

<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Height="600" Width="800" >
<DockPanel>
    <Menu DockPanel.Dock="Right"
          Height="30"              
          VerticalAlignment="Top"
          Background="#2E404B"
          BorderThickness="2.6">
        <Menu.BitmapEffect>
            <DropShadowBitmapEffect Direction="270" ShadowDepth="3" Color="#2B3841"/>
        </Menu.BitmapEffect>                          
    </Menu>
</DockPanel>

How can I make a tiled background image appear?

Answer 1

Set the ViewportUnits to absolute, which will allow you to define the pixel size of your image in the Viewport. In my example the image size is 32x32.

<Window.Background>
    <ImageBrush ImageSource="image.png" TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0,32,32"/>
</Window.Background>

Answer 2

Or, perhaps, you could use Visual Brush:

<Window
    x:Class="Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test" Height="600" Width="800">
  <Window.Background>
    <VisualBrush TileMode="Tile" Viewport="0,0,0.5,0.5">
      <VisualBrush.Visual>
        <Image Source="image.png"></Image>
      </VisualBrush.Visual>
    </VisualBrush>
  </Window.Background>
</Window>

The Viewport property sets the position and dimensions of the base tile. Have a look at examples here.

Basically, "0,0,0.5,0.5" means that the base tile will take space from point (0,0) to (0.5,0.5) - i.e. from the upper left corner of the output area to centre. (1,1) is the lower right corner. You should make use of MSDN Library. It's really useful. All the answers are there.