首页新闻找找看学习计划

wp8应用中的磁贴列表如何实现像wp的开始屏幕磁贴列表一样

0
悬赏园豆:50 [已解决问题] 解决于 2014-08-27 10:03

wp8应用中的磁贴列表如何实现像wp的开始屏幕磁贴列表一样,应用内的磁贴列表,设置了背景图,有黑边,磁贴可以显示设置的背景图,磁贴列表整体往下拉的时候可,露出来的是黑区域,而不是背景图,就像wp8开始屏幕设置了背景图的那种效果!可能表达不是很清晰,不明白,可以补充,谢谢!

技术_菜鸟的主页 技术_菜鸟 | 初学一级 | 园豆:119
提问于:2014-08-20 09:46
< >
分享
最佳答案
1

很有意思的问题, 我想了下, 最好的方式就是通过图片+listbox叠加来实现, 同时让每个列表项背景透明显示图片, 试了下效果如下:

 

 

不知道效果是否如楼主描述的一致. 实现代码如下:

Xaml:

 1 <Grid x:Name="ContentPanel" Grid.Row="1" Background="Red">
 2             <Image Source="http://www.huabian.com/uploadfile/2014/0620/20140620052440718.jpg" Stretch="UniformToFill"></Image>
 3             <ListBox Name="ListBox1">
 4                 <ListBox.ItemContainerStyle>
 5                     <Style TargetType="ListBoxItem">
 6                         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
 7                     </Style>
 8                 </ListBox.ItemContainerStyle>
 9                 <ListBox.ItemTemplate>
10                     <DataTemplate>
11                         <Grid>
12                             <Grid.RowDefinitions>
13                                 <RowDefinition></RowDefinition>
14                                 <RowDefinition Height="12"></RowDefinition>
15                             </Grid.RowDefinitions>
16                             <Grid Height="173">
17                                 <Grid.ColumnDefinitions>
18                                     <ColumnDefinition Width="12"></ColumnDefinition>
19                                     <ColumnDefinition Width="173"></ColumnDefinition>
20                                     <ColumnDefinition Width="12"></ColumnDefinition>
21                                     <ColumnDefinition Width="173"></ColumnDefinition>
22                                     <ColumnDefinition Width="*"></ColumnDefinition>
23                                 </Grid.ColumnDefinitions>
24                                 <Border Background="Black" Grid.Column="0"></Border>
25                                 <Border Background="Transparent" Grid.Column="1">
26                                     <TextBlock Text="{Binding}"></TextBlock>
27                                 </Border>
28                                 <Border Background="Black" Grid.Column="2"></Border>
29                                 <Border Background="Transparent" Grid.Column="3">
30                                     <TextBlock Text="{Binding}"></TextBlock>
31                                 </Border>
32                                 <Border Background="Black" Grid.Column="4"></Border>
33                             </Grid>
34                             <Grid Background="Black" Grid.Row="1"></Grid>
35                         </Grid>
36                     </DataTemplate>
37                 </ListBox.ItemTemplate>
38             </ListBox>
39         </Grid>

cs:

ListBox1.ItemsSource = new string[] { "aaa", "bbb", "ccc", "aaa", "bbb", "ccc", "aaa", "bbb", "ccc" };

如果要真正用, 需要对数据组织稍加改动下, 应该难不倒楼主了, 呵呵.

收获园豆:50
jpss | 菜鸟二级 |园豆:265 | 2014-08-23 11:22

哈哈,这图好诱人啊,你说的这个磁贴整体往下拉,露出的区域是黑区域吗,我直接在grid(外嵌套ScrollViewer)中实现,但滚动时,背景是固定的,露出来的是背景图,但我要的效果就是磁贴滚动,但背景图是不动的,类似wp8的开始桌面一样!另外问一个,程序栏可以设置只剩下电池图标吗!

技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-23 11:32

@技术_菜鸟: 是的, 背景图不动, 所以我放了两张图做示意啊..  电池的不可以.

jpss | 园豆:265 (菜鸟二级) | 2014-08-23 11:57

@jpss: 能给源代码看看吗

技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-23 11:57

@技术_菜鸟: ..不都贴上了么..

jpss | 园豆:265 (菜鸟二级) | 2014-08-23 12:00

@jpss: 整个工程的!可以的话,压一个包发给我,我运行一下,看看效果!麻烦的话就算啦

技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-23 12:01

@技术_菜鸟: http://files.cnblogs.com/jpss/20140823-PhoneApp1.zip

jpss | 园豆:265 (菜鸟二级) | 2014-08-23 12:06

@jpss: 谢谢啦,看了一下,磁贴整体往下拉的时候,还是可以看到背景图,而不是将露出的区域变成黑区域!

技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-23 12:43

@技术_菜鸟: 明白你的意思了, 这个也比较简单, 需要稍稍改一下listbox的template.更新后示例文件  http://files.cnblogs.com/jpss/20140823-PhoneApp1-2.zip

jpss | 园豆:265 (菜鸟二级) | 2014-08-23 16:22

@jpss: 看了,非常好,我用grid和ScrollViewer加上你那两个关键的

<StackPanel Background="Black" Margin="0,-500,0,0"></StackPanel>
<StackPanel Background="Black" Margin="0,-0,0,-500"></StackPanel>,也实现了类似效果,非常谢谢哈

技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-23 17:29

@jpss: 想问一下,<StackPanel Background="Black" Margin="0,-500,0,0"></StackPanel>设置这个-500,为什么就会出现黑色的区域了,这个sp不是没有高度吗,背景怎么显示出来的?

技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-25 11:58

@技术_菜鸟: 可以搜索"负margin", 原理和网页布局用到的负边距一样. 当然, 如果不放心, 加上高度也没有问题.

jpss | 园豆:265 (菜鸟二级) | 2014-08-25 12:18
其他回答(1)
0

可以用GridView试试,但估计工作量会不小。

XiaoFaye | 园豆:3082 (老鸟四级) | 2014-08-20 10:06

wp有gridview么?貌似gridview是asp.net的吧

支持(0) 反对(0) 技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-20 10:08

@技术_菜鸟: 

晕,不好意思,最近在搞Windows 8开发,一下搞混了,以为WP里面也有。。。

支持(0) 反对(0) XiaoFaye | 园豆:3082 (老鸟四级) | 2014-08-20 10:12

@XiaoFaye: win8也差不多啦,有没有什么思路啊

支持(0) 反对(0) 技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-20 10:19

@技术_菜鸟: 

XAML的灵活性非常高呀,你完全可以自己组合类似的功能出来吧?

支持(0) 反对(0) XiaoFaye | 园豆:3082 (老鸟四级) | 2014-08-20 10:24

@XiaoFaye: wp8手机用过吗,它的开始屏幕的背景图是怎么实现的?

支持(0) 反对(0) 技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-20 10:26

@技术_菜鸟: 

手上就是925. 不就一个背景图吗?有什么问题。

支持(0) 反对(0) XiaoFaye | 园豆:3082 (老鸟四级) | 2014-08-20 10:27

@XiaoFaye: 我就想在应用中的磁贴列表也实现类似的效果

支持(0) 反对(0) 技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-20 10:38

@技术_菜鸟: 

可以试试改造Grid控件来达到目的。

支持(0) 反对(0) XiaoFaye | 园豆:3082 (老鸟四级) | 2014-08-20 10:40

@XiaoFaye: 嗯,自己想想看!

支持(0) 反对(0) 技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-20 10:42

@XiaoFaye: 谢谢了!

支持(0) 反对(0) 技术_菜鸟 | 园豆:119 (初学一级) | 2014-08-20 10:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册