检测到论坛CSS可能没有正确加载，如出现排版混乱请刷新重试。

We detected that the CSS might not be loaded correctly. If the website displays abnormally, Please refresh and try again.

【WinUI/XAML】Fluent UI的一些实践

Betta_Fish

本帖将记录本人写的一些Fluent UI页面/控件/对话框
其中可能有一些概念设计，暂时无法用程序实现
如果可以的话，我会在下方贴出XAML代码（一般情况下都使用MVVM，后台代码就不放了）

Betta_Fish

Flarent新版登录框

2023/4/8

左侧图片来自Unsplash

XAML

<ContentDialog
    x:Class="FlarentApp.Views.Dialogs.LoginDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:app="using:FlarentApp.Helpers"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:FlarentApp.Views.Dialogs"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">

    <ContentDialog.Resources>
        <Thickness x:Key="ContentDialogPadding">0</Thickness>
    </ContentDialog.Resources>
    <Grid HorizontalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <muxc:ProgressBar
            Grid.Column="1"
            VerticalAlignment="Top"
            Canvas.ZIndex="2"
            IsIndeterminate="True"
            Visibility="{x:Bind ViewModel.LoginCommand.IsRunning, Mode=OneWay}" />
        <Grid Width="200" Height="260">
            <Image Source="https://images.unsplash.com/photo-1680416249970-8fc845412862?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=727&amp;q=80" Stretch="UniformToFill" />
        </Grid>
        <Grid
            Grid.Column="1"
            MinWidth="256"
            Margin="24">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <StackPanel
                Margin="0,0,0,24"
                Orientation="Horizontal"
                Spacing="8">
                <Image Height="24" Source="{x:Bind app:Flarent.Settings.ForumInfo.FavIcon}" />
                <TextBlock
                    Margin="0,2,0,0"
                    VerticalAlignment="Center"
                    FontSize="15"
                    Text="登录" />
                <TextBlock
                    VerticalAlignment="Center"
                    Style="{StaticResource DetailBodyBaseMediumStyle}"
                    Text="|" />
                <TextBlock
                    VerticalAlignment="Center"
                    FontSize="16"
                    Text="{x:Bind app:Flarent.Settings.ForumInfo.Name}" />
            </StackPanel>
            <StackPanel Grid.Row="1" Spacing="12">
                <TextBox
                    x:Name="UserNameTextBox"
                    KeyDown="UserNameTextBox_KeyDown"
                    PlaceholderText="用户名/邮箱"
                    Text="{x:Bind ViewModel.Username, Mode=TwoWay}" />
                <PasswordBox
                    x:Name="MyPasswordBox"
                    KeyDown="MyPasswordBox_KeyDown"
                    Password="{x:Bind ViewModel.Password, Mode=TwoWay}"
                    PlaceholderText="密码" />
                <Grid>
                    <CheckBox
                        x:Name="RememberMeCheckBox"
                        Content="记住我"
                        IsChecked="{x:Bind ViewModel.IsRemember,Mode=TwoWay}" />
                    <TextBlock
                        x:Name="ErrorTextBlock"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Center"
                        FontSize="14"
                        Style="{StaticResource DetailBodyBaseMediumStyle}"
                        Text="{x:Bind ViewModel.Error, Mode=OneWay}" />
                </Grid>
            </StackPanel>

            <Button
                x:Name="CancelButton"
                Grid.Row="2"
                Margin="{StaticResource SmallTopMargin}"
                HorizontalAlignment="Left"
                VerticalAlignment="Bottom"
                Command="{x:Bind ViewModel.CloseCommand}"
                Content="取消"
                IsEnabled="{x:Bind ViewModel.LoginCommand.IsRunning, Mode=OneWay, Converter={StaticResource BooleanInversionConverter}}" />
            <StackPanel
                Grid.Row="2"
                Margin="{StaticResource SmallTopMargin}"
                HorizontalAlignment="Right"
                VerticalAlignment="Bottom"
                Orientation="Horizontal"
                Spacing="8">
                <HyperlinkButton
                    Name="SignUpButton"
                    Command="{x:Bind ViewModel.SignUpCommand}"
                    Content="注册" />
                <Button
                    x:Name="LoginButton"
                    AccessKey="Enter"
                    Command="{x:Bind ViewModel.LoginCommand}"
                    Content="登录"
                    Style="{StaticResource AccentButtonStyle}" />
            </StackPanel>
        </Grid>
    </Grid>
</ContentDialog>

DaleZ

Betta_Fish 喜欢小清新！

Betta_Fish

Hyplayer 新版主页(概念)

2022/12/29
去年做的一个设计稿。

头图来自Unsplash

XAML

把XAML直接当成设计软件用了...代码会有点奇怪

<Page
    x:Class="HyPlayer.Pages.Test.TestHomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:HyPlayer.Pages.Test"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:play="using:HyPlayer.HyPlayControl"
    mc:Ignorable="d">
    <ScrollViewer>
        <Grid Margin="36,36,36,128" RowSpacing="12">
            <Grid.RowDefinitions>
                <RowDefinition Height="400" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock
                Canvas.ZIndex="1"
                FontSize="24"
                Style="{StaticResource TitleTextBlockStyle}"
                Text="正在播放" />
            <Grid
                Height="400"
                Margin="-36,-36,-36,0"
                VerticalAlignment="Top">
                <controls:ImageEx
                    Canvas.ZIndex="0"
                    Source="https://flarum.csur.fun/2022-12-25/1671970508-774457-image.png"
                    Stretch="UniformToFill" />
                <StackPanel
                    Margin="36"
                    VerticalAlignment="Center"
                    Spacing="4">
                    <TextBlock
                        FontSize="36"
                        FontWeight="SemiBold"
                        Text="{x:Bind play:HyPlayList.NowPlayingItem.PlayItem.Name, Mode=OneWay}" />
                    <TextBlock
                        FontSize="16"
                        Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                        Text="{x:Bind play:HyPlayList.NowPlayingItem.PlayItem.ArtistString, Mode=OneWay}" />
                </StackPanel>
                <Border>
                    <Border.Background>
                        <LinearGradientBrush StartPoint="1,0">
                            <GradientStop Offset="0.6" Color="#0000" />
                            <GradientStop Offset="0.90" Color="#80303030" />
                            <GradientStop Offset="1" Color="#272727" />
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
            </Grid>
            <StackPanel
                VerticalAlignment="Center"
                Spacing="2"
                Visibility="Collapsed">
                <StackPanel Orientation="Horizontal">
                    <TextBlock
                        HorizontalAlignment="Left"
                        FontSize="32"
                        Style="{StaticResource TitleTextBlockStyle}"
                        Text="欢迎，" />
                    <TextBlock
                        Margin="-10,-1,0,0"
                        FontSize="34"
                        FontWeight="Bold"
                        Foreground="{StaticResource SystemAccentColorLight2}"
                        Style="{StaticResource TitleTextBlockStyle}"
                        Text="Betta_Fish" />
                </StackPanel>
                <TextBlock
                    FontSize="16"
                    Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                    Text="用音乐开启新的一天吧" />
            </StackPanel>
            <StackPanel
                x:Name="ActionPanel"
                Grid.Row="0"
                Margin="0,0,0,0"
                HorizontalAlignment="Right"
                VerticalAlignment="Bottom"
                Canvas.ZIndex="1"
                Orientation="Horizontal"
                Spacing="12">
                <Button Padding="16" CornerRadius="12">
                    <StackPanel Orientation="Horizontal" Spacing="12">
                        <FontIcon FontSize="24" Glyph="&#xE006;" />
                        <TextBlock FontSize="16" Text="我的喜欢" />
                    </StackPanel>
                </Button>
                <Button Padding="16" CornerRadius="12">
                    <StackPanel Orientation="Horizontal" Spacing="12">
                        <FontIcon FontSize="24" Glyph="&#xE163;" />
                        <TextBlock FontSize="16" Text="每日推荐" />

                    </StackPanel>
                </Button>
                <Button Padding="16" CornerRadius="12">
                    <StackPanel Orientation="Horizontal" Spacing="12">
                        <FontIcon FontSize="24" Glyph="&#xEFA9;" />
                        <TextBlock FontSize="16" Text="私人FM" />

                    </StackPanel>
                </Button>

            </StackPanel>
            <Grid Grid.Row="2" RowSpacing="8">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="推荐歌曲" />
                <HyperlinkButton HorizontalAlignment="Right" Content="查看更多" />

                <controls:AdaptiveGridView
                    Grid.Row="1"
                    DesiredWidth="320"
                    ItemHeight="100"
                    SelectionMode="None">
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <StackPanel
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="12">
                                <Border
                                    Width="64"
                                    Height="64"
                                    VerticalAlignment="Center"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    CornerRadius="4">
                                    <FontIcon FontSize="24" Glyph="&#xEC4F;" />
                                </Border>
                                <StackPanel VerticalAlignment="Center">
                                    <TextBlock
                                        FontSize="20"
                                        FontWeight="SemiBold"
                                        Text="标题" />
                                    <TextBlock Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}" Text="歌手" />
                                    <TextBlock Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}" Text="专辑名" />
                                </StackPanel>
                            </StackPanel>
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="00:00" />

                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <StackPanel
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="12">
                                <Border
                                    Width="64"
                                    Height="64"
                                    VerticalAlignment="Center"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    CornerRadius="4">
                                    <FontIcon FontSize="24" Glyph="&#xEC4F;" />
                                </Border>
                                <StackPanel VerticalAlignment="Center">
                                    <TextBlock
                                        FontSize="20"
                                        FontWeight="SemiBold"
                                        Text="标题" />
                                    <TextBlock Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}" Text="歌手" />
                                    <TextBlock Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}" Text="专辑名" />
                                </StackPanel>
                            </StackPanel>
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="00:00" />

                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <StackPanel
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="12">
                                <Border
                                    Width="64"
                                    Height="64"
                                    VerticalAlignment="Center"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    CornerRadius="4">
                                    <FontIcon FontSize="24" Glyph="&#xEC4F;" />
                                </Border>
                                <StackPanel VerticalAlignment="Center">
                                    <TextBlock
                                        FontSize="20"
                                        FontWeight="SemiBold"
                                        Text="标题" />
                                    <TextBlock Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}" Text="歌手" />
                                    <TextBlock Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}" Text="专辑名" />
                                </StackPanel>
                            </StackPanel>
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="00:00" />

                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <StackPanel
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="12">
                                <Border
                                    Width="64"
                                    Height="64"
                                    VerticalAlignment="Center"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    CornerRadius="4">
                                    <FontIcon FontSize="24" Glyph="&#xEC4F;" />
                                </Border>
                                <StackPanel VerticalAlignment="Center">
                                    <TextBlock
                                        FontSize="20"
                                        FontWeight="SemiBold"
                                        Text="标题" />
                                    <TextBlock Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}" Text="歌手" />
                                    <TextBlock Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}" Text="专辑名" />
                                </StackPanel>
                            </StackPanel>
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="00:00" />

                        </Grid>
                    </Border>


                </controls:AdaptiveGridView>

            </Grid>
            <Grid Grid.Row="3" RowSpacing="8">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="推荐歌单" />
                <HyperlinkButton HorizontalAlignment="Right" Content="查看更多" />

                <controls:AdaptiveGridView
                    Grid.Row="1"
                    DesiredWidth="256"
                    ItemHeight="100"
                    SelectionMode="None">
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <StackPanel
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="12">
                                <Border
                                    Width="64"
                                    Height="64"
                                    VerticalAlignment="Center"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    CornerRadius="4">
                                    <FontIcon FontSize="24" Glyph="&#xE142;" />
                                </Border>
                                <StackPanel VerticalAlignment="Center">
                                    <TextBlock
                                        FontSize="20"
                                        FontWeight="SemiBold"
                                        Text="标题" />
                                    <TextBlock
                                        Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                        Text="用户"
                                        TextTrimming="WordEllipsis" />
                                </StackPanel>
                            </StackPanel>
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />

                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <StackPanel
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="12">
                                <Border
                                    Width="64"
                                    Height="64"
                                    VerticalAlignment="Center"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    CornerRadius="4">
                                    <FontIcon FontSize="24" Glyph="&#xE142;" />
                                </Border>
                                <StackPanel VerticalAlignment="Center">
                                    <TextBlock
                                        FontSize="20"
                                        FontWeight="SemiBold"
                                        Text="标题" />
                                    <TextBlock
                                        Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                        Text="用户"
                                        TextTrimming="WordEllipsis" />
                                </StackPanel>
                            </StackPanel>
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />

                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <StackPanel
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="12">
                                <Border
                                    Width="64"
                                    Height="64"
                                    VerticalAlignment="Center"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    CornerRadius="4">
                                    <FontIcon FontSize="24" Glyph="&#xE142;" />
                                </Border>
                                <StackPanel VerticalAlignment="Center">
                                    <TextBlock
                                        FontSize="20"
                                        FontWeight="SemiBold"
                                        Text="标题" />
                                    <TextBlock
                                        Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                        Text="用户"
                                        TextTrimming="WordEllipsis" />
                                </StackPanel>
                            </StackPanel>
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />
                        </Grid>
                    </Border>

                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <StackPanel
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="12">
                                <Border
                                    Width="64"
                                    Height="64"
                                    VerticalAlignment="Center"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    CornerRadius="4">
                                    <FontIcon FontSize="24" Glyph="&#xE142;" />
                                </Border>
                                <StackPanel VerticalAlignment="Center">
                                    <TextBlock
                                        FontSize="20"
                                        FontWeight="SemiBold"
                                        Text="标题" />
                                    <TextBlock
                                        Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                        Text="用户"
                                        TextTrimming="WordEllipsis" />
                                </StackPanel>
                            </StackPanel>
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />

                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <StackPanel
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="12">
                                <Border
                                    Width="64"
                                    Height="64"
                                    VerticalAlignment="Center"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    CornerRadius="4">
                                    <FontIcon FontSize="24" Glyph="&#xE142;" />
                                </Border>
                                <StackPanel VerticalAlignment="Center">
                                    <TextBlock
                                        FontSize="20"
                                        FontWeight="SemiBold"
                                        Text="标题" />
                                    <TextBlock
                                        Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                        Text="用户"
                                        TextTrimming="WordEllipsis" />
                                </StackPanel>
                            </StackPanel>
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />

                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <StackPanel
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="12">
                                <Border
                                    Width="64"
                                    Height="64"
                                    VerticalAlignment="Center"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    CornerRadius="4">
                                    <FontIcon FontSize="24" Glyph="&#xE142;" />
                                </Border>
                                <StackPanel VerticalAlignment="Center">
                                    <TextBlock
                                        FontSize="20"
                                        FontWeight="SemiBold"
                                        Text="标题" />
                                    <TextBlock
                                        Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                        Text="用户"
                                        TextTrimming="WordEllipsis" />
                                </StackPanel>
                            </StackPanel>
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />

                        </Grid>
                    </Border>
                </controls:AdaptiveGridView>

            </Grid>
            <Grid
                Grid.Row="4"
                Margin="0,12,0,0"
                RowSpacing="8">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="排行榜" />
                <HyperlinkButton HorizontalAlignment="Right" Content="查看更多" />

                <controls:AdaptiveGridView
                    Grid.Row="1"
                    DesiredWidth="240"
                    ItemHeight="128"
                    SelectionMode="None">
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <FontIcon FontSize="40" Glyph="&#xE142;" />
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />
                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <FontIcon FontSize="40" Glyph="&#xE142;" />
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />
                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <FontIcon FontSize="40" Glyph="&#xE142;" />
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />
                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <FontIcon FontSize="40" Glyph="&#xE142;" />
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />
                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <FontIcon FontSize="40" Glyph="&#xE142;" />
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />
                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <FontIcon FontSize="40" Glyph="&#xE142;" />
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />
                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <FontIcon FontSize="40" Glyph="&#xE142;" />
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />
                        </Grid>
                    </Border>
                    <Border
                        Margin="2,4,2,0"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        CornerRadius="8">
                        <Grid>
                            <FontIcon FontSize="40" Glyph="&#xE142;" />
                            <TextBlock
                                Margin="16"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                                Text="10W" />
                        </Grid>
                    </Border>
                </controls:AdaptiveGridView>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

さらば限界少女

挺好
不过xaml看着挺复杂

Betta_Fish

Flarent 阅读模式

2023/4/22
其实就是只看楼主+标题居中

XAML

<Page
    x:Class="FlarentApp.Views.DetailPages.ReadModePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlarentApp.Views.DetailPages"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:lc="using:FlarentApp.Views.Controls"
    xmlns:models="using:FlarumApi.Models"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <ScrollViewer>
        <Grid Margin="{StaticResource SmallLeftTopRightBottomMargin}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <!--标题区域-->
            <Grid HorizontalAlignment="Center">
                <StackPanel>
                    <TextBlock Text="{x:Bind ViewModel.Discussion.Title,Mode=OneWay}"  Style="{StaticResource TitleTextBlockStyle}"/>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="4">
                        <HyperlinkButton Content="{x:Bind ViewModel.User.DisplayName,Mode=OneWay}" Style="{StaticResource TextBlockButtonStyle}" Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}" Margin="0,1,0,0"/>
                        <TextBlock Text="{x:Bind ViewModel.Discussion.CreatedAt,Converter={StaticResource DateConverter},Mode=OneWay}" VerticalAlignment="Center" Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"/>
                    </StackPanel>
                </StackPanel>
            </Grid>
            <!--内容区域-->
            <Grid Grid.Row="1">
                <muxc:ProgressRing IsActive="{x:Bind ViewModel.GetPostsCommand.IsRunning,Mode=OneWay}"/>
                <muxc:ItemsRepeater ItemsSource="{x:Bind ViewModel.Posts,Mode=OneWay}">
                    <muxc:ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="models:Post">
                            <lc:PostTemplate Post="{x:Bind}" IsReadMode="True"/>
                        </DataTemplate>
                    </muxc:ItemsRepeater.ItemTemplate>
                </muxc:ItemsRepeater>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

Betta_Fish

Hyplayer 小窗模式

2023/4/23

原版

新版

XAML

<Page
    x:Class="HyPlayer.Pages.CompactPlayerPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
    d:Background="White"
    d:DesignHeight="350"
    d:DesignWidth="600"
    Background="{x:Bind Mode=OneWay, Path=AlbumCover}"
    IsRightTapEnabled="True"
    PointerEntered="CompactPlayerPage_OnPointerEntered"
    PointerExited="CompactPlayerPage_OnPointerExited"
    RightTapped="OnRightTapped"
    mc:Ignorable="d">
    <Grid Background="{StaticResource AcrylicInAppFillColorDefaultBrush}" DoubleTapped="ExitCompactMode">
        <Grid.RowDefinitions>
            <RowDefinition Height="32" />
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
            <RowDefinition Height="Auto" />

        </Grid.RowDefinitions>
        <Grid x:Name="TitleGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid HorizontalAlignment="Stretch" />
            <TextBlock
                Grid.Column="1"
                Margin="12,0,0,0"
                VerticalAlignment="Center"
                Text="{x:Bind NowPlayingName, Mode=OneWay}" />
            <TextBlock
                Grid.Column="2"
                Margin="4,0,0,0"
                VerticalAlignment="Center"
                Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
                Text="{x:Bind NowPlayingArtists, Mode=OneWay}"
                TextTrimming="CharacterEllipsis" />
        </Grid>
        <Grid
            x:Name="LyricGrid"
            Grid.Row="1"
            VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <StackPanel>
                <TextBlock
                    Margin="8,0"
                    HorizontalAlignment="Center"
                    FontSize="24"
                    Style="{StaticResource TitleTextBlockStyle}"
                    Text="{x:Bind LyricText, Mode=OneWay}"
                    TextWrapping="NoWrap" />
                <TextBlock
                    Margin="20,0"
                    HorizontalAlignment="Center"
                    Text="{x:Bind LyricTranslation, Mode=OneWay}"
                    TextWrapping="Wrap" />
            </StackPanel>
        </Grid>
        <Grid
            x:Name="PlayerGrid"
            Grid.Row="2"
            Margin="8,0">
            <Button
                x:Name="LikeButton"
                Grid.Column="0"
                Background="Transparent"
                BorderBrush="Transparent"
                Click="LikeButton_Click"
                Visibility="{x:Bind PlayProgress.Visibility, Mode=OneWay}">
                <FontIcon
                    x:Name="IconLiked"
                    FontSize="14"
                    Glyph="&#xE00B;" />
            </Button>
            <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                <Button
                    Background="Transparent"
                    BorderBrush="Transparent"
                    Click="MovePrevious">
                    <FontIcon FontSize="14" Glyph="&#xF8AC;" />
                </Button>
                <Button
                    x:Name="BtnPlayStateChange"
                    AutomationProperties.AcceleratorKey="Space"
                    Background="Transparent"
                    BorderBrush="Transparent"
                    Click="ChangePlayState">
                    <FontIcon x:Name="PlayStateIcon" Glyph="&#xEDB5;" />
                </Button>
                <Button
                    Background="Transparent"
                    BorderBrush="Transparent"
                    Click="MoveNext">
                    <FontIcon FontSize="14" Glyph="&#xF8AD;" />
                </Button>
            </StackPanel>
            <Button
                x:Name="ExitButton"
                HorizontalAlignment="Right"
                Background="Transparent"
                BorderBrush="Transparent"
                Click="ExitButton_Click"
                Visibility="{x:Bind PlayProgress.Visibility, Mode=OneWay}">
                <FontIcon FontSize="14" Glyph="&#xE1D9;" />
            </Button>
        </Grid>
        <ProgressBar
            x:Name="PlayProgress"
            Grid.Row="2"
            VerticalAlignment="Bottom"
            Maximum="{x:Bind Mode=OneWay, Path=TotalProgress}"
            Value="{x:Bind NowProgress, Mode=OneWay}" />
        <Rectangle
            x:Name="AlbumImage"
            Grid.Row="4"
            Height="256"
            HorizontalAlignment="Stretch"
            Canvas.ZIndex="1"
            Fill="{x:Bind AlbumCover, Mode=OneWay}" />
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="AlbumImage.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="400" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="AlbumImage.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>

Betta_Fish

HyPlayer 歌单页面(概念)

2023/5/20

还是拿XAML瞎写的东西

XAML

<Page
    x:Class="HyPlayer.UITest.Views.MenuPages.SongListPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:HyPlayer.UITest.Views.MenuPages"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image
            Grid.RowSpan="2"
            Height="164"
            VerticalAlignment="Top"
            Source="http://s4.music.126.net/style/web2/img/default/default_album.jpg"
            Stretch="UniformToFill" />

        <Grid
            Padding="32"
            Background="{ThemeResource SystemControlAcrylicElementBrush}"
            ColumnSpacing="24">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <controls:ImageEx
                Width="100"
                Height="100"
                HorizontalAlignment="Left"
                CornerRadius="8"
                Source="http://s4.music.126.net/style/web2/img/default/default_album.jpg" />
            <StackPanel
                Grid.Column="1"
                Margin="0,0,0,12"
                VerticalAlignment="Center">
                <TextBlock
                    FontSize="30"
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Text="我的音乐" />
                <TextBlock FontSize="16" Text="创建者 更新于 2023-5-20" />
                <Button Margin="0,6,0,0">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <FontIcon FontSize="12" Glyph="&#xE10B;" />
                        <TextBlock Text="已收藏" />
                    </StackPanel>
                </Button>
            </StackPanel>
            <TextBlock
                Grid.Row="1"
                Grid.ColumnSpan="2"
                Margin="0,4,0,0"
                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                MaxLines="4"
                Style="{ThemeResource BodyTextBlockStyle}"
                Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
                TextWrapping="Wrap" />

        </Grid>
        <Grid Grid.Row="1">
            <muxc:NavigationView
                IsBackButtonVisible="Collapsed"
                IsSettingsVisible="False"
                PaneDisplayMode="Top">
                <muxc:NavigationView.MenuItems>
                    <muxc:NavigationViewItem Content="歌曲">
                        <muxc:NavigationViewItem.Icon>
                            <FontIcon Glyph="&#xE142;" />
                        </muxc:NavigationViewItem.Icon>
                        <muxc:NavigationViewItem.InfoBadge>
                            <muxc:InfoBadge
                                Margin="4,14,0,0"
                                Background="Transparent"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Value="11" />
                        </muxc:NavigationViewItem.InfoBadge>
                    </muxc:NavigationViewItem>
                    <muxc:NavigationViewItem Content="评论">
                        <muxc:NavigationViewItem.Icon>
                            <FontIcon Glyph="&#xE8F2;" />
                        </muxc:NavigationViewItem.Icon>
                        <muxc:NavigationViewItem.InfoBadge>
                            <muxc:InfoBadge
                                Margin="4,14,0,0"
                                Background="Transparent"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Value="123" />
                        </muxc:NavigationViewItem.InfoBadge>
                    </muxc:NavigationViewItem>
                </muxc:NavigationView.MenuItems>
                <muxc:NavigationView.FooterMenuItems>
                    <muxc:NavigationViewItem Icon="Sort" SelectsOnInvoked="False" />
                    <muxc:NavigationViewItem Icon="Filter" SelectsOnInvoked="False" />
                </muxc:NavigationView.FooterMenuItems>
                <muxc:NavigationView.AutoSuggestBox>
                    <AutoSuggestBox
                        BorderThickness="0"
                        PlaceholderText="在歌单中搜索..."
                        QueryIcon="Find" />
                </muxc:NavigationView.AutoSuggestBox>
                <Frame Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                    <StackPanel>
                        <Grid Margin="12,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="45" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="歌曲名" />
                            <TextBlock Grid.Column="1" Text="歌手" />
                            <TextBlock Grid.Column="2" Text="专辑" />
                        </Grid>
                        <Grid Margin="12,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="45" />
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" Text="SongName" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Artist" />
                            <TextBlock
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Album" />
                            <Button
                                Grid.Column="3"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                BorderBrush="Transparent">
                                <FontIcon Glyph="&#xE10C;" />
                            </Button>
                        </Grid>
                        <Grid Margin="12,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="45" />
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" Text="SongName" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Artist" />
                            <TextBlock
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Album" />
                            <Button
                                Grid.Column="3"
                                Height="32"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                BorderBrush="Transparent">
                                <FontIcon Glyph="&#xE10C;" />
                            </Button>
                        </Grid>
                        <Grid Margin="12,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="45" />
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" Text="SongName" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Artist" />
                            <TextBlock
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Album" />
                            <Button
                                Grid.Column="3"
                                Height="32"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                BorderBrush="Transparent">
                                <FontIcon Glyph="&#xE10C;" />
                            </Button>
                        </Grid>
                        <Grid Margin="12,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="45" />
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" Text="SongName" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Artist" />
                            <TextBlock
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Album" />
                            <Button
                                Grid.Column="3"
                                Height="32"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                BorderBrush="Transparent">
                                <FontIcon Glyph="&#xE10C;" />
                            </Button>
                        </Grid>
                        <Grid Margin="12,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="45" />
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" Text="SongName" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Artist" />
                            <TextBlock
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Album" />
                            <Button
                                Grid.Column="3"
                                Height="32"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                BorderBrush="Transparent">
                                <FontIcon Glyph="&#xE10C;" />
                            </Button>
                        </Grid>
                        <Grid Margin="12,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="45" />
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" Text="SongName" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Artist" />
                            <TextBlock
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Album" />
                            <Button
                                Grid.Column="3"
                                Height="32"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                BorderBrush="Transparent">
                                <FontIcon Glyph="&#xE10C;" />
                            </Button>
                        </Grid>
                        <Grid Margin="12,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="45" />
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" Text="SongName" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Artist" />
                            <TextBlock
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Album" />
                            <Button
                                Grid.Column="3"
                                Height="32"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                BorderBrush="Transparent">
                                <FontIcon Glyph="&#xE10C;" />
                            </Button>
                        </Grid>
                        <Grid Margin="12,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="45" />
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" Text="SongName" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Artist" />
                            <TextBlock
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Album" />
                            <Button
                                Grid.Column="3"
                                Height="32"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                BorderBrush="Transparent">
                                <FontIcon Glyph="&#xE10C;" />
                            </Button>
                        </Grid>
                        <Grid Margin="12,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="45" />
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" Text="SongName" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Artist" />
                            <TextBlock
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                Text="Album" />
                            <Button
                                Grid.Column="3"
                                Height="32"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                BorderBrush="Transparent">
                                <FontIcon Glyph="&#xE10C;" />
                            </Button>
                        </Grid>
                    </StackPanel>
                </Frame>
            </muxc:NavigationView>

        </Grid>
    </Grid>
</Page>