WPF ImageBrush Will Not Properly Tile PNGs

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 2×2, while some are 10×10 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.

One thought on “WPF ImageBrush Will Not Properly Tile PNGs

Add yours

  1. I think that a vector based approach would be ideal, but the assets are from a designer using Fireworks. We tried importing the fireworks stuff into blend, but that didn’t work. I could probably recreate these with a visual brush, but was hoping to save a bit of time. Maybe its better to go vector based anyway.Thanks for the comment and suggestion to check Chris Bennage.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: