如何设计垂直进度条动态显示电池状态？在这里，我使用了正常进度条，我想做垂直条形进度条。哪个动态显示电池状态 [英] How To Design Vertical Progress Bar Showing Battery Status Dynamically? Here, I Have Used Normal Progress Bar, I Want To Do Vertical Bars Type Progress Bar. Which Display Battery Status Dynamically

查看：100
本文介绍了如何设计垂直进度条动态显示电池状态？在这里，我使用了正常进度条，我想做垂直条形进度条。哪个动态显示电池状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 <   ProgressBar     x：名称  =  BatteryStatus    值  =  50    Horizo​​ntalContentAlignment   = 拉伸    VerticalContentAlignment   = 拉伸    VerticalAlignment   =  Top < span class =code-attribute>     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   = 垂直    Horizo​​ntalContentAlignment   =  Stretch    VerticalContentAlignment   =  拉伸    VerticalAlignment  < span class =code-keyword> =  Top      SnapsToDevicePixels   = 真     背景 < span class =code-keyword> = 黑色   保证金  =  0   高度  =  80   宽度  =  35 < span class =code-attribute>  >  
 <  < span class =code-leadattribute> ProgressBar.ToolTip    >  
 <  工具提示   展示位置  = 底部   可见性  = 可见 >  
 <   StackPanel  >  
 < ;！ -    <标签内容=剩余50％/可用（插入，充电）/>    - >   
 <   StackPanel    方向  =  水平 >  
 <   TextBlock    文字  = 电源可用性：  /  >  
 <   TextBlock    文字  =  {Binding BataryValue}  /  >  
 <   TextBlock    文字  = ％  /  >  
 <   / StackPanel  >  
 <   StackPanel    方向  = 水平 < span class =code-keyword>>  
 <   TextBlock    文字  = 剩余时间：  /  >  
 <   TextBlock    文本  =  {Binding BataryValue}  /  < span class =code-keyword>>  
 <   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 {< span class =code-keyword> get ;  set ;} 
 
  void  timer_Elapsed（ object  sender，ElapsedEventArgs e）
 {
  this  .Dispatcher.BeginInvoke（DispatcherPriority.Normal， new  Action（（）= >  {此 .BataryValue  -  =  10 ; NotifyPropertyChanged（ < span class =code-string> BataryValue）;}））; 
} 
 
  //  此方法由每个属性的Set访问者调用。 
  //  应用于可选propertyName的CallerMemberName属性 
  //  参数导致调用者的属性名称被替换为参数。 
  private   void  NotifyPropertyChanged（ String  propertyName =  ）
 {
  if （PropertyChanged！=  null ）
 {
 PropertyChanged（ this ， new  PropertyChangedEventArgs（propertyNam E））; 
} 
} 
 
  public   event  PropertyChangedEventHandler PropertyChanged ; 
}





这应显示电池从100％到0％：）


< blockquote>< 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 =Whitehorizo​​ntalalignment =rightmargin =0,4> ;

< rectangle fill =Whitestroke =Whitehorizo​​ntalalignment =Rightmargin =0,4width =5>

< ; rectangle fill =Whitestroke =Whitehorizo​​ntalalignment =Leftmargin =3,2,0,2width =5>

< rectangle fill =White stroke =Whitehorizo​​ntalalignment =Left margin =10,2,0,2width =5>

< rectangle fill =Whitestroke =Whitehorizo​​ntalalignment =Leftmargin =17,2 ，0,2width =5>

< rectangle fill =Whitestroke =Whitehorizo​​ntalalignment =Rightmargin =0,2,1,2,2width =5>

< rectangle fill =Whitestroke =Whitehorizo​​ntalalignment =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    /  < span class =code-keyword>>  
 <  矩形   填充  = 白色    Horizo​​ntalAlignment   =  right   保证金  =  0,4  /  >  
 <  矩形    F.生病  = 白色   笔划  = 白色    Horizo​​ntalAlignment   = 正确   保证金  =   0,4   宽度  =  5    /  >  
 <   Rectangle    填写  = 白色   笔划  = 白色    Horizo​​ntalAlignment   = 左   保证金  =  3,2,0,2   宽度  =  5    /  >  
 < ;  矩形   填充  = 白色   笔划  = 白色    Horizo​​ntalAlignment   = 左   保证金  =  10,2,0,2   宽度  =  5    /  >  
 <  矩形   填充  = 白色   笔划  = 白色    Horizo​​ntalAlignment   = 左   保证金  =  17,2,0,2   宽度  =  5    /  >  
 <  矩形   填写  = 白色   笔划  = 白色    Horizo​​ntalAlignment   = 右   保证金  =  0,2,1,2,2   宽度  =  5    /  >  
 <  矩形 < span class =code-attribute>  填充  = 白色   描边  =  白色    Horizo​​ntalAlignment   = 右   保证金  =  0,2,9,2 < span class =code-attribute>  宽度  =  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="50% remaining/ available (plugged in , charging)"/>-->
<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>
                    <!--<Label Content="50% remaining/ available (plugged in , charging)"/>-->
                    <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>


这篇关于如何设计垂直进度条动态显示电池状态？在这里，我使用了正常进度条，我想做垂直条形进度条。哪个动态显示电池状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆