This is a migrated thread and some comments may be shown as answers.

Design battery status similar to mobile using Gauge

1 Answer 33 Views
Gauges TileView
This is a migrated thread and some comments may be shown as answers.
Nilesh
Top achievements
Rank 1
Veteran
Nilesh asked on 21 Apr 2021, 03:58 PM | edited on 04 May 2021, 07:08 AM

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.

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 26 Apr 2021, 12:56 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Nilesh
Top achievements
Rank 1
Veteran
commented on 28 Apr 2021, 06:03 AM | edited

Please refer the question I have updated it, this is not an answer.
Nilesh
Top achievements
Rank 1
Veteran
commented on 28 Apr 2021, 06:05 AM | edited

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
Telerik team
commented on 30 Apr 2021, 11:09 AM

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
Top achievements
Rank 1
Veteran
commented on 04 May 2021, 07:06 AM

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
Telerik team
commented on 06 May 2021, 12:09 PM

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.

Tags
Gauges TileView
Asked by
Nilesh
Top achievements
Rank 1
Veteran
Answers by
Martin Ivanov
Telerik team
Share this question
or