WindowsPhone TilePanel: Repeating(Tiling) image background(C#-XAML)

Advertisemen

Introduction:

Sometimes we may need to make repeat single image(ex.21x20) across the windows phone background.It is very simple process and also may be useful requirement for you in future.Because it is good way for providing nice background in a page.lets understand the sample

Here i have following three small size images 

                                                           

        Tile21x20.png       Tile60x60.png                 Tile64x32.png

So output is after repeating above small images:

Source File at:RepeatImageSample

Building the Sample:

This sample is targeted on WindowsPhone 7.1 OS.

Description:

In WPF you normally would do it with a tiled Background as described like 

XAML

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

Background>

 The WPF TileBrush has properties such as TileMode, Viewbox, and ViewportUnits that can be used to tile an image as a fill or as a background for a UI Element. For some reason, they’re not implemented in Silverlight/WindowsPhone. And please read more about this. So the only way of achieving this are writing something yourself or using a component .OK lets start with following steps:

Step1:

After downloading this sample,unzip it and add TilePanel.cs class to your project.

Step2:

Add the namespace to your xaml page

XAML

xmlns:Repeat="clr-namespace:ReapetImageinWP"

 Step3:

Then you can use it as follows in your XAML:

XAML

 <Repeat:TilePanel   Height="67" VerticalAlignment="Top" Margin="10" TileWidth="21" TileHeight="20"> 
     <Repeat:TilePanel.Image> 
              <ImageBrush ImageSource="Images/Tile21x20.png" /> 
       </Repeat:TilePanel.Image> 
 </Repeat:TilePanel>

 The panel will be filled with the image specified in your XAML. Adjust image and size as needed.

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)

Advertisemen