WindowsPhone任意自定义Tile布局

韩弈风

<div id="cnblogs_post_body">曾经有人问过，怎么自定义Tile的布局呢，在这里我只能回答，这个布局已经被微软给定下来了，无法自定义，你能做的只是给这个StandardTileData的几个属性赋值。
  但我们可以用别的方式做出自定义布局的Tile来。原理很简单，我们只给StandardTileData赋背景图片。那这张背景图片我们可以让它显示我们想要的任意布局，那么我们只需要生成这张图片就OK了。
  先看一面这张图片的效果，可以看到横着三排数据布局的一个Tile，其实我只是给这个Tile赋了一个 这样的图片而已，这个图片是我事前生成好的。
  
  首先进入程序我们开始做界面，效果如下。
  
  代码
   
  <div class="cnblogs_code" style="border-top: #cccccc 1px solid; height: 600px; border-right: #cccccc 1px solid; border-bottom: #cccccc 1px solid; padding-bottom: 5px; padding-top: 5px; padding-left: 5px; border-left: #cccccc 1px solid; padding-right: 5px; width: 997px; background-color: #f5f5f5">   <Grid x:Name="LayoutRoot" Background="Transparent">        <Button x:Name="btnOne" Content="布局一" HorizontalAlignment="Left" Margin="36,46,0,0" VerticalAlignment="Top" Click="btnOne_Click"/>        <Button x:Name="btnTwo" Content="布局二" HorizontalAlignment="Left" Margin="36,371,0,0" VerticalAlignment="Top" Click="btnTwo_Click"/>        <StackPanel            x:Name="ui1"            HorizontalAlignment="Left"             Height="173"             Margin="232,46,0,0"             VerticalAlignment="Top"             Width="173">            <Grid Height="58" Background="Red">                <TextBlock Text="横着排三排" VerticalAlignment="Center" HorizontalAlignment="Center"/>            </Grid>            <Grid Height="58" Background="Blue">                <TextBlock Text="布局任意自定义" VerticalAlignment="Center" HorizontalAlignment="Center"/>            </Grid>            <Grid Height="57" Background="Yellow">                <TextBlock Text="内容任意自定义" Foreground="red" VerticalAlignment="Center" HorizontalAlignment="Center"/>            </Grid>        </StackPanel>        <Grid             x:Name="ui2"            HorizontalAlignment="Left"             Height="173"             Margin="232,321,0,0"             VerticalAlignment="Top"             Width="173">            <Image Source="psu.png"/>        </Grid>    </Grid>