1

I want to display the battery charging status in WPF (xaml and c#) similar to how it's displayed on an android phone where the inner part changes according to the battery percentage like displayed in the picture is there anyway to do this without using the progress bar to act like a pseudo battery level indicator?

Battery charging status

I'm new to WPF and I haven't tried any code for this yet If any more details are required please let me know. I found some CODE that implements it using c# but I'm not sure how to integrate that with WPF.

Death Guard
  • 380
  • 3
  • 15
  • keep 10 or 20 images of the percentages and switch them accordingly? – Charles Jan 01 '20 at 06:38
  • Thank you i'll try that Also I found [This](http://csharphelper.com/blog/2016/01/display-battery-status-friendly-way-c/) but i'm not sure how to implement it in wpf – Death Guard Jan 01 '20 at 06:47
  • Have you gotten a way to track the current percentage of the battery? Or to know when it is charging or not? Or to even know if a battery is present? – preciousbetine Jan 01 '20 at 06:52
  • I'm using [This Code](http://www.shenchauhan.com/blog/2015/8/29/uh-oh-low-battery-how-to-get-battery-information-in-a-uwp) to track the battery percentage. – Death Guard Jan 01 '20 at 07:03
  • 1
    Why don't you want to use ProgressBar? It's the simplest way to do it and [can be easily templated](https://markheath.net/post/styling-a-vertical-progressbar-in-wpf) to look however you want. – Mark Feldman Jan 01 '20 at 09:55
  • Thank you for the help but like i mentioned in the explanation of my question is there anyway to do it without that? If not then i will simply use the progress bar since it's so convenient. – Death Guard Jan 01 '20 at 09:55

1 Answers1

7

I still think a ProgressBar is a better way to do this, but if you insist...you can use a Grid with 2 rows. Set the height of the second row to "Auto" and populate it with a border with the height set (or better yet, bound) to your battery level. Wrap the whole thing in a Viewbox and it'll scale automatically while still allowing you to use set values i.e. 0-100.

<Viewbox Width="200" Height="400">
    <StackPanel Orientation="Vertical">
        <Border Background="#00c000" CornerRadius="2,2,0,0" Padding="2" Width="20" Height="7" Margin="0,-2,0,-2"/>
        <Border BorderBrush="#00c000" BorderThickness="2" CornerRadius="5" Padding="2" Width="50" Height="100">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Border Height="75" Grid.Row="1" Background="#00c000" CornerRadius="2" Padding="2" />
            </Grid>
        </Border>
    </StackPanel>
</Viewbox>

Result:

enter image description here

But like I said...use a ProgressBar. You'll be much happier for it. :)

Mark Feldman
  • 15,731
  • 3
  • 31
  • 58
  • Thank you so much mark i'd also be happier using a progress bar unfortunately I was told I can't so thanks again for this. – Death Guard Jan 01 '20 at 10:11
  • Strange requirement, makes me wonder if the person telling you you can't is expecting a different/better solution, like one that employs Paths? – Mark Feldman Jan 01 '20 at 10:16
  • Not sure. Maybe. – Death Guard Jan 01 '20 at 10:21
  • I'm curious how would you do this with a status bar is it just a simple replacement of `` with a progress bar? – Death Guard Jan 02 '20 at 07:37
  • 1
    The most simple implementation would be to take all that code I posted and put it inside a ControlTemplate and then set a ProgressBar's `Template` to that. The only other change would be to bind the Border height to the ProgressBar's template i.e. `Height="{TemplateBinding Value}"`. – Mark Feldman Jan 02 '20 at 07:44
  • Like I said though, this is the most simple implementation. Those GUI elements I'm using are a bit heavy handed for something like this, a better/more-optimal solution would be to replace those with Paths, which starts getting a bit more complex but is more flexible and robust. – Mark Feldman Jan 02 '20 at 07:46