Today I fought with the WPF ImageBrush and PNGs. I lost.

For the life of me, I cannot figure out how to get a WPF ImageBrush to use a PNG and tile it appropriately. I tried various ViewPort and ViewBox settings, but it would not place the images directly next to each other. Instead, it had space between the images in the tiled output.

I found Hanselman's article about the issues in WPF where the PNG does not use a 96DPI resolution. Even after getting these set to 96DPI, the things still wouldn't tile correctly.

In my case, the images are very small PNGs used to create various patterns. Some of them are 2x2, while some are 10x10 pixels. As a last resort, I used MS Paint to "Save As Bitmap". After switching over to the bitmaps, the tiles worked like a charm. The ViewPort / ViewBox that should have worked for the PNGs worked just fine for the BMPs.

KaXAML Tile Sample

Here's a sample showing what the PNGs looked like versus the BMPs.

image

Here's the code that generated the above KaXAML sample.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid TextBlock.FontSize="20">  
    <Grid.Resources>
      <!-- PNG -->
      <ImageBrush x:Key="HatchBrush01png" ImageSource="c:/temp/patterns/pattern01.png" TileMode="Tile" 
        Stretch="None" Viewport="0,0,4,4" ViewportUnits="Absolute" Viewbox="0,0,4,4" ViewboxUnits="Absolute"/>
      <ImageBrush x:Key="HatchBrush02png" ImageSource="c:/temp/patterns/pattern02.png" TileMode="Tile" 
        Stretch="None" Viewport="0,0,12,2" ViewportUnits="Absolute" Viewbox="0,0,12,2" ViewboxUnits="Absolute"/>
      <ImageBrush x:Key="HatchBrush03png" ImageSource="c:/temp/patterns/pattern03.png" TileMode="Tile" 
        Stretch="None" Viewport="0,0,2,2" ViewportUnits="Absolute" Viewbox="0,0,2,2" ViewboxUnits="Absolute"/>

      <!-- BMP -->
      <ImageBrush x:Key="HatchBrush01bmp" ImageSource="c:/temp/patterns/pattern01.bmp" TileMode="Tile" 
        Stretch="None" Viewport="0,0,4,4" ViewportUnits="Absolute" Viewbox="0,0,4,4" ViewboxUnits="Absolute"/>
      <ImageBrush x:Key="HatchBrush02bmp" ImageSource="c:/temp/patterns/pattern02.bmp" TileMode="Tile" 
        Stretch="None" Viewport="0,0,12,2" ViewportUnits="Absolute" Viewbox="0,0,12,2" ViewboxUnits="Absolute"/>
      <ImageBrush x:Key="HatchBrush03bmp" ImageSource="c:/temp/patterns/pattern03.bmp" TileMode="Tile" 
        Stretch="None" Viewport="0,0,2,2" ViewportUnits="Absolute" Viewbox="0,0,2,2" ViewboxUnits="Absolute"/>
    </Grid.Resources>
    
    <Grid.ColumnDefinitions>
      <ColumnDefinition></ColumnDefinition>
      <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    
    <StackPanel>
      <Label>PNG</Label>
      <Rectangle
        Stroke="White"
        StrokeThickness="10"
        Fill="{StaticResource HatchBrush01png}"
        HorizontalAlignment="Stretch"
        Height="100"
      />
      <Rectangle
        Stroke="White"
        StrokeThickness="10"
        Fill="{StaticResource HatchBrush02png}"
        HorizontalAlignment="Stretch"
        Height="100"
      />
      <Rectangle
        Stroke="White"
        StrokeThickness="10"
        Fill="{StaticResource HatchBrush03png}"
        HorizontalAlignment="Stretch"
        Height="100"
      />
    
    </StackPanel>
    <StackPanel Grid.Column="1">
      <Label>BMP</Label>
      <Rectangle
        Stroke="White"
        StrokeThickness="10"
        Fill="{StaticResource HatchBrush01bmp}"
        HorizontalAlignment="Stretch"
        Height="100"
      />
      <Rectangle
        Stroke="White"
        StrokeThickness="10"
        Fill="{StaticResource HatchBrush02bmp}"
        HorizontalAlignment="Stretch"
        Height="100"
      />
      <Rectangle
        Stroke="White"
        StrokeThickness="10"
        Fill="{StaticResource HatchBrush03bmp}"
        HorizontalAlignment="Stretch"
        Height="100"
      />
    
    </StackPanel>
  
  </Grid>
</Page>

IMAGES:


image

 

Maybe some kind soul will be willing to set me right on this. Seems like it should work, but it doesn't. Luckily, for now, using an equivalent BMP will work just fine.

Cheers.