上一篇 提到了 UWP 轨道视图Orbit View,这次就说一下卡片视图,毕竟两个差不多。

卡片视图,效果如其名,卡片一样,左右滑动,当然能翻牌最好了。

嗯,我这个可以的额(⊙﹏⊙)。。。

看下效果先

可以左右滑动,点击查看各项的内容:看下gif

xaml:

<ScrollViewer Grid.Row="1" ZoomMode="Enabled" VerticalScrollMode="Disabled" HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">
<ItemsControl x:Name="cardItems">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="models:ID3Tag">
<Grid Margin="50">
<Canvas x:Name ="InfoCanvas" Width="200" Height="300" >
<Grid x:Name="Info" Width="200" Height="300" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel VerticalAlignment="Bottom">
<TextBlock Text="{x:Bind Title}" FontSize="20" Margin="4,0"/>
<TextBlock Text="{x:Bind PerformersString}" FontSize="12" Margin="4,0"/>
<TextBlock Text="{x:Bind Album}" FontSize="12" Margin="4,0"/>
</StackPanel>
</Grid>
</Canvas>
<Grid x:Name="Image" Width="200" Height="300">
<!--Insert Canvas control to workaround XAML-COMP interop with property sharing-->
<Canvas>
<Grid x:Name="Photo" Width="200" Height="300">
<Image x:Name="Cover" Width="200" Height="300" Stretch="UniformToFill" Source="{x:Bind Cover}"/>
<TextBlock x:Name="NameText" Text="{x:Bind Title}" VerticalAlignment="Top" FontSize="27" Foreground="White" Margin="4,0,0,0"/>
</Grid>
</Canvas>
</Grid>
<interactivity:Interaction.Behaviors>
<behaviors:InteractionBehavior HittestContent="{Binding ElementName=Image}" InfoContent="{Binding ElementName=Info}" PhotoContent="{Binding ElementName=Photo}" InfoContainer ="{Binding ElementName=InfoCanvas}" />
</interactivity:Interaction.Behaviors>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>

我这个后台更简单了,就一个绑定的代码

            try
{
cardItems.ItemsSource = (Application.Current as App).MusicItems;
}
catch { }

哦,那个behaviors,需要Nuget引用 Microsoft.Xaml.Behaviors.Uwp.Managed

xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:behaviors="using:MusicTags.Behaviors"

UWP 卡片视图 Card View的更多相关文章

  1. UWP 轨道视图Orbit View

    先看一下效果吧 这是我的Music Tags App里面的效果图,当然你也可以做的比我的更炫. 其实这个效果的实现来自于控件UWP Community Toolkit的OrbitView,所以大家要多 ...

  2. 1.Android 视图及View绘制分析笔记之setContentView

    自从1983年第一台图形用户界面的个人电脑问世以来,几乎所有的PC操作系统都支持可视化操作,Android也不例外.对于所有Android Developer来说,我们接触最多的控件就是View.通常 ...

  3. ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view)

    在本节中,您将验证电影控制器生成的编辑方法(Edit action methods)和视图.但是首先将修改点代码,使得发布日期属性(ReleaseDate)看上去更好.打开Models \ Movie ...

  4. 视图(View)与部分视图(Partial View)之间数据传递

    写ASP.NET MVC程序,我们经常需要把数据从视图(View)传递至部分视图(Partial View) 或者相反. 今天Insus.NET使用 ControllerBase.TempData 进 ...

  5. 截取视图某一段另存为部分视图(Partial View)

    在做ASP.NET MVC后台管理程序时,根据程序需要,Isus.NET需要实现一个功能,就是动态截取视图某一段另存为部分视图Partial View. 思路为在视图中,使用jQury的程序截图以及P ...

  6. iphone绘图的几个基本概念CGPoint、CGSize、CGRect、CGRectMake、window(窗口)、视图(view)

    我一般情况下不会使用interface builder去画界面,而是用纯代码去创建界面,不是装B,而是刚从vi转到xcode不久,不太习惯interface builder而已.当然如果需要我也会使用 ...

  7. 验证编辑方法(Edit method)和编辑视图(Edit view)

    ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view) 在本节中,您将验证电影控制器生成的编辑方法(Edit action methods)和视图.但是 ...

  8. SAP HANA中创建计算视图(Calculation View)

    [Step By Step]SAP HANA中创建计算视图(Calculation View) Demo Instruction: 该视图将两个表AUDIOBOOKS和BOOKS中的数据进行连接,并作 ...

  9. Oracle视图 create View

    视图是一种虚表,使用CREATE VIEW语句来定义视图,该视图是基于一个或多个表或视图的逻辑表.一个视图本身不包含任何数据, 视图所基于的表称为基表. 视图就相当于一条select 语句,定义了一个 ...

随机推荐

  1. CSS学习摘要-布局

    注:全文摘自MDN-介绍CSS布局 CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.在这个模块中将涉及更多关于页面布局技术的细节: 浮动 ...

  2. 获取 docker 容器(container)的 ip 地址

    获取单个IP docker inspect --format '{{ .NetworkSettings.IPAddress }}'  <container-ID> 获取所有容器IP doc ...

  3. Hadoop HBase概念学习系列之RowKey设计(二十九)

    HBase里的RowKey设计,分为随机查询的RowKey设计和连续查询的RowKey设计.

  4. SQL Server错误处理

    一.SQLServer数据库引擎错误 1.查询系统错误信息 SQLServer在每个数据库的系统视图sys.messages中存储系统自定义(Message_id <= 50000)和用户自定义 ...

  5. PAT 1001A+B Format

    Github 1001 题目速览 1.解题的思路过程 认真读题,题目为A+BFormat,简单的计算a+b问题,特殊在于输出的形式. 输入形式为每个输入文件包含一个测试样例,每个测试样例仅包含一对整型 ...

  6. 字典树(前缀树)-Java实现

    字典树 字典树是一种树形结构,优点是利用字符串的公共前缀来节约存储空间.在这提供一个自己写的Java实现,非常简洁. 根节点没有字符路径.除根节点外,每一个节点都被一个字符路径找到. 从根节点到某一节 ...

  7. 021.14 IO流 管道流

    用的频率不高特点:读取管道和写入管道对接,需要是用多线程技术,单线程容易死锁 使用connect方法连接两个流,实现边读编写,和node.js的管道流差不多 //##主函数位置 public stat ...

  8. 【洛谷】【动态规划/背包】P1417 烹调方案

    由于你的帮助,火星只遭受了最小的损失.但gw懒得重建家园了,就造了一艘飞船飞向遥远的earth星.不过飞船飞到一半,gw发现了一个很严重的问题:肚子饿了~ gw还是会做饭的,于是拿出了储藏的食物准备填 ...

  9. jQuery全选反选插件

    (function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...

  10. virtualbox+vagrant学习-4-Vagrantfile-2-Configuration Version

    Configuration Version 配置版本是vagrant 1.1+能够与vagrant 1.0保持向后兼容的机制.同时引入了引人注目的新特性和配置选项. 如果你运行了vagrant ini ...