WPF学习01：模仿网易云界面

最新推荐文章于 2026-07-25 16:49:23 发布
原创最新推荐文章于 2026-07-25 16:49:23 发布 · 640 阅读
1 ·
本内容遵循CC 4.0 BY-SA版权协议
本文介绍如何利用WPF框架结合IconFont图标库，构建一个类似网易云音乐的用户界面，展示了图标加载及布局设计的具体实现。
从阿里巴巴图标库中，下载相关图标的代码
解压后，将iconfont.ttf加载到程序中
代码

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="525" WindowStyle="None" AllowsTransparency="True">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="35"></RowDefinition>
        </Grid.RowDefinitions>
        
        <Grid Background="#B6786E">
            <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="5 0 5 0"></TextBlock>
                <TextBlock Text="×" Foreground="White" Margin="0 0 10 0"></TextBlock>
            </StackPanel>
        </Grid>
        
        <Grid Grid.Row="1" Background="#F0F2F4">
            
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="#F7FAF9">
                <Grid.RowDefinitions>
                    <RowDefinition Height="330"></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Border BorderThickness="1" BorderBrush="Black"></Border>
                <Grid Grid.Column="1" Margin="0 10 0 0">
                    <Grid Margin="5 10 0 0">
                        <StackPanel>
                            <TextBlock Text="&#xe65a;" FontFamily="/#iconfont" Margin="0 20 0 0"></TextBlock>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                <TextBlock Text="&#xe60b;" FontFamily="/#iconfont"></TextBlock>
                                <TextBlock Text="搜索" ></TextBlock>
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe618;" FontFamily="/#iconfont"></TextBlock>
                                <TextBlock Text="发现音乐"></TextBlock>
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe605;" FontFamily="/#iconfont"></TextBlock>
                                <TextBlock Text="MV"></TextBlock>
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe657;" FontFamily="/#iconfont"></TextBlock>
                                <TextBlock Text="朋友"></TextBlock>
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 20 0 0">                               
                                <TextBlock Text="我的音乐"></TextBlock> 
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe657;" FontFamily="/#iconfont"></TextBlock>
                                <TextBlock Text="本地音乐"></TextBlock>
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe616;" FontFamily="/#iconfont"></TextBlock>
                                <TextBlock Text="下载"></TextBlock>
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe61c;" FontFamily="/#iconfont"></TextBlock>
                                <TextBlock Text="最近播放"></TextBlock>
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 20 0 0">
                                <UniformGrid Columns="2">
                                    <TextBlock Text="创建的歌单"></TextBlock>
                                    <TextBlock Text="+" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBlock>
                                </UniformGrid>
                                
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 0">
                                <TextBlock Text="&#xe658;" FontFamily="/#iconfont"></TextBlock>
                                <TextBlock Text="收藏"></TextBlock>
                            </StackPanel>
                            
                        </StackPanel>                      
                    </Grid>                                      
                </Grid>
                
                <Grid Grid.Row="2" Background="Wheat">
                    <UniformGrid Columns="2">
                        <TextBlock Text="未登录" VerticalAlignment="Center"> </TextBlock>
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0 10 0 0">
                            <TextBlock Text="&#xe641;" FontFamily="/#iconfont" VerticalAlignment="Center" Margin="10 0 0 0"></TextBlock>
                            <TextBlock Text="&#xe604;" FontFamily="/#iconfont" VerticalAlignment="Center" Margin="10 0 0 0"></TextBlock>
                        </StackPanel>
                    </UniformGrid>
                   
                    
                </Grid>
                
                
            </Grid>

            <Grid Grid.Column="1">
                <Grid.Background>
                    <ImageBrush ImageSource="ImageDesk.jpg" ></ImageBrush>
                </Grid.Background>
            </Grid>


        </Grid>

        
        <Grid Grid.Row="2" Background="White">
            <Grid.ColumnDefinitions >
                <ColumnDefinition Width="35"></ColumnDefinition>
                <ColumnDefinition Width="120"></ColumnDefinition>
                <ColumnDefinition Width="220"></ColumnDefinition>
                <ColumnDefinition Width="130"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            
            <Border CornerRadius="35" Background="Aqua"></Border>
            
            <StackPanel Grid.Column="1" VerticalAlignment="Center" Orientation="Horizontal">
                <Border CornerRadius="20" Width="20" Height="20" Background="Red">
                    <TextBlock Text="&#xe66c;" FontFamily="/#iconfont" HorizontalAlignment="Center" VerticalAlignment="Center" ></TextBlock>
                </Border>
                <Border CornerRadius="30" Width="30" Height="30" Background="Red">
                    <TextBlock Text="&#xe643;" FontSize="20" FontFamily="/#iconfont" HorizontalAlignment="Center" VerticalAlignment="Center" ></TextBlock>
                </Border>
                <Border CornerRadius="20" Width="20" Height="20" Background="Red" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <TextBlock Text="&#xe66d;" FontFamily="/#iconfont" HorizontalAlignment="Center" VerticalAlignment="Center" ></TextBlock>
                </Border>
            </StackPanel>
            
            <StackPanel Grid.Column="2">
                <TextBlock Text="00:00 / 00:00" HorizontalAlignment="Right"></TextBlock>
                <Border BorderThickness="2" BorderBrush="Black" VerticalAlignment="Center" Margin="0 5 0 0"></Border>
            </StackPanel>
            <StackPanel Grid.Column="3" HorizontalAlignment="Center" Orientation="Horizontal">
                <TextBlock Text="&#xe658;" FontFamily="/#iconfont" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="&#xe67a;" FontFamily="/#iconfont" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="&#xe87a;" FontFamily="/#iconfont" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="&#xe65a;" FontFamily="/#iconfont" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
            </StackPanel>
            
            
        </Grid>
    </Grid>
</Window>