上一篇 提到了 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