Questions on UI for WPF Forum

3 answers

299 views

Please send me an example of 2.5D Chart for BarSeries.

I bag your pardon. I'm in need of 2.5D Chart for BarSeries. I've tryed reproduce it as it done in your 2.5D_Chart example but as a result I get 'System.Windows.Markup.XamlParseException' in WpfXamlLoader.Load method because your 2.5D_Chart example is some dodgy. The exception snapshot you can see in 'Snapshot.PNG' file attached.

So, what do I need. I need Bar chart with 2._5D BarSeries with fixed color (green color, for example, or magneta...it doesn't matter).

Below is XAML of single Bar Chart. In my application I have 8 instances of such Bar Charts. All of them changing in real-time.

<telerik:RadCartesianChart Visibility="{Binding IsAbsoluteBarChartVisible}">

<telerik:RadCartesianChart.Annotations>

<telerik:CartesianGridLineAnnotation Axis="{Binding ElementName=verticalAxis}" Value="{Binding AnnotationValue}" Label="{Binding AnnotationLabel}"

Stroke="Red" StrokeThickness="2" DashArray="8 2">

<telerik:CartesianGridLineAnnotation.LabelDefinition>

<telerik:ChartAnnotationLabelDefinition Location="Inside" VerticalAlignment="Bottom" HorizontalAlignment="Center">

<telerik:ChartAnnotationLabelDefinition.DefaultVisualStyle>

<Style TargetType="TextBlock">

<Setter Property="FontSize" Value="14"/>

<Setter Property="FontWeight" Value="DemiBold"/>

<Setter Property="Foreground" Value="Red" />

</Style>

</telerik:ChartAnnotationLabelDefinition.DefaultVisualStyle>

</telerik:ChartAnnotationLabelDefinition>

</telerik:CartesianGridLineAnnotation.LabelDefinition>

</telerik:CartesianGridLineAnnotation>

</telerik:RadCartesianChart.Annotations>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:CategoricalAxis/>

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis x:Name="verticalAxis" Title="Проценты [%]" Minimum="{Binding ChartMinimum}" Maximum="{Binding ChartMaximum}" MajorStep="{Binding CurrentStep}"/>

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.Series>

<telerik:BarSeries ShowLabels="True" CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding Data}"/>

</telerik:RadCartesianChart.Series>

</telerik:RadCartesianChart>

Each such real-time Bar Chart has from 2 to 16 bars. All bars in one Bar Chart mast have the same color. Therefore, it would be nice if there was a common resource that defines the shape and color of the 2.5D Bar. I would be very grateful if you send me an example of such an application if this is possible ofcource.

ChartView

answered on 02 Nov 2016

4 answers

185 views

Value won't display in small widths

When I change the width the numeric control below 170 the values are cut off. Is there any way to fix this?

NumericUpDown

answered on 01 Nov 2016

2 answers

569 views

Setting cell style

HI,
I have a RadGridView which item source is bind to DynamicObject. How can I apply cell style selector to specific column of RadGridView. For your information, the column is generated dynamically.

Thank you.

GridView

answered on 01 Nov 2016

1 answer

133 views

Cells with overridden GridViewCellStyle no longer show their horizontal gridlines

I have an MVVM view where I am overriding a GridViewDataColumn.CellStylewith a DataTrigger style that changes the colour of the Background based on the cell value (0 is red, >0 is green). This works great, except any cells that have been coloured this way no longer show their horizontal gridlines. The gridlines are still visible on other cells in the same row, and all vertical gridlines are still visible, but no horizontal gridlines on the custom styled cells.

Any idea what would cause the horizontal gridlines not to display just because the Background colour is overridden??

See attached image for an example of the grid with this styling in place.

<telerik:GridViewDataColumn DataMemberBinding="{Binding PriceBreak}" Header="Price Break" ColumnGroupName="MainPrice" Width="85" DataFormatString="{}{0:G29}">

<telerik:GridViewDataColumn.CellStyle>

<Style TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">

<Style.Triggers>

<DataTrigger Binding="{Binding PriceBreak, Converter={StaticResource DecimalGreaterThanZeroToBooleanConverter}}" Value="False">

<Setter Property="Background" Value="#FDEDED"/>

</DataTrigger>

<DataTrigger Binding="{Binding PriceBreak, Converter={StaticResource DecimalGreaterThanZeroToBooleanConverter}}" Value="True">

<Setter Property="Background" Value="#EDFDEE"/>

</DataTrigger>

</Style.Triggers>

</Style>

</telerik:GridViewDataColumn.CellStyle>

</telerik:GridViewDataColumn>

GridView

answered on 01 Nov 2016

1 answer

73 views

Keyboard support for RadOutlookBar

Hi,

Can we access the RadOutlookBar using keyboard shortcuts like RadRibbonView KeyTipService.AccessText. Also can we use arrow keys to navigate and select the items in the RadOutlookBar.

Thanks

General Discussions

answered on 01 Nov 2016

1 answer

274 views

ChartView RadCartesianChart LabelDefinitions

i am facing binding issues on RadCartesianChart LabelDefinitions .Please see the source and suggest me some ideas to rectify this problem

<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="Dashboard.Views.Controls.GlucoseChart" Height="auto" Width="auto" acb:CommandBehavior.Event="Unloaded" acb:CommandBehavior.Command="{Binding CloseCommand}" DataContext="{Binding Path=GlucoseReadingsViewModel, Source={StaticResource Locator}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Dashboard"
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:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
xmlns:acb="clr-namespace:AttachedCommandBehavior;assembly=AttachedCommandBehavior">
<UserControl.Resources>
<local:GlucoseActivityTypeToImageSelector x:Key="GlucoseActivityTypeToImageSelector" />
</UserControl.Resources>
<Border Margin="0" CornerRadius="5" BorderThickness="0" Background="{DynamicResource bg_chart}">
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource HeaderHeight}" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Border Style="{StaticResource Border_SubHeader}" />
<TextBlock TextWrapping="Wrap" Text="Blood Glucose Chart" Style="{StaticResource TxtBlock_ChartTitle}" />
</Grid>
<Grid Grid.Column="0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Name="PART_ChartTitle" Grid.Column="1" Grid.Row="0" />
<Grid Name="PART_YAxisArea" Grid.Column="0" Grid.Row="1" />
<Grid Name="PART_XAxisArea" Grid.Column="1" Grid.Row="2" />
<Grid Name="PART_BottomLegendArea" Grid.Column="1" Margin="10" Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Legend" />
</Grid>
<StackPanel Orientation="Horizontal" Grid.Row="1">
<StackPanel Orientation="Horizontal">
<Rectangle Width="10" Margin="5" Height="10" Fill="{Binding Stroke, ElementName=LineSeries1}" />
<TextBlock Text="{Binding SeriesLabel}" />
</StackPanel>
</StackPanel>
</Grid>
<Grid Name="PART_RightLegendArea" Grid.Column="2" Grid.Row="1" />
<chart:ChartDataSource Name="ChartDataSource1" SamplingUnit="Minute" ItemsSource="{Binding Readings}" />
<chart:RadCartesianChart Name="PART_ChartArea" Grid.Row="1" Grid.Column="1">
<chart:RadCartesianChart.Resources>
<DataTemplate x:Key="BeforeMealLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/before_meal.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AfterMealLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/after_meal.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AfterExerciseLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/after_exercise.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AfterMedicationLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/after_medication.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="FastingLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/fasting.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="OthersLabel">
<StackPanel Orientation="Vertical">
<Image Width="15" Height="15" Source="/Dashboard;component/Images/others.png" />
<Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
<TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF" />
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="PointTemplate">
<StackPanel Orientation="Vertical">
<Ellipse Height="8" Width="8" Fill="#FFFFFFFF" Stroke="{Binding Stroke, ElementName=LineSeries1}" />
</StackPanel>
</DataTemplate>
</chart:RadCartesianChart.Resources>
<telerik:RadCartesianChart.Behaviors>
<chartView:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal" />
<chartView:ChartTrackBallBehavior ShowTrackInfo="True" ShowIntersectionPoints="True" />
</telerik:RadCartesianChart.Behaviors>
<chart:RadCartesianChart.TooltipTemplate>
<DataTemplate>
<Border Background="#FFFFFFFF" BorderBrush="#FF000000" BorderThickness="1" Padding="5" CornerRadius="3">
<StackPanel Orientation="Vertical">
<TextBlock>
<Run Text="Timestamp: " /> <Run Text="{Binding Category, StringFormat={}{0:dd-MMM-yy hh:mm tt}}" /></TextBlock>
<TextBlock>
<Run Text="Blood Glucose: " /> <Run Text="{Binding DataItem.Glucose, StringFormat={}{0:N2}}" /> <Run Text="{Binding DataItem.Unit}" /></TextBlock>
<TextBlock>
<Run Text="Activity: " /> <Run Text="{Binding DataItem.Activity}" /></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</chart:RadCartesianChart.TooltipTemplate>


<chart:RadCartesianChart.HorizontalAxis>
<chartView:DateTimeContinuousAxis LabelFormat="dd-MMM
HH:mm" LabelFitMode="MultiLine" LabelInterval="2" PlotMode="OnTicksPadded">
<chartView:DateTimeContinuousAxis.PanZoomBarStyle>
<Style TargetType="{x:Type chartView:PanZoomBar}">
<Setter Property="FrameworkElement.Height" Value="30" />
</Style>
</chartView:DateTimeContinuousAxis.PanZoomBarStyle>
</chartView:DateTimeContinuousAxis>
</chart:RadCartesianChart.HorizontalAxis>
<chart:RadCartesianChart.VerticalAxis>
<chartView:LinearAxis Minimum="{Binding YAxisMin}" Maximum="{Binding YAxisMax}" Title="{Binding YAxisLabel}" />
</chart:RadCartesianChart.VerticalAxis>
<chart:RadCartesianChart.Series>
<chartView:LineSeries Name="LineSeries1" Stroke="{StaticResource LineChartColor1}" StrokeThickness="2" ShowLabels="True" CategoryBinding="Timestamp" ValueBinding="Glucose" PointTemplate="{StaticResource PointTemplate}" ItemsSource="{Binding Readings}">
<chartView:LineSeries.LabelDefinitions>
<chartView:ChartSeriesLabelDefinition TemplateSelector="{StaticResource GlucoseActivityTypeToImageSelector}" Margin="20,0,0,0" />
<chartView:ChartSeriesLabelDefinition Margin="20,0,0,0"
>
<chartView:ChartSeriesLabelDefinition.Template>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding DataItem.Glucose}"
HorizontalAlignment="Center"
Foreground="Black" />

</StackPanel>
</DataTemplate>
</chartView:ChartSeriesLabelDefinition.Template>
</chartView:ChartSeriesLabelDefinition>

</chartView:LineSeries.LabelDefinitions>



<chartView:LineSeries.TrackBallInfoTemplate>
<DataTemplate>
<StackPanel Background="#00FFFFFF">
<TextBlock>
<Run Text="Timestamp: " /> <Run Text="{Binding DataPoint.Category, StringFormat={}{0:dd-MMM-yy hh:mm tt}}" /></TextBlock>
<TextBlock>
<Run Text="Blood Glucose: " /> <Run Text="{Binding DataPoint.Value, StringFormat={}{0:N2}}" /> <Run Text="{Binding DataPoint.DataItem.Unit}" /></TextBlock>
<TextBlock>
<Run Text="Activity: " /> <Run Text="{Binding DataPoint.DataItem.Activity}" /></TextBlock>
</StackPanel>
</DataTemplate>
</chartView:LineSeries.TrackBallInfoTemplate>


</chartView:LineSeries>
</chart:RadCartesianChart.Series>
</chart:RadCartesianChart>
</Grid>
<Grid Grid.Column="0" Grid.Row="2">
<telerik:RadChart Name="radChart" Margin="0" Background="#00FFFFFF" ItemsSource="{Binding Readings}">
<telerik:RadChart.DefaultView>
<telerik:ChartDefaultView ChartLegendPosition="Bottom">
<telerik:ChartDefaultView.ChartLegend>
<telerik:ChartLegend Name="chartLegend" Margin="0" Header="Legend" UseAutoGeneratedItems="True" BorderThickness="0" Background="#00FFFFFF" />
</telerik:ChartDefaultView.ChartLegend>
<telerik:ChartDefaultView.ChartArea>
<telerik:ChartArea LegendName="chartLegend">
<telerik:ChartArea.ZoomScrollSettingsX>
<telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom" RangeStart="0" RangeEnd="1" MinZoomRange="1" PropertyChanged="ZoomScrollSettingsX_PropertyChanged" />
</telerik:ChartArea.ZoomScrollSettingsX>
<telerik:ChartArea.AxisX>
<telerik:AxisX IsDateTime="True" ShouldScaleStepOnZoom="True" StepLabelLevelCount="1" Step="1" LabelStep="1" LayoutMode="Between" AutoRange="True" LabelRotationAngle="0" DefaultLabelFormat="dd-MMM
HH:mm" />
</telerik:ChartArea.AxisX>
<telerik:ChartArea.AxisY>
<telerik:AxisY AutoRange="True" Title="{Binding YAxisLabel}" />
</telerik:ChartArea.AxisY>
</telerik:ChartArea>
</telerik:ChartDefaultView.ChartArea>
</telerik:ChartDefaultView>
</telerik:RadChart.DefaultView>
<telerik:RadChart.SamplingSettings>
<telerik:SamplingSettings SamplingThreshold="0" />
</telerik:RadChart.SamplingSettings>
<telerik:RadChart.SeriesMappings>
<telerik:SeriesMapping LegendLabel="{Binding SeriesLabel}">
<telerik:SeriesMapping.SeriesDefinition>
<telerik:LineSeriesDefinition ShowItemToolTips="True" ItemToolTipFormat="Date: #X{dd-MMM-yy hh:mm tt}
Value: #Y{###.##}" />
</telerik:SeriesMapping.SeriesDefinition>
<telerik:ItemMapping DataPointMember="XValue" FieldName="Timestamp" />
<telerik:ItemMapping DataPointMember="YValue" FieldName="Glucose" />
</telerik:SeriesMapping>
</telerik:RadChart.SeriesMappings>
</telerik:RadChart>
</Grid>
</Grid>
</Border>
</UserControl>

ChartView

answered on 01 Nov 2016

1 answer

289 views

Changing behavior of the Close Button of a RadPane

I like to get the Tool panes in my MVVM docking scenario hidden if the user clicks th close button of the RadPane.

The default processing seems to close and remove the pane. I cannot get the pane shown again by setting the IsHidden property to false (discussed in some other threads).

Setting the CanUserClose property of the pane to false hides the close button completely.

Is there a way to either

- modify the behavior of the close button (hide the pane instead of closing it) or

- put an additional button to the panes header, that lets me exceute my desired operations.

Thanks and Regards

Mario

Docking

answered on 01 Nov 2016

1 answer

178 views

Geometry to XML

Good afternoon. How can I save the geometry of the selected objects to RadDiagram in xaml file? Now I take the RadDiagramShape geometry, convert it to a string and written in the xaml file. But when I try the reverse conversion, an error is thrown

1) the RadDiagramShape declare

<telerik:RadDiagramShape x:Name="ConditionShape"
IsEditable="False"
AllowCopy="False" AllowCut="False" AllowDelete="False" AllowDrop="False" AllowPaste="True" Background="Azure"
Geometry="{telerik:CommonShape ShapeType=RectangleShape }" StrokeThickness="1" Height="100" Width="100" RenderTransformOrigin="0.5,0.5" Position="180,50"/>

2) the entry in the xaml file

Init.overview.LibraryItems.FunctionItem[end].Data = Convert.ToString(ShapeFactory.GetShapeGeometry(FlowChartShapeType.DecisionShape));
FunctionLibrary Done = new FunctionLibrary();
Done = Init.overview;
XmlSerializer xml = new XmlSerializer(typeof(FunctionLibrary));
file.Close();
using (var fStream = new FileStream(path: "./****.xml", mode: FileMode.Create, access: FileAccess.Write, share: FileShare.ReadWrite))
{
xml.Serialize(fStream, Done);
fStream.Close();
}
3) the result in a file
<Data>M56;0,5L111,5;37,5 56;74,5 0,5;37,5z</Data>

4) and the inverse transform

var converter = new System.Windows.Media.GeometryConverter();
var data = (Geometry) converter.ConvertFromString(ListCode[i].Data);
ConditionShape.Geometry = data;

this line is not recognized as geometry. how to convert in the required format?

Diagram

answered on 01 Nov 2016

4 answers

208 views

Dynamic creation of "multiple X axis" , with Legend and Line series

Hi

am creating a Line series chat with RadCartesianChart in WPF application.
i have verified the samples in telerik chart control, i didn't find any example for the creation of multiple x axis with constant y axis .

Can u please give a sample for the creation of dynamic creation of "X axis".

i have attached an image for "example of chart look like"

Thanks in advance!!.:)

Chart

answered on 01 Nov 2016

4 answers

489 views

RadPane Default as Tabbed Document

Hi,

I'm trying to get my UI framework built and I'm having some difficulty getting the default state of things working correctly. I attached two photos, one is the default view that my current XAML gives me and the second picture is how I want it to be displayed by default. Essentially, I would like a new RadPane or RadDocumentPane to display as a Tabbed Document by default. This means having each pane have it's own "window", not tabs stacked up in the same window. Hopefully that makes sense.

If you need any other information, please let me know.

Kindest Regards,

Craig

My XAML:

<TabControl.ContentTemplate>
<DataTemplate>

<telerik:RadDocking x:Name="radDocking1">
<telerik:RadSplitContainer Height="200" InitialPosition="DockedTop" Orientation="Horizontal">
<telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="200, 200">
<telerik:RadPane Header="pane" />
</telerik:RadPaneGroup>
<telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="400, 200">
<telerik:RadDocumentPane Header="pane" />
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking>
</DataTemplate>
</TabControl.ContentTemplate>

Docking

answered on 31 Oct 2016