Design battery status similar to mobile using Gauge

[Nilesh]

Hi Team,

We want to show the battery status for laptop users in our application designed using Telerik in MVVM pattern using PRISM framework. We want to show the ICON with gauge showing current status of Battery very similar to thermometer design present in Telerik sample application. 

We are able to design the Battery similar to mobile application using Viewbox and Borders in WPF. We are not able to implement it in the Telerik RadVerticalLinearScale Custom Items. We want to define the battery status with 3 ranges in which one will be red indicating action required, one will be yellow representing warning and one will be green indicating normal state. Kindly help us design it using RadVerticalLinearGauge. 

Below is the code we tried but it is not working. If you have any other way then please help we also tried like thermometer code but we are not able to design the battery as shown in image.

<telerik:RadVerticalLinearGauge Grid.Row="3" Grid.Column="0" Grid.RowSpan="4"><br>                            <telerik:VerticalLinearScale Min="0" Max="100" MajorTicks="4" RangeLocation="Inside" IsInteractive="True"><br>                                <telerik:VerticalLinearScale.Ranges><br>                                    <telerik:GaugeRange Background="#FFE50000" Min="0" Max="20" IndicatorBackground="#FFE50000" StartWidth="0.05" EndWidth="0.05"/><br>                                    <telerik:GaugeRange Background="#FFFFFF00" Min="20" Max="30" IndicatorBackground="#FFFFFF00" StartWidth="0.05" EndWidth="0.05"/><br>                                    <telerik:GaugeRange Background="#FF32CD32" Min="30" Max="100" IndicatorBackground="#FF32CD32" StartWidth="0.05" EndWidth="0.05"/><br>                                </telerik:VerticalLinearScale.Ranges><br>                                <telerik:VerticalLinearScale.Indicators><br>                                    <telerik:BarIndicator UseRangeColor="True"<br>                                                        RangeColorMode="MixedColor" <br>                                                        Value="35" /><br>                                </telerik:VerticalLinearScale.Indicators><br>                                <telerik:VerticalLinearScale.Template><br>                                    <ControlTemplate><br>                                        <Viewbox Width="80" Height="150"><br>                                            <StackPanel Orientation="Vertical"><br>                                                <Border Background="#00c000" CornerRadius="2,2,0,0" Padding="2" Width="20" Height="7" Margin="0,-2,0,-2"/><br>                                                <Border BorderBrush="#00c000" BorderThickness="2" CornerRadius="5" Padding="2" Width="50" Height="100"><br>                                                    <Grid><br>                                                        <Grid.RowDefinitions><br>                                                            <RowDefinition /><br>                                                            <RowDefinition Height="Auto" /><br>                                                        </Grid.RowDefinitions><br>                                                        <Border Height="75" Grid.Row="1" Background="#00c000" CornerRadius="2" Padding="2" /><br>                                                    </Grid><br>                                                </Border><br>                                            </StackPanel><br>                                        </Viewbox><br>                                    </ControlTemplate><br>                                </telerik:VerticalLinearScale.Template><br>                            </telerik:VerticalLinearScale><br>                        </telerik:RadVerticalLinearGauge>

 

Hi Martin,
Thanks for the code sample tried to implement the way you have shown but it does not look like the expected design shared in the sample image. We have Windows application which we have designed using telerik control and was able to achieve the same design using rad linear Gauge.  You can check below attached image for the same. We are migrating this application to WPF and we are not able to design this part. Can you look at windows control and helps us design the same way?
Or can we achieve the same thing using any other way like using path for designing the battery icon like you people had designed the thermometer? Kindly help.

 

Attaching changedbatterydesignonResize for reference.

[Martin Ivanov]

Hello Nilesh,

There is no built-in feature that allows this visualization and also there is no example showing how to achieve it. However, I've attached a small example showing one way to do similar visualization using the custom items feature of the scale and some code-behind. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik

[Nilesh]

Please refer the question I have updated it, this is not an answer.

[Nilesh]

Hi Martin, I have updates my question and added one more image please go thought it and help us as we were able to that in windows application.

[Martin Ivanov]

Hello Niles. The second picture seems very similar to the project attached in the answer. Can you tell me what is missing in the approach shown in the project?

[Nilesh]

Hello Martin, As soon as screen size is changed the whole designed get disturbed and even after screen is restored to original size design does not get restored. I have attached one more image sample showing this behavior with your attached sample code. One more thing I like to mention here is the entire design is loaded into RadTile View along with few Textblocks showing different parameters for battery hence I do not have large space to allocate for the battery design. Please refer attached image in question showcasing above scenario.

[Martin Ivanov]

Hello Nilesh,

I've double checked the previous project, but it works properly on my side, regardless of the size of the control. Note that the example contains also code-behind with custom code that adjusts the battery visual in the CustomItems collection of the gauge. This is required because there is no convenient approach to include the custom item so that it wrap the gauge's bar indicator. All visuals in the gauge are drawn and arrange manually by the control and their position and size do not rely on the built in logic coming from the WPF panels. This makes it harder to include additional elements that should stretch to a specific area. Instead, we recommend the CustomItems for items that can be placed at a specific point and their size doesn't affect the visualization in the control.

Can you please double check the example also on your side with the latest version of Telerik UI for WPF and if still doesn't work, can you send over a recording showing the exact issue?

Note that I've converted your last answer to a comment into the comments section of this answer.