WPF(C#)开源控件库:Newbeecoder.UI之NbExpander控件

2022-01-07 16:06:19 浏览数 (1)

WPF的Expander是显示内容视图控件,扩展区域的内容可以展开或折叠。ExpandDirection是设置扩展方向,FontSize设置字体大小,IsExpanded展示显示。在Expander中加入ScrollViewer来显示指定的滚动样式。

Demo版下载地址:https://download.csdn.net/download/liaohaiyin/63234875

Newbeecoder.UI控件库根据用户需求开发稳定而高效项目,通过视频来演示控件库整体功能:

视频内容

在Newbeecoder.UI控件库用NbExpander显示折叠菜单样式:

NbExpander案例代码:

代码语言:html复制
<NbExpander Header="推荐" Style="{StaticResource DefaultExpanderStyle}" IsExpanded="True">
    <StackPanel Margin="30,0,0,0">
        <StackPanel Orientation="Horizontal" Height="20" VerticalAlignment="Center">
            <NbIcon CornerRadius="2" Width="12" Height="12" Data="{DynamicResource Icon-App-Fill}"/>
            <TextBlock Margin="3,0,0,0" Text="发现音乐"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Height="20" VerticalAlignment="Center">
            <NbIcon CornerRadius="2" Width="12" Height="12" Data="{DynamicResource Icon-Copy-Fill}"/>
            <TextBlock Margin="3,0,0,0" Text="私人FM"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Height="20" VerticalAlignment="Center">
            <NbIcon CornerRadius="2" Width="12" Height="12" Data="{DynamicResource Icon-Home-Fill}"/>
            <TextBlock Margin="3,0,0,0" Text="热榜歌曲"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Height="20" VerticalAlignment="Center">
            <NbIcon CornerRadius="2" Width="12" Height="12" Data="{DynamicResource Icon-User-Fill}"/>
            <TextBlock Margin="3,0,0,0" Text="经典歌曲"/>
        </StackPanel>
    </StackPanel>
</NbExpander>
<NbExpander Header="收藏的歌单" IsExpanded="True" Style="{StaticResource DefaultNoExpanderStyle}">
    <StackPanel Margin="30,0,0,0">
        <StackPanel Orientation="Horizontal" Height="20" VerticalAlignment="Center">
            <NbIcon CornerRadius="2" Width="12" Height="12" Data="{DynamicResource Icon-App-Fill}"/>
            <TextBlock Margin="3,0,0,0" Text="发现音乐"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Height="20" VerticalAlignment="Center">
            <NbIcon CornerRadius="2" Width="12" Height="12" Data="{DynamicResource Icon-Copy-Fill}"/>
            <TextBlock Margin="3,0,0,0" Text="私人FM"/>
        </StackPanel>
    </StackPanel>
</NbExpander>

0 人点赞