How to Draw the battery level like on android or i-phones in WPF on the GUI

Question

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?

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.

Answer 1

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:

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