主页 > 知识库 > Windows 8技巧:Windows 8中FlipView的使用技巧介绍

Windows 8技巧:Windows 8中FlipView的使用技巧介绍

热门标签:电销机器人源码 电话机器人搭建 铁路电话系统 呼叫中心案例 硅谷的囚徒呼叫中心 电销机器人 万科 科大讯飞语音识别系统

  FlipView控件类似于翻页控件,并且是现成的翻页按钮,你只需要为其增加数据项即可。本文讲述两种方式的FlipView项目和展示。

  一:直接前台FlipViewItem

复制代码
代码如下:

FlipView>
FlipViewItem>
Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/2/3802/760_300_3802.jpg"/>
/FlipViewItem>
FlipViewItem>
Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/3/4023/c_760_300_4023.jpg"/>
/FlipViewItem>
FlipViewItem>
Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/3/3673/c_760_300_3673.jpg"/>
/FlipViewItem>
FlipViewItem>
Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/7/4017/c_760_300_4017.jpg"/>
/FlipViewItem>
FlipViewItem>
Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/2/3972/c_760_300_3972.jpg"/>
/FlipViewItem>
/FlipView>

  效果如下:

  二:前台设置DataTemplate,后台实体集方式添加数据项。

复制代码
代码如下:

FlipView Name="fvShow" Margin="100">
FlipView.ItemTemplate>
DataTemplate>
Grid>
Grid.Background>
ImageBrush Stretch="Uniform" ImageSource="{Binding ImgUrl}"/>
/Grid.Background>
TextBlock Height="30" VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="180 300 0 0" FontSize="20" Foreground="Blue" Text="{Binding ImgName}"/>
TextBlock Height="30" VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="180 350 0 0" FontSize="20" Foreground="Blue" Text="{Binding ImgAddr}"/>
/Grid>
/DataTemplate>
/FlipView.ItemTemplate>
/FlipView>


复制代码
代码如下:

/// summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// /summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.fvShow.ItemsSource = ImgModel.GetImgData();
}/p> p> /// summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// /summary>
/// param name="e">描述如何访问此页的事件数据。Parameter
/// 属性通常用于配置页。/param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}/p> p> /// summary>
/// 图片实体
/// /summary>
public class ImgModel
{
/// summary>
/// 图片名字
/// /summary>
public string ImgName { get; set; }/p> p> /// summary>
/// 图片地址
/// /summary>
public string ImgAddr { get; set; }/p> p> /// summary>
/// 图片URL
/// /summary>
public string ImgUrl { get; set; }/p> p> public static ListImgModel> GetImgData()
{
ListImgModel> list = new ListImgModel>();
list.Add(new ImgModel() { ImgName = "名字:北京冬景", ImgAddr = "地址:北京市", ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/2/3922/760_300_3922.jpg" });
list.Add(new ImgModel() { ImgName = "名字:上海春景", ImgAddr = "地址:上海市", ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/7/3147/760_300_3147.jpg" });
list.Add(new ImgModel() { ImgName = "名字:天津秋景", ImgAddr = "地址:天津市", ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/6/3966/c_760_300_3966.jpg" });
list.Add(new ImgModel() { ImgName = "名字:海南夏景", ImgAddr = "地址:海南市", ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/5/3695/760_300_3695.jpg" });
list.Add(new ImgModel() { ImgName = "名字:成都风景", ImgAddr = "地址:成都市", ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/8/2518/760_300_2518.jpg" });
return list;
}
}

  看此方式的效果如下:

  最后如需源码请点击 Win8FlipView_jb51net 下载。

标签:六安 黄石 呼和浩特 天门 株洲 南通 新余 黔东

巨人网络通讯声明:本文标题《Windows 8技巧:Windows 8中FlipView的使用技巧介绍》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266