Questions on UI for WPF Forum

3 answers

506 views

Axis Title layout when binding text and font size to observable properties

Hello,

I added axis titles to my chart by adding TextBlocks. When providing the Text and FontSize properties through constant literal values immediately within the xaml code, everything works fine. The plot area is reduced in order to leave enough room for the titles, and the titles itself are centered on the axes' extents.

However, when using bindings in order to provide the values for the Text and FontSize properties from a view model (INotifyPropertyChanged, standard observable properties), the plot area is not reduced to accommodate the titles, resulting in the titles being rendered off-center and either partially or fully outside the chart control's bounds.

I have created a minimal demonstration program, which consists of a main window xaml definition containing the chart:

<Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:wpfApplication2="clr-namespace:WpfApplication2" Title="MainWindow" Height="600" Width="800"><DockPanel LastChildFill="True"><telerik:RadCartesianChart Margin="100" x:Name="mChart" BorderBrush="Aquamarine" BorderThickness="5" ClipToBounds="False"><telerik:RadCartesianChart.DataContext><wpfApplication2:ChartViewModel/></telerik:RadCartesianChart.DataContext><telerik:LineSeries StrokeThickness="5"><telerik:LineSeries.DataPoints><telerik:CategoricalDataPoint Category="A" Value="2" /><telerik:CategoricalDataPoint Category="B" Value="5" /><telerik:CategoricalDataPoint Category="C" Value="3" /></telerik:LineSeries.DataPoints></telerik:LineSeries><telerik:RadCartesianChart.HorizontalAxis><telerik:CategoricalAxis><telerik:CategoricalAxis.Title><TextBlock Text="{Binding TitleText}" FontSize="{Binding FontSize, Mode=OneWay}"/></telerik:CategoricalAxis.Title></telerik:CategoricalAxis></telerik:RadCartesianChart.HorizontalAxis><telerik:RadCartesianChart.VerticalAxis><telerik:LinearAxis><telerik:LinearAxis.Title><TextBlock Text="{Binding TitleText}" FontSize="{Binding FontSize, Mode=OneWay}"/></telerik:LinearAxis.Title></telerik:LinearAxis></telerik:RadCartesianChart.VerticalAxis></telerik:RadCartesianChart></DockPanel></Window>

The Viewmodel is trivial:

using System.ComponentModel;

using System.Runtime.CompilerServices;

using WpfApplication2.Annotations;

namespace WpfApplication2

{

class ChartViewModel : INotifyPropertyChanged

{

#region Fields

private string mTitleText;

public string TitleText { get { return mTitleText; } set { SetProperty(ref mTitleText, value); } }

private double mFontSize;

public double FontSize { get { return mFontSize; } set { SetProperty(ref mFontSize, value); } }

#endregion

#region Construction

public ChartViewModel()

{

mTitleText = "THIS IS THE AXIS TITLE";

mFontSize = 72.0d;

}

#endregion

#region Interface

public event PropertyChangedEventHandler PropertyChanged;

#endregion

#region Implementation

protected bool SetProperty<TProperty>(ref TProperty aStorage, TProperty aValue, [CallerMemberName]string aPropertyName = null)

{

if (Equals(aStorage, aValue))

return false;

aStorage = aValue;

// ReSharper disable ExplicitCallerInfoArgument

RaisePropertyChanged(aPropertyName);

// ReSharper restore ExplicitCallerInfoArgument

return true;

}

public bool SetProperty<TProperty>(ref TProperty aStorage, TProperty aValue, ref bool aChangedFlag, [CallerMemberName]string aPropertyName = null)

{

// ReSharper disable once ExplicitCallerInfoArgument

if (!SetProperty(ref aStorage, aValue, aPropertyName))

return false;

aChangedFlag = true;

return true;

}

protected void RaiseOtherPropertyChanged(string aPropertyName)

{

// ReSharper disable once ExplicitCallerInfoArgument

RaisePropertyChanged(aPropertyName);

}

[NotifyPropertyChangedInvocator]

protected virtual void RaisePropertyChanged([CallerMemberName] string aPropertyName = null)

{

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

}

#endregion

}

The attached screenshot shows the result. Please note that the aquamarine rectangle is the actual border of the chart, and that the ClipToBounds property is set to false, otherwise the title of the categorical axis would not be visible at all.

My goal is to allow the user to design the axes' titles' appearances dynamically, not only be defining their text, but also their font, font size, weight, etc. Therefore the according properties of the TextBlocks will have to be changed dynamically at run-time. Is there any other way to achieve this without breaking the layout mechanism?

Any help would be greatly appreciated, thanks in advance!

ChartView

answered on 12 May 2017

5 answers

139 views

Paste data on new rows doesn't work

Hi,

on a grid setted as follow:

SelectionMode = extended

SelectionUnit = Mixed

ClipboardPasteMode = AllSelectedCells, Cells, OverwriteWithEmptyValues

I have some trouble on paste date on new rows.

If you paste data on existing rows the event GridView_PastingCellClipboardContent is fired and all it works fine but

when you paste data to create new rows the event GridView_PastingCellClipboardContent doesn't fire.

I used the release R1 2017 SP1

How can I fix it?

Thank you

GridView

answered on 12 May 2017

1 answer

94 views

Font styling

How can I set the font style of All caps in a style on the rad rich text box or in a raddocument, as I'm trying to translate some Microsoft word styles over to the telerik controls and this is an option used in one of the styles on the template I'm moving over.

RichTextBox

answered on 12 May 2017

8 answers

402 views

ActualVisibleRange and ActualRange

I need an explanation on a few items. I am using a DateTimeContinuous axis for my X-Axis on my chartview. There are three properties I would like some clarification on the following:

DateTimeContinuous.Minimum and DateTimeContinuous.Maximum
DateTimeContinuous.ActualVisibleRange (both minimum and maximum).
DateTimeContinuous,ActualRange (both min and max properties)

My understanding is:

ActualRange is the data the chart contains.
ActualVisibleRange is the current viewport - or what the user sees.
Minimum and Maximum is the setter for ActualRange. But not entirely sure. (Need some explanation).

So if I load a year of data (e.g. January thru Dec 2013), my actual range will be (1/2013 - 12/2013). If I then zoom and pan so that only march is displayed, my actualVisibleRange will change to (3/2013). The chart still contains the other data points, but they are not visible, so I need to zoom and pan to see them.

The questions...
Is there a way to programmatically set the ActualVisibleRange attribute?
How about the ActualRange?
What do the Minimum and Maximum attributes control?

Thanks.

ChartView

answered on 12 May 2017

1 answer

59 views

New Item added to DataBound list not shown until scrolling

I think this might be a bug, but I have found an problem with the carousel. If I add a new Item to the collection it is displayed in the carousel as expected. If I now remove this Item from the list and Add a new Item I see an empty carousel and I have to scroll first before I see the item.

Carousel

answered on 12 May 2017

2 answers

82 views

How to use diagram for subset's functions

Hi to all,

I would use RadDiagram control for only this features:

Move Shape, but not Rotate and Resize on a Shape
Or block move, rotate and resize on a Shape

I don't found how can I set properties to do this.

Diagram

answered on 12 May 2017

1 answer

95 views

Mouse hover on toolbar's Grip area doesn't change mouse cursor. Mouse cursor should be changed to SizeAll cursor type

Referencing to the sample projects of RadToolBar provided here:
https://github.com/telerik/xaml-sdk/tree/master/ToolBar

There's no option to set the mouse cursor to SizeAll when mouse is over the grip visual area.

ToolBar

answered on 11 May 2017

5 answers

372 views

Repeating column headers in every group

Dear Telerik,

I've been tasked with trying to get your GridView to fulfil our current grid requirements. I've been doing pretty well with it so far. My current stumbling block is trying to achieve the grid shown in the attached image file.

The problem i'm asking you about in this post is that to achieve this grid I will need to repeat the column headers for every group. My approach is to alter the style for the GridViewGroupRow and include a GridViewHeaderRow in each group header. This works in so far as the column headers are displayed at the top of each group, but any action by the user to resize the column gives unwanted results.

Any help would be much appreciated.

Thanks
Pete

GridView