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.
Hello.
I'm looking for a similar control like Matrix table.
Among them, HeatMap Control is the most similar, so I used it.
But here is the problem. I have attached an example file.
I want to control by putting TextBox in Cell. However, putting a textbox in the template doesn't work.
I'm far from using HeatMap, but I'm trying to use it this way.
Is there a way or could you recommend a different control for what I want to do?
Thanks.
Hello,
Please see the attached sample app for reference.
The issue is with the Crystal theme when I try to set the height of the row to 20 pixels in the grids and the height does change, however, it won't increase when a cell's text wraps. If you run the attached app you will see that behavior.
The row height is set in App.xaml line 73. If you comment out that line you will see the functionality of the row height resize, but there is a lot of white space above and below the text in the grid. This is what I am trying to remove.
There is code I added to the App.xaml file at line 69 that sets the theme for the gridview to VisualStudio2019 that sets the row height the way I want it in the grids, however, if you comment that out and leave the line 73 uncommented, the row height for the grid does not increase with word wrapping in the cell.
Is there a way to get the row height to have less white space and the row height to adjust with the word wrapping in the cells?
Thanks,
Jack
Hi,
I'm version locked at 2020.1.218.
I'm not sure what I am doing wrong or has changed but suddenly I am no longer able to render pdf from a file or URL. The implementation was simple. Here is my snippet
PDFURL is a direct url string to a hosted PDF file.
var SavePathStr = @"%ALLUSERSPROFILE%\HES\" + Constants.TempNDApdf;
var SavePathFinal = Environment.ExpandEnvironmentVariables(SavePathStr);
using (WebClient client = new WebClient())
{
client.DownloadFile(PDFURL, SavePathFinal);
}
pdfViewer.DocumentSource = new PdfDocumentSource(new Uri(SavePathFinal));
I've not have any issues doing it this way until recent compiles. I'm not sure what I broke.
if it helps, this is my xml using for RadPdfViewer,
<telerik:RadPdfViewer x:Name="pdfViewer" BorderBrush="#286090" BorderThickness="2"
Grid.Column="0" Grid.ColumnSpan="2" Margin="0,15,5,0"
Grid.Row="0" Grid.RowSpan="3" Background="Transparent"
Width="875" Height="400"
HorizontalAlignment="Right" VerticalAlignment="Center"
/>
I'm not seeing any "errors" exactly, no exceptions thrown. I get a quick loading symbol and nothing happens. If I step into it to examine the new PdfDocumentSource, it says "Document" is null.

Hi
I’m trying to get keyboard shortcuts to work inside several tab items. However, keyboard shortcuts only work after you click on something/anything inside of the tab. Clicking on the Tab header is not enough.
I have tried focusing on the first child in code when the tab is selected but that doesn’t work, it's only after a mouse click inside the tab that it starts to work.
<telerik:RadTabItem Header="Item X" >
<telerik:RadTabItem.InputBindings>
<KeyBinding Key="N" Modifiers="Ctrl" Command="{Binding NewItemXCommand}" />
<KeyBinding Key="R" Modifiers="Ctrl" Command="{Binding ReloadItemXCommand}" />
</telerik:RadTabItem.InputBindings>
<Grid>
<!-- Content -->
</Grid>
</telerik:RadTabItem>
<telerik:RadTabItem Header="Item Y" >
<telerik:RadTabItem.InputBindings>
<KeyBinding Key="N" Modifiers="Ctrl" Command="{Binding NewItemYCommand}" />
<KeyBinding Key="R" Modifiers="Ctrl" Command="{Binding ReloadItemYCommand}" />
</telerik:RadTabItem.InputBindings>
<Grid>
<!-- Content -->
</Grid>
</telerik:RadTabItem>
Any advice you can offer would be appreciated.
Thanks,
Richard

I have created an application in which user can draw RadDiagramShapes on an Image which is again a RadDiagramShape, an image is just set on the content of the shape.
When i am connecting two shapes with RadDiagramConnection it is present in the list but i am not able to see those connections.
When i create these connections without the image in the background the connections will show.
Can someone please help me how can i see the connections with background image on?
Hi all!
This question is not accurate enough, the actual problem is described here: https://www.telerik.com/forums/radtoolbartray-itemtemplateselector-problems
***
I have not updated my Telerik components for years; last time I did, the radToolbars stopped working, and I have not had the time to look into it. So I reverted back to what worked, but now I feel it's time to get back on the track.
So here we go: programmatically generated toolbars on my main form do not display any buttons. I use toolbar and button view models that the UI components bind to. The entire set of toolbar viewmodels are built on the fly, and only empty toolbars show up. I have other UI components which have buttonless toolbar components placed onto them at design time, and those work when I add the buttons runtime, so the only difference I've found has to do with the non-working toolbars not existing at design time.
They work in RCWPF 2018.3.1016.45, so that's what I'm still using. This happened when I (briefly) upgraded to 2020.2.513.45, and the problem still exists in the current version.
The images show the two different versions. The dockable Conceptual model window contains an empty-at-design-time toolbar, which is populated when the UI is initialized. The main window contains a toolbar container which does not contain any toolbar components at design time.
Does anything come to mind immediately? If not, I will dig into my code.
And to be clear, the generated toolbarviewmodel has several buttonviewmodels on it. The same code builds the viewmodels in both cases.
Hi!
I have my own toolbar class, derived directly from RadToolbar:
<telerik:RadToolBar x:Class="MyNS.Components.MyToolbar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:viewmodel="clr-namespace:MyNS.ViewModel;assembly=MyNS.ViewModel"
d:DataContext="{d:DesignInstance Type=viewmodel:ToolbarViewModel}"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
VerticalAlignment="Top"
DataContext="{Binding}"
Visibility="{Binding ToolbarVisible, Converter={StaticResource BoolToVisibility}}"
ItemTemplateSelector="{StaticResource ToolbarElementTemplateSelector}"
ItemsSource="{Binding Elements}"
Band="{Binding Band}"
BandIndex="{Binding BandIndex}"
>
</telerik:RadToolBar>
with
public partial class MyToolbar : RadToolBar
{
public MyToolbar()
{
InitializeComponent();
}
}
When I add this toolbar design time on my child forms it works nicely. The underlying ToolbarViewModel binds all the way, and I get the buttons I want when I run the app.
But when dynamically instantiating new ToolbarViewModels to be shown on my MainWindow, I get empty buttonless RadToolbar instances, not MyToolbar instances. So I want to control what kind of toolbar gets instantiated. I have this in MainWindow.xaml:
<telerik:RadWindow x:Class="MyNS.MainWindow"
...
<telerik:RadToolBarTray
Name="Toolbars"
Grid.Row="1"
ItemsSource="{Binding Path=Toolbars}"
IsLocked="False"
ItemTemplateSelector="{StaticResource ToolbarTemplateSelector}"
/>
</telerik:RadWindow>
The binding itself works. I get RadToolbars, but without any buttons on them. But I get the wrong kind of toolbar, and I thought the ToolbarTemplateSelector would do it, but it never gets called.
So I have:
public class ToolbarTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
// currently only one toolbar template
// THIS CODE IS NEVER RUN
return this.MyToolbarTemplate;
}
public DataTemplate MyToolbarTemplate { get; set; }
}
and DataTemplate.xaml
<ResourceDictionary
...
<!-- compile error if removed, so the mainwindow reference correctly points to this -->
<vm:ToolbarTemplateSelector
x:Key="ToolbarTemplateSelector"
MyToolbarTemplate="{StaticResource dtMyToolbar}"
/>
</ResourceDictionary>
and in PaneTemplate.xaml I have:
<ResourceDictionary
...
<!-- app crashes on start if this is removed -->
<DataTemplate x:Key="dtMyToolbar" DataType="{x:Type vm:ToolbarViewModel}">
<components:MyToolbar />
</DataTemplate>
</ResourceDictionary>
In my mind, whenever a new ToolbarViewModel is added to the Toolbars collection, the ToolbarTemplateSelector should instantiate a MyToolbar instance for it, and not a RadToolbar instance.
I have no idea what's missing.
Oh, I also tested with:
<telerik:RadWindow x:Class="MyNS.MainWindow"
...
<telerik:RadToolBarTray
Name="Toolbars"
Grid.Row="1"
ItemsSource="{Binding Path=Toolbars}"
IsLocked="False"
>
<DataTemplate>
<ksc:MyToolbar/>
</DataTemplate>
</telerik:RadToolBarTray>
...
</telerik:RadWindow>
But then the app crashes with the error message "Items collection must be empty before using ItemsSource." before the main window shows up. I don't see why that would happen, as the toolbartray is definitely empty at first.
Appreciate any help,
Kim
Hi,
I'm using RadMap to load a simple ESRI shapefile containing points (described by latitude/longitude in associated dbf file).
I want to change the defaut icon used to draw the point (which is looking like a google map pin) to a single blue circle with a radius of one ou two pixel.
I want to change the color of the circle on mouse click for select it.
I tried to use VisualizationLayer.ShapeFill but it doesn't work.
Here is my code :
<UserControl x:Class="Example" xmlns:local="clr-namespace:POCMap" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <UserControl.Resources> </UserControl.Resources> <DockPanel> <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" HorizontalAlignment="Center"> <Button Click="France_OnClick">France</Button> <Button Click="Roumanie_OnClick">Roumanie</Button> <Button Click="Yenne_OnClick">Yenne</Button> </StackPanel> <Grid DockPanel.Dock="Bottom"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock Grid.Row ="0" Grid.Column="0">Latitude (°N)</TextBlock> <TextBox Grid.Row ="0" Grid.Column="1" x:Name="txtLatitude" KeyDown="TxtLatitudeLongitude_OnKeyDown"></TextBox> <TextBlock Grid.Row ="1" Grid.Column="0">Longitude (°E)</TextBlock> <TextBox Grid.Row ="1" Grid.Column="1" x:Name="txtLongitude" LostFocus="TxtLatitudeLongitude_OnLostFocus" KeyDown="TxtLatitudeLongitude_OnKeyDown"></TextBox> </Grid> <telerik:RadBusyIndicator Name="busyIndicator"> <telerik:RadMap x:Name="radMap" Center="40,-100" ZoomLevel="8" > <telerik:RadMap.Provider> <telerik:ArcGisMapProvider x:Name="prov" Mode="Aerial" /> </telerik:RadMap.Provider> <!--<telerik:InformationLayer x:Name="informationLayer"/>--> <telerik:VisualizationLayer x:Name="visualizationLayer" UseBitmapCache="False"> <telerik:VisualizationLayer.ZoomLevelGridList> <telerik:ZoomLevelGrid MinZoom="0" /> <telerik:ZoomLevelGrid MinZoom="9" /> <telerik:ZoomLevelGrid MinZoom="8" /> </telerik:VisualizationLayer.ZoomLevelGridList> <telerik:VisualizationLayer.ShapeFill> <telerik:MapShapeFill Fill="#6FDFEFFF" Stroke="Blue" StrokeThickness="2" /> </telerik:VisualizationLayer.ShapeFill> <telerik:VisualizationLayer.VirtualizationSource> <telerik:MapShapeDataVirtualizationSource x:Name="mapShapeDataVirtualizationSource"> <telerik:MapShapeDataVirtualizationSource.Reader> <!--<telerik:AsyncShapeFileReader Source="/POCMap;component/Resources/Time_Zones.shp" ToolTipFormat="Time Zone : {ZONE_}" /> --> <telerik:AsyncShapeFileReader x:Name="mapShapeDataReader" ToolTipFormat="Latitude : {latitude} / Longitude : {longitude}" ProgressChanged="OnProgressChanged" ReadShapeDataCompleted="OnReadShapeDataCompleted"/> </telerik:MapShapeDataVirtualizationSource.Reader> </telerik:MapShapeDataVirtualizationSource> </telerik:VisualizationLayer.VirtualizationSource> </telerik:VisualizationLayer> </telerik:RadMap> </telerik:RadBusyIndicator> </DockPanel></UserControl>
Imports System.Windows.ResourcesImports Telerik.Windows.Controls.MapPublic Class Example Public Sub New() ' Cet appel est requis par le concepteur. InitializeComponent() AddHandler Me.Loaded, AddressOf Page_Loaded ' Ajoutez une initialisation quelconque après l'appel InitializeComponent(). prov.Mode = ArcGisMapMode.Topographic radMap.Center = New Location(45.7, 5.75) radMap.ZoomLevel = 8 radMap.MaxZoomLevel=8 txtLatitude.Text = 45.7 txtLongitude.Text = 5.75 AddHandler Me.Loaded, AddressOf Me.ExampleLoaded End Sub Private Sub Page_Loaded(sender As Object, e As RoutedEventArgs) Me.mapShapeDataVirtualizationSource.ReadAsync() End Sub Private Sub TxtLatitudeLongitude_OnLostFocus(sender As Object, e As RoutedEventArgs) SetLocation() End Sub Private Sub TxtLatitudeLongitude_OnKeyDown(sender As Object, e As KeyEventArgs) If e.Key = Key.Enter Then SetLocation() End If End Sub Private Sub SetLocation() If txtLatitude.Text AndAlso txtLongitude.Text Then Dim latitude = CDbl(txtLatitude.Text) Dim longitude = CDbl(txtLongitude.Text) radMap.Center = New Location(latitude, longitude) End If End Sub Private Sub France_OnClick(sender As Object, e As RoutedEventArgs) radMap.Center = New Location(47.08, 2.39) radMap.ZoomLevel = 6 End Sub Private Sub Roumanie_OnClick(sender As Object, e As RoutedEventArgs) radMap.Center = New Location(44.94, 26.96) radMap.ZoomLevel = 6 End Sub Private Sub Yenne_OnClick(sender As Object, e As RoutedEventArgs) radMap.Center = New Location(45.7, 5.75) radMap.ZoomLevel = 13 End Sub Private Sub ExampleLoaded(sender As Object, e As RoutedEventArgs) Me.busyIndicator.IsIndeterminate = False Me.busyIndicator.IsBusy = True Me.mapShapeDataReader.Source = New Uri("/POCMap;component/Resources/0.25deg_grille_EU.shp", UriKind.Relative) End Sub Private Sub OnProgressChanged(sender As Object, e As System.ComponentModel.ProgressChangedEventArgs) Me.busyIndicator.ProgressValue = e.ProgressPercentage If e.ProgressPercentage >= 100 Then Me.busyIndicator.IsIndeterminate = True Me.busyIndicator.BusyContent = "Refresh layer" End If End Sub Private Sub OnReadShapeDataCompleted(sender As Object, e As Telerik.Windows.Controls.Map.ReadShapeDataCompletedEventArgs) If Me.busyIndicator IsNot Nothing Then Me.busyIndicator.IsBusy = False End If End SubEnd Class
Thanks for your help
Yoan