Google WindowsPhone TilePanel: Repeating(Tiling) image background(C#-XAML) | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Tuesday 6 May 2014

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

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"/> 
</Window.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  

Have a nice day by  :)

1 comment:

  1. Thanks for sharing such an informative article. I really enjoyed it. Please visit http://goo.gl/Yv5GSw

    ReplyDelete

Search Engine Submission - AddMe