WPF仿网易云音乐

WPF仿网易云音乐-个人信息栏

个人信息栏

显示头像 名称 短消息 和配置按钮

<Border Grid.Row="2"  x:Name="borderd" DockPanel.Dock="Bottom" BorderThickness="0,1,0,0" BorderBrush="#E4E4E7" >
    <StackPanel Orientation="Horizontal" Background="#F3F3F5">
        <Image MouseLeftButtonDown="Image_MouseLeftButtonDown" Stretch="Fill" Source="images/apple_cinema+display.png" Height="50" Width="50"></Image>
        <TextBlock Margin="5" VerticalAlignment="Center">一叶知秋</TextBlock>
        <Image Source="images/message.png" Stretch="None" />
    </StackPanel>
</Border>Code language: HTML, XML (xml)

中间主窗体的分组

添加一个grid 作为中间的窗体

然后把它分成三行

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="60"></RowDefinition>
        <RowDefinition Height="200"></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <StackPanel VerticalAlignment="Center">
        <TextBlock>发现音乐</TextBlock>
    </StackPanel>
</Grid>Code language: HTML, XML (xml)

专辑列表的实现

实现一个图文列表的效果

<Window x:Class="WpfApplication1.Window18"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="Window18" Height="549.452" Width="790.587" Background="#fff">
    <DockPanel  LastChildFill="True">
        <Border x:Name="border" DockPanel.Dock="Bottom" BorderThickness="0,1,0,0" BorderBrush="#E4E4E7" >
            <StackPanel Orientation="Horizontal" Height="60">
                <ProgressBar Width="600" Height="8" Margin="20"></ProgressBar>
            </StackPanel>
        </Border>
        <Grid Name="maxleft" DockPanel.Dock="Left" Background="Gray" Width="190">
            <Grid.RowDefinitions>
                <RowDefinition Height="60"></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition Height="60"></RowDefinition>
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0" Orientation="Horizontal" Background="#F3F3F5">
                <Image Name="maxLeftImag" MouseLeftButtonDown="Image_MouseLeftButtonDown" Stretch="None" Source="images/min.png"></Image>
            </StackPanel>
            <StackPanel Grid.Row="1" Orientation="Vertical" Background="#F3F3F5">
                <Button Height="50" BorderThickness="0" HorizontalContentAlignment="Left" Background="#F3F3F5">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <Label></Label>
                            <Image Source="images/search.png" Stretch="None" />
                            <Label>搜索</Label>
                        </StackPanel>
                    </Button.Content>
                </Button>
                <Button Height="50" BorderThickness="0" HorizontalContentAlignment="Left" Background="#F3F3F5">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <Label></Label>
                            <Image Source="images/mv.png" Stretch="None" />
                            <Label>MV</Label>
                        </StackPanel>
                    </Button.Content>
                </Button>
                <Button Height="50" BorderThickness="0" HorizontalContentAlignment="Left" Background="#F3F3F5">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <Label></Label>
                            <Image Source="images/friend.png" Stretch="None" />
                            <Label>朋友</Label>
                        </StackPanel>
                    </Button.Content>
                </Button>
            </StackPanel>
            <Border Grid.Row="2"  x:Name="borderd" DockPanel.Dock="Bottom" BorderThickness="0,1,0,0" BorderBrush="#E4E4E7" >
                <StackPanel Orientation="Horizontal" Background="#F3F3F5">
                    <Image MouseLeftButtonDown="Image_MouseLeftButtonDown" Stretch="Fill" Source="images/apple_cinema+display.png" Height="50" Width="50"></Image>
                    <TextBlock Margin="5" VerticalAlignment="Center">一叶知秋</TextBlock>
                    <Image Source="images/message.png" Stretch="None" />
                </StackPanel>
            </Border>
        </Grid>
        <Grid Name="minleft" DockPanel.Dock="Left" Background="Gray" Width="50" Visibility="Hidden">
            <Grid.RowDefinitions>
                <RowDefinition Height="60"></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="60"></RowDefinition>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal" Background="#F3F3F5">
                <Image Name="minLeftImag" MouseLeftButtonDown="Image_MouseLeftButtonDown"  Stretch="None" Source="images/min.png"></Image>
            </StackPanel>
        </Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="60"></RowDefinition>
                <RowDefinition Height="200"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0" VerticalAlignment="Center">
                <TextBlock>发现音乐</TextBlock>
            </StackPanel>

            <StackPanel Grid.Row="2" VerticalAlignment="Center">
                <StackPanel Orientation="Horizontal">
                    <Image Source="images/1.png" Stretch="None" Margin="6"></Image>
                    <Image Source="images/2.png" Stretch="None" Margin="6"></Image>
                    <Image Source="images/3.png" Stretch="None" Margin="6"></Image>
                </StackPanel>
            </StackPanel>

        </Grid>
    </DockPanel>
</Window>Code language: HTML, XML (xml)