Click here to Skip to main content
15,887,676 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
XML
<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>
Posted

Hi,

You just have to use binding, for example:

MainWindow.cs:

XML
<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:

C#
/// <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% :)
 
Share this answer
 
Comments
Shai Vashdi 28-Apr-14 14:17pm    
Yes, you can create a progress bar with "rectangular bars" using Control-Template.
Member 10570161 28-Apr-14 23:53pm    
Can u pls suggest sample code for same?
Shai Vashdi 29-Apr-14 2:54am    
No, I don't have an example for that. But I remember I've found samples for that in the past. Just search in google "ProgressBar Control-Template".
Member 10570161 30-Apr-14 6:48am    
<Style x:Key="ProgressBar" TargetType="ProgressBar">
<setter property="Template">
<setter.value>
<controltemplate targettype="{x:Type ProgressBar}">
<grid x:name="BataryStatus" height="20" width="38" removed="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">



<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">



 
Share this answer
 
XML
<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>
 
Share this answer
 
Comments
Member 10570161 30-Apr-14 7:55am    
Its nt reflecting on battery icon

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900