在本篇文章中介绍如何使用Newbeecoder.UI的NbProgressBar控件,在NbProgressBar控件有几个基本属性,Width和Height 属性表示NbProgressBar的宽度和高度。Name 属性表示控件的名称。Value属性设置 控件的当前值,另外在滚动条中增加几项属性,分别是:圆角、百分百比是否可见、动画颜色。
Demo下载:
Newbeecoder.UI.zip
Newbeecoder.UI可以根据产品原型图开发出一样的UI界面
如果设置滚动条方向使用FlowDirection属性。您可以将此值设置为LeftToRight或RightToLeft。
在控件库有三种不同滚动条:默认、圆形、不确定进度。运行效果图如下:
调用滚动条代码:
代码语言:html复制<StackPanel Orientation="Vertical">
<TextBlock Text="默认样式" Margin="5"/>
<NbProgressBar Style="{DynamicResource DefaultProgressBarBoxStyle}" Margin="5" Value="50" Height="20" Width="120"/>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="50,0,0,0">
<TextBlock Text="圆形样式" Margin="5" HorizontalAlignment="Center"/>
<NbProgressBar Style="{DynamicResource NormalProgressBarBoxStyle}" Value="50" Width="120" Height="120" IsIndeterminate="False" IsPercentVisible="True"/>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="50,0,0,0">
<TextBlock Text="不确定进度" Margin="5" HorizontalAlignment="Center"/>
<NbProgressBar Style="{DynamicResource NormalProgressBarBoxStyle}" Value="50" Width="120" Height="120" IsIndeterminate="True" IsPercentVisible="False"/>
</StackPanel>
通过设置NbProgressBarStyle="{DynamicResource NormalProgressBarBoxStyle}"实现Newbeecoder.UI滚动条调用。