左侧栏菜单栏的添加菜单

WPF简单实现网易云音乐首页界面-布局

尝试使用WPF来实现网易云音乐的首页界面

首页我们使用Dock布局

首先设置左右分布

然后设置顶部的缩进按钮

左侧上方的缩进图片实现左侧菜单收缩

实现点击缩进图片的时候 切换左侧栏

给缩进图片添加点击事件

事件中隐藏左侧栏 显示小左侧栏

MouseLeftButtonDown="StackPanel_MouseLeftButtonDown"Code language: JavaScript (javascript)

wpf MouseLeftButtonDown 不起作用的问题

左侧栏菜单栏的添加菜单

使用strakpanel布局控件

里面添加一个button

button里面添加一个strakpanel

<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>Code language: HTML, XML (xml)