如何设计垂直进度条动态显示电池状态？在这里，我使用了正常进度条，我想做垂直条形进度条。哪个动态显示电池状态

本文介绍了如何设计垂直进度条动态显示电池状态？在这里，我使用了正常进度条，我想做垂直条形进度条。哪个动态显示电池状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 < ProgressBar x：名称 = BatteryStatus 值 = 50 HorizontalContentAlignment = 拉伸 VerticalContentAlignment = 拉伸 VerticalAlignment = Top SnapsToDevicePixels = True 背景 = 黑色保证金 = 0 高度 = 17 宽度 = 35 > < ProgressBar.ToolTip > < 工具提示展示位置 = 底部可见性 = 折叠 > < StackPanel > <！ - <标签内容=剩余50％/可用（已插入） in，charging）/> - > < 标签内容 = 电力可用性：50％ / > < 标签内容 = 剩余时间：50分钟 / > < / StackPanel > < / ToolTip > < / ProgressBar.ToolTip > < / ProgressBar > 解决方案您好，你只需要使用绑定，例如： MainWindow.cs： < 网格 > < ProgressBar x：名称 = BatteryStatus 值 = {Binding BataryValue} Orientation = 垂直 HorizontalContentAlignment = Stretch VerticalContentAlignment = 拉伸 VerticalAlignment = Top SnapsToDevicePixels = 真背景 = 黑色保证金 = 0 高度 = 80 宽度 = 35 > < ProgressBar.ToolTip > < 工具提示展示位置 = 底部可见性 = 可见 > < StackPanel > < ;！ - <标签内容=剩余50％/可用（插入，充电）/> - > < StackPanel 方向 = 水平 > < TextBlock 文字 = 电源可用性： / > < TextBlock 文字 = {Binding BataryValue} / > < TextBlock 文字 = ％ / > < / StackPanel > < StackPanel 方向 = 水平 > < TextBlock 文字 = 剩余时间： / > < TextBlock 文本 = {Binding BataryValue} / > < TextBlock 文字 = min / > < / StackPanel > < / StackPanel > < /工具提示 > < / ProgressBar.ToolTip > < / ProgressBar > < / Grid > MainWindow.cs： /// < 摘要 > /// MainWindow.xaml的交互逻辑 /// < / summary > public partial class MainWindow：Window，INotifyPropertyChanged { public MainWindow（） { InitializeComponent（）; this .DataContext = this ; BataryValue = 100 ; System.Timers.Timer timer = new System.Timers.Timer（1000d）; timer.Elapsed + = new ElapsedEventHandler（timer_Elapsed）; timer.Start（）; } public double BataryValue { get ; set ;} void timer_Elapsed（ object sender，ElapsedEventArgs e） { this .Dispatcher.BeginInvoke（DispatcherPriority.Normal， new Action（（）= > {此 .BataryValue - = 10 ; NotifyPropertyChanged（ BataryValue）;}））; } // 此方法由每个属性的Set访问者调用。 // 应用于可选propertyName的CallerMemberName属性 // 参数导致调用者的属性名称被替换为参数。 private void NotifyPropertyChanged（ String propertyName = ） { if （PropertyChanged！= null ） { PropertyChanged（ this ， new PropertyChangedEventArgs（propertyNam E））; } } public event PropertyChangedEventHandler PropertyChanged ; } 这应显示电池从100％到0％：） < setter property =Template> < setter.value> < controltemplate targettype ={x：Type ProgressBar}> < grid x：name =BataryStatusheight =20width =38background =Blackxmlns：x =＃unknown> < rectangle stroke =Whitemargin =0,0,6,0> < rectangle fill =Whitehorizontalalignment =rightmargin =0,4> ; < rectangle fill =Whitestroke =Whitehorizontalalignment =Rightmargin =0,4width =5> < ; rectangle fill =Whitestroke =Whitehorizontalalignment =Leftmargin =3,2,0,2width =5> < rectangle fill =White stroke =Whitehorizontalalignment =Left margin =10,2,0,2width =5> < rectangle fill =Whitestroke =Whitehorizontalalignment =Leftmargin =17,2 ，0,2width =5> < rectangle fill =Whitestroke =Whitehorizontalalignment =Rightmargin =0,2,1,2,2width =5> < rectangle fill =Whitestroke =Whitehorizontalalignment =Rightmargin =0,2,9,2width =5> < 样式 x：键 = ProgressBar TargetType = ProgressBar > < Setter 属性 = 模板 > < Setter.Value > < ControlTemplate TargetType = {x：输入ProgressBar} > < 网格 x：名称 = BataryStatus 高度 = 20 宽度 = 38 背景 = 黑色 > < Rectangle 笔划 = 白色保证金 = 0,0,6,0 / > < 矩形填充 = 白色 HorizontalAlignment = right 保证金 = 0,4 / > < 矩形 F.生病 = 白色笔划 = 白色 HorizontalAlignment = 正确保证金 = 0,4 宽度 = 5 / > < Rectangle 填写 = 白色笔划 = 白色 HorizontalAlignment = 左保证金 = 3,2,0,2 宽度 = 5 / > < ; 矩形填充 = 白色笔划 = 白色 HorizontalAlignment = 左保证金 = 10,2,0,2 宽度 = 5 / > < 矩形填充 = 白色笔划 = 白色 HorizontalAlignment = 左保证金 = 17,2,0,2 宽度 = 5 / > < 矩形填写 = 白色笔划 = 白色 HorizontalAlignment = 右保证金 = 0,2,1,2,2 宽度 = 5 / > < 矩形填充 = 白色描边 = 白色 HorizontalAlignment = 右保证金 = 0,2,9,2 宽度 = 5 / > ; < / Grid > < / ControlTemplate > < /Setter.Value> < / Setter > < / Style > <ProgressBar x:Name="BatteryStatus" Value="50" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" VerticalAlignment="Top" SnapsToDevicePixels="True" Background="Black" Margin="0" Height="17" Width="35" ><ProgressBar.ToolTip ><ToolTip Placement="Bottom" Visibility="Collapsed"><StackPanel><Label Content="Power Availability : 50 %"/><Label Content="Remaining Time : 50 min"/></StackPanel></ToolTip></ProgressBar.ToolTip></ProgressBar> 解决方案 Hi, You just have to use binding, for example:MainWindow.cs:<Grid> <ProgressBar x:Name="BatteryStatus" Value="{Binding BataryValue}" Orientation="Vertical" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" VerticalAlignment="Top" SnapsToDevicePixels="True" Background="Black" Margin="0" Height="80" Width="35" > <ProgressBar.ToolTip > <ToolTip Placement="Bottom" Visibility="Visible"> <StackPanel>  <StackPanel Orientation="Horizontal"> <TextBlock Text="Power Availability : "/> <TextBlock Text="{Binding BataryValue}"/> <TextBlock Text="%"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Remaining Time : "/> <TextBlock Text="{Binding BataryValue}"/> <TextBlock Text="min"/> </StackPanel> </StackPanel> </ToolTip> </ProgressBar.ToolTip> </ProgressBar></Grid>MainWindow.cs:/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window, INotifyPropertyChanged{ public MainWindow() { InitializeComponent(); this.DataContext = this; BataryValue = 100; System.Timers.Timer timer = new System.Timers.Timer(1000d); timer.Elapsed += new ElapsedEventHandler(timer_Elapsed); timer.Start(); } public double BataryValue {get;set;} void timer_Elapsed(object sender, ElapsedEventArgs e) { this.Dispatcher.BeginInvoke(DispatcherPriority.Normal, new Action(() => { this.BataryValue -= 10; NotifyPropertyChanged("BataryValue"); })); } // This method is called by the Set accessor of each property. // The CallerMemberName attribute that is applied to the optional propertyName // parameter causes the property name of the caller to be substituted as an argument. private void NotifyPropertyChanged(String propertyName = "") { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } public event PropertyChangedEventHandler PropertyChanged;}This should show the battery from 100% to 0% :)<setter property="Template"> <setter.value> <controltemplate targettype="{x:Type ProgressBar}"> <grid x:name="BataryStatus" height="20" width="38" background="Black" xmlns:x="#unknown"> <rectangle stroke="White" margin="0,0,6,0"> <rectangle fill="White" horizontalalignment="right" margin="0,4"> <rectangle fill="White" stroke="White" horizontalalignment="Right" margin="0,4" width="5"> <rectangle fill="White" stroke="White" horizontalalignment="Left" margin="3,2,0,2" width="5"> <rectangle fill="White" stroke="White" horizontalalignment="Left" margin="10,2,0,2" width="5"> <rectangle fill="White" stroke="White" horizontalalignment="Left" margin="17,2,0,2" width="5"> <rectangle fill="White" stroke="White" horizontalalignment="Right" margin="0,2,16,2" width="5"> <rectangle fill="White" stroke="White" horizontalalignment="Right" margin="0,2,9,2" width="5"> <Style x:Key="ProgressBar" TargetType="ProgressBar"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ProgressBar}"> <Grid x:Name="BataryStatus" Height="20" Width="38" Background="Black"> <Rectangle Stroke="White" Margin="0,0,6,0" /> <Rectangle Fill="White" HorizontalAlignment="right" Margin="0,4"/> <Rectangle Fill="White" Stroke="White" HorizontalAlignment="Right" Margin="0,4" Width="5" /> <Rectangle Fill="White" Stroke="White" HorizontalAlignment="Left" Margin="3,2,0,2" Width="5" /> <Rectangle Fill="White" Stroke="White" HorizontalAlignment="Left" Margin="10,2,0,2" Width="5" /> <Rectangle Fill="White" Stroke="White" HorizontalAlignment="Left" Margin="17,2,0,2" Width="5" /> <Rectangle Fill="White" Stroke="White" HorizontalAlignment="Right" Margin="0,2,16,2" Width="5" /> <Rectangle Fill="White" Stroke="White" HorizontalAlignment="Right" Margin="0,2,9,2" Width="5" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> 这篇关于如何设计垂直进度条动态显示电池状态？在这里，我使用了正常进度条，我想做垂直条形进度条。哪个动态显示电池状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

white

如何设计垂直进度条动态显示电池状态？在这里，我使用了正常进度条，我想做垂直条形进度条。哪个动态显示电池状态