韩弈风 发表于 2012-12-22 02:46:57

WindowsPhone任意自定义Tile布局

<div id="cnblogs_post_body">曾经有人问过,怎么自定义Tile的布局呢,在这里我只能回答,这个布局已经被微软给定下来了http://images.cnblogs.com/cnblogs_com/wildfeng/201212/201212121149157975.jpg,无法自定义,你能做的只是给这个StandardTileData的几个属性赋值。
但我们可以用别的方式做出自定义布局的Tile来。原理很简单,我们只给StandardTileData赋背景图片。那这张背景图片我们可以让它显示我们想要的任意布局,那么我们只需要生成这张图片就OK了。
先看一面这张图片的效果,可以看到横着三排数据布局的一个Tile,其实我只是给这个Tile赋了一个 这样的图片而已,这个图片是我事前生成好的。
http://images.cnblogs.com/cnblogs_com/wildfeng/201212/201212121149205777.png
首先进入程序我们开始做界面,效果如下。
http://images.cnblogs.com/cnblogs_com/wildfeng/201212/201212121149294014.png
代码
 
<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>
页: [1]
查看完整版本: WindowsPhone任意自定义Tile布局