Telerik Forums
UI for WPF Forum
1 answer
331 views

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.

Nilesh
Top achievements
Rank 1
Veteran
 updated question on 04 May 2021
1 answer
362 views

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.

 

Martin Ivanov
Telerik team
 answered on 03 May 2021
1 answer
699 views

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 

Dinko | Tech Support Engineer
Telerik team
 answered on 03 May 2021
1 answer
379 views

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. 

                              
Dimitar
Telerik team
 answered on 03 May 2021
1 answer
362 views

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

Martin Ivanov
Telerik team
 answered on 03 May 2021
0 answers
68 views

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?

Himanshu
Top achievements
Rank 1
 asked on 02 May 2021
3 answers
316 views
I feel silly for asking as I should know how to do this. I am using the Fluent theme and want to bold the Header Text of the Selected Tab. It is possible we will change themes, Is that something simply done?
Thilo
Top achievements
Rank 1
Iron
 answered on 02 May 2021
0 answers
126 views

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.

Kim
Top achievements
Rank 1
 updated question on 30 Apr 2021
0 answers
139 views

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

                                                         
Kim
Top achievements
Rank 1
 asked on 30 Apr 2021
9 answers
231 views

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:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             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.Resources
Imports Telerik.Windows.Controls.Map
 
Public 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 Sub
End Class

 

Thanks for your help

Yoan

Yoan
Top achievements
Rank 1
Iron
 answered on 30 Apr 2021
Narrow your results
Selected tags
Tags
GridView
General Discussions
Chart
RichTextBox
Docking
ScheduleView
ChartView
TreeView
Diagram
Map
ComboBox
TreeListView
Window
RibbonView and RibbonWindow
PropertyGrid
DragAndDrop
TabControl
TileView
Carousel
DataForm
PDFViewer
MaskedInput (Numeric, DateTime, Text, Currency)
AutoCompleteBox
DatePicker
Buttons
ListBox
GanttView
PivotGrid
Spreadsheet
Gauges
NumericUpDown
PanelBar
DateTimePicker
DataFilter
Menu
ContextMenu
TimeLine
Calendar
Installer and Visual Studio Extensions
ImageEditor
BusyIndicator
Expander
Slider
TileList
PersistenceFramework
DataPager
Styling
TimeBar
OutlookBar
TransitionControl
FileDialogs
Book
ToolBar
ColorPicker
TimePicker
MultiColumnComboBox
SyntaxEditor
VirtualGrid
Wizard
ExpressionEditor
NavigationView (Hamburger Menu)
WatermarkTextBox
DesktopAlert
BarCode
SpellChecker
DataServiceDataSource
EntityFrameworkDataSource
RadialMenu
ChartView3D
Data Virtualization
BreadCrumb
ProgressBar
Sparkline
LayoutControl
TabbedWindow
ToolTip
CloudUpload
ColorEditor
TreeMap and PivotMap
EntityFrameworkCoreDataSource (.Net Core)
HeatMap
Chat (Conversational UI)
VirtualizingWrapPanel
Calculator
NotifyIcon
TaskBoard
TimeSpanPicker
BulletGraph
Licensing
WebCam
CardView
DataBar
FilePathPicker
PasswordBox
Rating
SplashScreen
Accessibility
Callout
CollectionNavigator
Localization
AutoSuggestBox
Security
VirtualKeyboard
HighlightTextBlock
TouchManager
StepProgressBar
Badge
OfficeNavigationBar
ExpressionParser
CircularProgressBar
SvgImage
PipsPager
SlideView
AI Coding Assistant
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?