上一篇 提到了 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. Linux setenforce命令详解[SeLinux操作]

    SELinux(Security-Enhanced Linux) 是美国国家安全局(NSA)对于强制访问控制的实现,是 Linux历史上最杰出的新安全子系统. 关闭SELinux 临时生效: 命令临时 ...

  2. 第八章 计时器(DIGCLOCK)

    /*-------------------------------------- DIGCLOCK.C -- Digital Clock (c) Charles Petzold, 1998 ----- ...

  3. C#综合揭秘——分部类和分部方法

    在面向对象的“封装闭合性”开发原则中,一向提倡的是把独立的功能封装在一个类里面的!但从Visual Studio 2005开发,系统提供了一个分部类的开发方式一直受到争议,很多人认为把同一类的功能分布 ...

  4. ajax本地跨域请求以及解决方法

    什么是跨域?   我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没 ...

  5. IOS和安卓WEB页面,input输入框被软键盘遮挡解决方法

    本来以为这问题就只有ios才有,身边也没有android机测试,网上一搜,貌似有这个问题的还不少.最后把各种解决方法试了一边,貌似没什么用. 最后是这样解决的: setInterval(functio ...

  6. java 解析json字符串

    如果转载我的这篇文章请注明出处,谢谢! 最近工作中,需要解析json格式的字符串,恰好有个例子,感觉不错,拿来分享. 运行这个类需要加载jar包:ezmorph-1.0.6.jar.json-lib- ...

  7. amcharts属性

    Amcharts的特点包含: *动画或静态 *价值轴能够扭转 *线性或对数轴的价值尺度 *提前定义或定制的子弹 *定制描写叙述不论什么数据点 *点击栏目/酒吧(可用于钻孔下来图表) *梯度弥漫 *价值 ...

  8. loli的测试——搜索

    今天是2018.5.24,loli给我们说要考搜索,本来以为是给初学者们考的就没准备,然而老师说我们也要考.(2018.6.29补:这次的简单测试与之后变得非常难的几次搜索测试形成了鲜明的对比,从而更 ...

  9. Day2 MySql函数以及单表查询

    SQL中的运算符 算术运算符 --算术运算符(子句) ; ; ; ; --0.75 ; --NULL div ; 比较运算符> < >= <= != = --0表示false, ...

  10. virtualbox+vagrant学习-2(command cli)-6-vagrant init命令

    Init——创建Vagrantfile文件 格式: vagrant init [options] [name [url]] 通过创建初始的Vagrantfile文件(如果不存在的话),将当前目录初始化 ...