WPF 练习之音乐播放器界面

最新推荐文章于 2024-04-03 09:40:47 发布
Danny_hi
最新推荐文章于 2024-04-03 09:40:47 发布
阅读量431
点赞数 1
分类专栏： WPF
本文链接：https://blog.csdn.net/qq_43024228/article/details/104594173
版权
WPF 专栏收录该内容
114 篇文章 38 订阅
订阅专栏
WPF 练习之音乐播放器界面

效果图（右侧显示区为背景图片）：
在这里插入图片描述
代码：
<Window x:Class="WPF003.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="670" Width="1075" >
    <Border BorderThickness="1" BorderBrush="Gray">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="60"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Background="#BC2F2E">
            <TextBlock Text="某某云音乐" Foreground="White" VerticalAlignment="Center" Margin="10 0 0 0"></TextBlock>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right">
                <TextBlock Text="—" Foreground="White"></TextBlock>
                <TextBlock Text="☐" Foreground="White" Margin="10 0 10 0"></TextBlock>
                <TextBlock Text="✖" Foreground="White" Margin="0 0 10 0"></TextBlock>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="1" Background="Yellow">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" ></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid Background="AliceBlue">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition Height="60"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid Margin="15 10 0 0">
                    <StackPanel>
                        <TextBlock Text="&#xe614;" FontFamily="/#iconfont" FontSize="20"></TextBlock>
                        <StackPanel Height="30" Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                            <TextBlock Text="&#xe60b;" FontFamily="/#iconfont" Foreground="#666666" VerticalAlignment="Center" FontSize="16"></TextBlock>
                            <TextBlock Text="搜索" Margin="10 0 0 0" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                        </StackPanel>
                        <StackPanel Height="30" Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                            <TextBlock Text="&#xe610;" FontFamily="/#iconfont" Foreground="#666666" VerticalAlignment="Center" FontSize="16"></TextBlock>
                            <TextBlock Text="发现音乐" Margin="10 0 0 0" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                        </StackPanel>
                        <StackPanel Height="30" Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                            <TextBlock Text="&#xe51e;" FontFamily="/#iconfont" Foreground="#666666" VerticalAlignment="Center" FontSize="16"></TextBlock>
                            <TextBlock Text="MV" Margin="10 0 0 0" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                        </StackPanel>
                        <StackPanel Height="30" Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                            <TextBlock Text="&#xe603;" FontFamily="/#iconfont" Foreground="#666666" VerticalAlignment="Center" FontSize="16"></TextBlock>
                            <TextBlock Text="朋友" Margin="10 0 0 0" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                        </StackPanel>
                        <StackPanel Margin="0 40 0 0">
                            <TextBlock Text="我的音乐" Foreground="#666666"></TextBlock>
                            <StackPanel Height="30" Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe624;" FontFamily="/#iconfont" Foreground="#666666" VerticalAlignment="Center" FontSize="16"></TextBlock>
                                <TextBlock Text="本地音乐" Margin="10 0 0 0" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                            </StackPanel>
                            <StackPanel Height="30" Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe723;" FontFamily="/#iconfont" Foreground="#666666" VerticalAlignment="Center" FontSize="16"></TextBlock>
                                <TextBlock Text="下载管理" Margin="10 0 0 0" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                            </StackPanel>
                            <StackPanel Height="30" Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe62f;" FontFamily="/#iconfont" Foreground="#666666" VerticalAlignment="Center" FontSize="16"></TextBlock>
                                <TextBlock Text="最近播放" Margin="10 0 0 0" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                            </StackPanel>
                        </StackPanel>
                        <StackPanel Margin="0 40 0 0">
                            <UniformGrid Columns="2">
                                <TextBlock Text="创建的歌单" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                                <TextBlock Text="+" HorizontalAlignment="Right" Foreground="#666666" Margin="0 0 15 0" FontSize="16"></TextBlock>
                            </UniformGrid>
                            <StackPanel Height="30" Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe617;" FontFamily="/#iconfont" Foreground="#666666" VerticalAlignment="Center" FontSize="16"></TextBlock>
                                <TextBlock Text="我喜欢的音乐" Margin="10 0 0 0" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>
                </Grid>
                <Border BorderThickness="0 0 0 1" BorderBrush="Gray"></Border>
                <Grid Grid.Row="1">
                    <UniformGrid Columns="2">
                        <TextBlock Text="未登录" Margin="15 0 0 0" VerticalAlignment="Center" Foreground="#666666"></TextBlock>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                            <TextBlock Text="&#xe623;" FontFamily="/#iconfont" Foreground="#666666" VerticalAlignment="Center" FontSize="18"></TextBlock>
                            <TextBlock Text="&#xe606;" FontFamily="/#iconfont" Foreground="#666666" VerticalAlignment="Center" Margin="10 0 10 0" FontSize="18"></TextBlock>
                        </StackPanel>
                    </UniformGrid>
                </Grid>
            </Grid>
                <Grid Grid.Column="1">
                    <Grid.Background>
                        <ImageBrush ImageSource="Img/100.png"></ImageBrush>
                    </Grid.Background>
                </Grid>
        </Grid>
        <Grid Grid.Row="2" Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"></ColumnDefinition>
                <ColumnDefinition Width="180"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition Width="240"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Border CornerRadius="30" Background="#DEE0E1" Margin="5"></Border>
            <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">
                <Border Background="#DF3B3B" CornerRadius="30" Width="30" Height="30">
                    <TextBlock Text="&#xe74e;" FontFamily="/#iconfont" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Background="#DF3B3B" CornerRadius="30" Width="40" Height="40" Margin="15 0 15 0">
                    <TextBlock Text="&#xe625;" FontFamily="/#iconfont" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Background="#DF3B3B" CornerRadius="30" Width="30" Height="30">
                    <TextBlock Text="&#xe750;" FontFamily="/#iconfont" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
            </StackPanel>
            <StackPanel Grid.Column="2" VerticalAlignment="Center">
                <TextBlock Text="00:00 / 00:0" HorizontalAlignment="Right" Foreground="#666666"></TextBlock>
                <Border BorderThickness="2" BorderBrush="#666666" Margin="0 10 0 0"></Border>
            </StackPanel>
            <StackPanel Grid.Column="3" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10 0 0 0">
                <TextBlock Text="&#xe617;" FontFamily="/#iconfont" Width="50" FontSize="20" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                <TextBlock Text="&#xe601;" FontFamily="/#iconfont" Width="50" FontSize="20" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                <TextBlock Text="&#xe662;" FontFamily="/#iconfont" Width="50" FontSize="20" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
                <TextBlock Text="&#xe61b;" FontFamily="/#iconfont" Width="50" FontSize="20" Foreground="#666666" VerticalAlignment="Center"></TextBlock>
            </StackPanel>
        </Grid>
    </Grid>
    </Border>
</Window>