Questions on UI for WPF Forum

25,613 questions

1 answer

412 views

Hello,

Is there a way to only display the TrackBall Info box when the right mouse button is clicked? We have a lot of info on our chart and sometimes the info box obscures the graph underneath.

Thanks.

ChartView

answered on 28 Jun 2019

3 answers

149 views

OpenDocumentCommand not working

Hi,

I tried to open a document using the OpenDocumentCommand but it's not working.

Could you provide me some information how to achieve this?

Btw: SaveCommand opens the SaveFileDialog as expected.

best regards

Dietmar

<Window

x:Class="telerikrtbtest.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:local="clr-namespace:telerikrtbtest"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Title="MainWindow"

Width="525"

Height="350"

mc:Ignorable="d">

<Grid>

<Grid.Resources />

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<telerik:RadRibbonButton

x:Name="OpenDocumentButton"

Margin="0,2,2,2"

telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding OpenDocumentCommand}"

Content="open"

DataContext="{Binding Commands, ElementName=richTextBoxAdv}" />

<telerik:RadRichTextBox x:Name="radRichTextBox" Grid.Row="1" />

</Grid>

</Window>

RichTextBox

answered on 27 Jun 2019

3 answers

208 views

Tile "Grid" Behavior

I'm looking to achieve a Tile "Grid"-like behavior, with Tiles of varying sizes being placed with optional space between them within in a fixed area. The tiles would be resizable between the provided sizes (Single, Double, Quad) but also a 1x2 orientation (Tall) and the space between them would always been in increments of the fixed TilePlaceHolderSide value. See the behavior of the Windows 10 Start Menu Tiles for the closest easily-accessible example.

I am well aware that I'm going to have to do some customization, particularly in layout/measurement, but I'm just wondering:

Which would be a better starting point: TileList or TileView?

Would I have to modify the source directly, or would simply creating a custom control that inherits from TileList or TileView be enough?

Has anyone on these forums met a similar requirement and have any advice?

TileList

answered on 27 Jun 2019

1 answer

2.7K+ views

wrap text in label

How can I enable wrap text in telerik label?

General Discussions

answered on 27 Jun 2019

0 answers

99 views

Chart: TrackBallInfo doesn't update

Hello Developers,

I have simple scenario. Three charts with Zoom and Pan behavior and Track Ball behavior. When i zoom(or pan) in one chart then zoom(or pan) is bind to another charts.

I have to display datas for one day. I am using DateTimeCategoricalAxis and populate collection with data each minute. That means i have 1440 categories.

I display 3 series (bar, line, point). Everything works, but if i zoom in that scenario trackball info is not updated well.

Trackball info is still on same place and is blank.

You can see it in attached file.

<Window x:Class="Chart.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:Chart"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"

mc:Ignorable="d"

Title="MainWindow">

<Grid>

<Grid.Resources>

<Style x:Key="MonitorChartStyle" TargetType="telerik:RadCartesianChart">

<Setter Property="Margin" Value="4" />

<Setter Property="TrackBallLineStyle" Value="{x:Null}" />

</Style>

<DataTemplate x:Key="TrackBallInfoTemplateOnlineQuality">

<StackPanel Orientation="Horizontal">

<Rectangle Fill="DodgerBlue"

Width="8"

Height="8"

StrokeThickness="1"

Stroke="White"

VerticalAlignment="Center"

Margin="4,0,4,0" />

<TextBlock

Text="Tonnage: " />

<TextBlock Text="{Binding DataPoint.Value, StringFormat={}{0:0.##}}" />

</StackPanel>

</DataTemplate>

</Grid.Resources>

<StackPanel Orientation="Vertical">

<telerik:RadCartesianChart HorizontalAlignment="Stretch"

Style="{DynamicResource MonitorChartStyle}"

Zoom="{Binding Path=Zoom, Mode=TwoWay}"

PanOffset="{Binding Path=PanOffset, Mode=TwoWay}"

MinHeight="200" Height="200">

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid MajorLinesVisibility="XY" />

</telerik:RadCartesianChart.Grid>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeCategoricalAxis

x:Name="HorizontalAxis"

SmartLabelsMode="SmartStep"

MajorTickInterval="10"

MajorTickStyle="{x:Null}" />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis x:Name="VerticalAxis"

SmartLabelsMode="SmartStepAndRange"

Minimum="0"

Maximum="100">

<telerik:LinearAxis.LabelStyle>

<Style TargetType="TextBlock">

<Setter Property="Width" Value="50" />

<Setter Property="TextAlignment" Value="Right" />

</Style>

</telerik:LinearAxis.LabelStyle>

</telerik:LinearAxis>

</telerik:RadCartesianChart.VerticalAxis>

<telerik:BarSeries ItemsSource="{Binding DestinationDataSeries}"

CategoryBinding="Category"

ValueBinding="Value"

TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">

<telerik:BarSeries.VerticalAxis>

<telerik:LinearAxis SmartLabelsMode="SmartStepAndRange"

HorizontalLocation="Right"

Minimum="0"

Maximum="100">

<telerik:LinearAxis.LabelStyle>

<Style TargetType="TextBlock">

<Setter Property="Width" Value="50" />

<Setter Property="TextAlignment" Value="Left" />

</Style>

</telerik:LinearAxis.LabelStyle>

</telerik:LinearAxis>

</telerik:BarSeries.VerticalAxis>

<telerik:BarSeries.DefaultVisualStyle>

<Style TargetType="Border">

<Setter Property="Background" Value="DodgerBlue" />

</Style>

</telerik:BarSeries.DefaultVisualStyle>

</telerik:BarSeries>

<chartView:LineSeries ItemsSource="{Binding SourceDataSeries}"

CategoryBinding="Category"

ValueBinding="Value"

Stroke="Red"

TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}" />

<telerik:PointSeries ItemsSource="{Binding OnlineDataSeries}"

CategoryBinding="Category"

ValueBinding="Value"

TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">

<telerik:PointSeries.PointTemplate>

<DataTemplate>

<Path Margin="4"

Stroke="Orange"

StrokeThickness="1"

StrokeStartLineCap="Square"

StrokeEndLineCap="Square"

Stretch="Uniform"

VerticalAlignment="Center"

HorizontalAlignment="Center">

<Path.Data>

<PathGeometry>

<PathGeometry.Figures>

<PathFigure StartPoint="0,0">

<LineSegment Point="4,4" />

</PathFigure>

<PathFigure StartPoint="0,4">

<LineSegment Point="4,0" />

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Path.Data>

</Path>

</DataTemplate>

</telerik:PointSeries.PointTemplate>

</telerik:PointSeries>

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartTrackBallBehavior ShowIntersectionPoints="False"

ShowTrackInfo="True" />

<telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" DragMode="Pan" PanMode="Horizontal" />

</telerik:RadCartesianChart.Behaviors>

</telerik:RadCartesianChart>

<telerik:RadCartesianChart HorizontalAlignment="Stretch"

Style="{DynamicResource MonitorChartStyle}"

Zoom="{Binding Path=Zoom, Mode=TwoWay}"

PanOffset="{Binding Path=PanOffset, Mode=TwoWay}"

MinHeight="200" Height="200">

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid MajorLinesVisibility="XY" />

</telerik:RadCartesianChart.Grid>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeCategoricalAxis

x:Name="HorizontalAxis2"

SmartLabelsMode="SmartStep"

MajorTickInterval="10"

MajorTickStyle="{x:Null}" />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis x:Name="VerticalAxis2"

SmartLabelsMode="SmartStepAndRange"

Minimum="0"

Maximum="100">

<telerik:LinearAxis.LabelStyle>

<Style TargetType="TextBlock">

<Setter Property="Width" Value="50" />

<Setter Property="TextAlignment" Value="Right" />

</Style>

</telerik:LinearAxis.LabelStyle>

</telerik:LinearAxis>

</telerik:RadCartesianChart.VerticalAxis>

<telerik:BarSeries ItemsSource="{Binding DestinationDataSeries}"

CategoryBinding="Category"

ValueBinding="Value"

TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">

<telerik:BarSeries.VerticalAxis>

<telerik:LinearAxis SmartLabelsMode="SmartStepAndRange"

HorizontalLocation="Right"

Minimum="0"

Maximum="100">

<telerik:LinearAxis.LabelStyle>

<Style TargetType="TextBlock">

<Setter Property="Width" Value="50" />

<Setter Property="TextAlignment" Value="Left" />

</Style>

</telerik:LinearAxis.LabelStyle>

</telerik:LinearAxis>

</telerik:BarSeries.VerticalAxis>

<telerik:BarSeries.DefaultVisualStyle>

<Style TargetType="Border">

<Setter Property="Background" Value="DodgerBlue" />

</Style>

</telerik:BarSeries.DefaultVisualStyle>

</telerik:BarSeries>

<chartView:LineSeries ItemsSource="{Binding SourceDataSeries}"

CategoryBinding="Category"

ValueBinding="Value"

Stroke="Red"

TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}" />

<telerik:PointSeries ItemsSource="{Binding OnlineDataSeries}"

CategoryBinding="Category"

ValueBinding="Value"

TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">

<telerik:PointSeries.PointTemplate>

<DataTemplate>

<Path Margin="4"

Stroke="Orange"

StrokeThickness="1"

StrokeStartLineCap="Square"

StrokeEndLineCap="Square"

Stretch="Uniform"

VerticalAlignment="Center"

HorizontalAlignment="Center">

<Path.Data>

<PathGeometry>

<PathGeometry.Figures>

<PathFigure StartPoint="0,0">

<LineSegment Point="4,4" />

</PathFigure>

<PathFigure StartPoint="0,4">

<LineSegment Point="4,0" />

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Path.Data>

</Path>

</DataTemplate>

</telerik:PointSeries.PointTemplate>

</telerik:PointSeries>

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartTrackBallBehavior ShowIntersectionPoints="False"

ShowTrackInfo="True" />

<telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" DragMode="Pan" PanMode="Horizontal" />

</telerik:RadCartesianChart.Behaviors>

</telerik:RadCartesianChart>

<telerik:RadCartesianChart HorizontalAlignment="Stretch"

Style="{DynamicResource MonitorChartStyle}"

Zoom="{Binding Path=Zoom, Mode=TwoWay}"

PanOffset="{Binding Path=PanOffset, Mode=TwoWay}"

MinHeight="200" Height="200">

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid MajorLinesVisibility="XY" />

</telerik:RadCartesianChart.Grid>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeCategoricalAxis

x:Name="HorizontalAxis3"

SmartLabelsMode="SmartStep"

MajorTickInterval="10"

MajorTickStyle="{x:Null}" />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis x:Name="VerticalAxis3"

SmartLabelsMode="SmartStepAndRange"

Minimum="0"

Maximum="100">

<telerik:LinearAxis.LabelStyle>

<Style TargetType="TextBlock">

<Setter Property="Width" Value="50" />

<Setter Property="TextAlignment" Value="Right" />

</Style>

</telerik:LinearAxis.LabelStyle>

</telerik:LinearAxis>

</telerik:RadCartesianChart.VerticalAxis>

<telerik:BarSeries ItemsSource="{Binding DestinationDataSeries}"

CategoryBinding="Category"

ValueBinding="Value"

TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">

<telerik:BarSeries.VerticalAxis>

<telerik:LinearAxis SmartLabelsMode="SmartStepAndRange"

HorizontalLocation="Right"

Minimum="0"

Maximum="100">

<telerik:LinearAxis.LabelStyle>

<Style TargetType="TextBlock">

<Setter Property="Width" Value="50" />

<Setter Property="TextAlignment" Value="Left" />

</Style>

</telerik:LinearAxis.LabelStyle>

</telerik:LinearAxis>

</telerik:BarSeries.VerticalAxis>

<telerik:BarSeries.DefaultVisualStyle>

<Style TargetType="Border">

<Setter Property="Background" Value="DodgerBlue" />

</Style>

</telerik:BarSeries.DefaultVisualStyle>

</telerik:BarSeries>

<chartView:LineSeries ItemsSource="{Binding SourceDataSeries}"

CategoryBinding="Category"

ValueBinding="Value"

Stroke="Red"

TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}" />

<telerik:PointSeries ItemsSource="{Binding OnlineDataSeries}"

CategoryBinding="Category"

ValueBinding="Value"

TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">

<telerik:PointSeries.PointTemplate>

<DataTemplate>

<Path Margin="4"

Stroke="Orange"

StrokeThickness="1"

StrokeStartLineCap="Square"

StrokeEndLineCap="Square"

Stretch="Uniform"

VerticalAlignment="Center"

HorizontalAlignment="Center">

<Path.Data>

<PathGeometry>

<PathGeometry.Figures>

<PathFigure StartPoint="0,0">

<LineSegment Point="4,4" />

</PathFigure>

<PathFigure StartPoint="0,4">

<LineSegment Point="4,0" />

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Path.Data>

</Path>

</DataTemplate>

</telerik:PointSeries.PointTemplate>

</telerik:PointSeries>

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartTrackBallBehavior ShowIntersectionPoints="False"

ShowTrackInfo="True" />

<telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" DragMode="Pan" PanMode="Horizontal" />

</telerik:RadCartesianChart.Behaviors>

</telerik:RadCartesianChart>

</StackPanel>

</Grid>

</Window>

and code behind:

using System;

using System.Collections.ObjectModel;

using System.ComponentModel;

using System.Runtime.CompilerServices;

using System.Windows;

using Telerik.Charting;

namespace Chart

{

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window, INotifyPropertyChanged

{

private Point _pan;

private Size _zoom;

public MainWindow()

{

InitializeComponent();

DestinationDataSeries = new ObservableCollection<CategoricalDataPoint>();

SourceDataSeries = new ObservableCollection<CategoricalDataPoint>();

OnlineDataSeries = new ObservableCollection<CategoricalDataPoint>();

var rand = new Random();

for (DateTime i = DateTime.Now; i < DateTime.Now.AddDays(1); i = i.AddMinutes(1))

{

DestinationDataSeries.Add(new CategoricalDataPoint

{

Category = i,

Value = rand.NextDouble() * 100

});

SourceDataSeries.Add(new CategoricalDataPoint

{

Category = i,

Value = rand.NextDouble() * 100

});

OnlineDataSeries.Add(new CategoricalDataPoint

{

Category = i,

Value = rand.NextDouble() * 100

});

}

DataContext = this;

}

public event PropertyChangedEventHandler PropertyChanged;

protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)

{

PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

}

#region MainWindow

public ObservableCollection<CategoricalDataPoint> DestinationDataSeries { get; }

public ObservableCollection<CategoricalDataPoint> SourceDataSeries { get; }

public ObservableCollection<CategoricalDataPoint> OnlineDataSeries { get; }

public Size Zoom

{

get => _zoom;

set

{

_zoom = value;

OnPropertyChanged();

}

public Point PanOffset

{

get => _pan;

set

{

_pan = value;

OnPropertyChanged();

}

#endregion

}

Thank you for your help and reply.

Best Regards Jan.

Chart

asked on 27 Jun 2019

2 answers

133 views

GridView with Prefetch in Virtualization?

Within my dategrid itemsource I have some properties that basically act as IValueConverters to lookup a string in a dictonary by using and int.

Public ReadOnly Property ReifenIdHintenBezeichnung As String
Get
If Fahrzeug.ReifenIdHinten.HasValue Then
Return _reifenDict(Fahrzeug.ReifenIdHinten.Value)
Else
Return String.Empty
End If
End Get
End Property

these columns are bound to a datatemplate that acts as cellTemplate for a combobox like this:

(the whole idea to use a value converter with a dictonary was inspired by this https://feedback.telerik.com/wpf/1352336-slow-scrolling-when-a-gridviewcomboboxcolumn-is-bound-to-a-large-dataset) but as I need to create columns dynamically, I ended up with this property (and for the truely dynamic part properties with a parameter - but that's not the issue).

I noticed that the property is called everytime I scroll down one row for the following row. so one row is cached but not the row afterwards.

My question is if there is a way to use virtualization in such a way that say 20 rows and 10 columns are prefetched (async at best) to increase performance.

If you got any other suggestions on how to improve scolling performance with Comboboxes, i'm happy to read them. I already applied most tips mentioned here:https://docs.telerik.com/devtools/wpf/controls/radgridview/performance/tips-tricks

thanks for your help!

Jan

GridView

answered on 27 Jun 2019

3 answers

671 views

RadGridView Column Header Style

Hello,
I have a RadGridView and I am filling it with data and styling it in the ViewModel of my wpf app.
I have the following code:

FontSizeConverter myFontSizeConverter = new FontSizeConverter();
Style headerStyle = new Style(typeof(GridViewHeaderCell));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.HorizontalContentAlignmentProperty, System.Windows.HorizontalAlignment.Left));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.BackgroundProperty, (Brush)(new BrushConverter().ConvertFrom("#546E7A"))));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.ForegroundProperty, (Brush)(new BrushConverter().ConvertFrom("#ffffff"))));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.FontWeightProperty, FontWeights.Bold));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.FontSizeProperty, (Double)myFontSizeConverter.ConvertFromString("12")));

var headerIsMouseOverTrigger = new Trigger();
headerIsMouseOverTrigger.Property = UIElement.IsMouseOverProperty;
headerIsMouseOverTrigger.Value = true;

var headerIsMouseOverStyle = new Style(typeof(GridViewHeaderCell));
headerIsMouseOverStyle.Setters.Add(new Setter(HeaderedContentControl.HorizontalContentAlignmentProperty, System.Windows.HorizontalAlignment.Left));
headerIsMouseOverStyle.Setters.Add(new Setter(HeaderedContentControl.BackgroundProperty, (Brush)(new BrushConverter().ConvertFrom("#546E7A"))));
headerIsMouseOverStyle.Setters.Add(new Setter(HeaderedContentControl.ForegroundProperty, (Brush)(new BrushConverter().ConvertFrom("#ffffff"))));
headerIsMouseOverStyle.Setters.Add(new Setter(HeaderedContentControl.FontWeightProperty, FontWeights.Bold));
headerIsMouseOverStyle.Setters.Add(new Setter(HeaderedContentControl.FontSizeProperty, (Double)myFontSizeConverter.ConvertFromString("12")));

headerIsMouseOverTrigger.Setters.Add(new Setter(GridViewHeaderCell.StyleProperty, headerIsMouseOverStyle));
headerStyle.Triggers.Add(headerIsMouseOverTrigger);

var name = new GridViewDataColumn()
{
DataMemberBinding = new Binding("Name"),
IsReadOnly = true,
IsFilterable = false,
IsResizable = false,
Width = 210.0D,
Header = base.GetText(2615),
HeaderCellStyle = headerStyle,
Tag = "NotSelected"
};

What I am trying to accomplish is not to change the background of the column header when the mouse is over it. Can you tell me what I am doing wrong and how to make the desired effect? Thank you :)

GridView

answered on 27 Jun 2019

2 answers

142 views

Use ColumnGroup

Hi Telerik,

I'm using TreeListView and I want to know if the control is able to use ColumnGroup like is possible for a GridView ?

For each column, is possible to specify the ColumnGroupName property but it is not considered.

Thank you !

TreeListView

answered on 27 Jun 2019

1 answer

135 views

Bind connector creation by view model binding

Hi,

I'm using ObservableGraphSourceBase and NodeViewModelBase with a StyleSelector to render the shapes. Nice. But I want my shapes to have connectors in certain positions dependent on the view model. How can I do this?

In my case the shapes are rectangular with the left connectors being inputs and the right connectors being outputs. For a type 'A' NodeViewModel I want the shape to have 2 input connectors (left), no top or bottom connectors, and one right connector.

I can add/remove connectors on a drag and drop or edit event ... but how do I create the shape, via a style, with the connectors defined by the NodeViewModel?

Thanks

Diagram

answered on 26 Jun 2019

3 answers

162 views

The TabbedWindow not working with the Fluent Theme on a clean machine.

I have 4 machines 2 Dev with VS / Telerik and 2 Test both are clean Win 10 machines. When I run the project below in Dev it works perfectly but in Test the theme get's all screwed up and goes mostly transparent.

I have tried this with couple of other themes and it works fine and I have tried it with the Tab Control rather than the TabbedWindow and that also works. It looks like a combination of Fluent and TabbedWindow breaks.

To recreate, make a simple 1 page App, add the TabbedWindow and some content, then set the Fluent Theme in the code behind.

You have to test this on a "clean" machine, without VS or Telerik installed for it to break.

<Grid>

<telerik:RadTabbedWindow >

<telerik:RadTabbedWindow.Items>

<telerik:RadTabItem Header="Test Tab">

<telerik:RadGridView />

</telerik:RadTabItem>

</telerik:RadTabbedWindow.Items>

</telerik:RadTabbedWindow >

</Grid>

public MainWindow() { StyleManager.ApplicationTheme = new FluentTheme(); InitializeComponent(); }