or
I am able to get the Mockup using CandleStick chart.. Please look into the attached Screenshot.
Can somebody help me in solving the below 2 issues..
1. I have to display the "HighValue" and "LowValue" at the top and bottom of every item as in the mockup.
2. Using Annotation, I have drawn a line at the value of "13" and i have named the Label as "BASE VALUE".
I want that label to be displayed outside the graph as in the mockup.
<
telerik:RadCartesianChart
x:Name
=
"xCartesianChart"
Height
=
"300"
Width
=
"400"
Palette
=
"Windows8"
>
<
telerik:RadCartesianChart.VerticalAxis
>
<
telerik:LinearAxis
x:Name
=
"verticalAxis"
HorizontalLocation
=
"Left"
/>
</
telerik:RadCartesianChart.VerticalAxis
>
<
telerik:RadCartesianChart.HorizontalAxis
>
<
telerik:CategoricalAxis
VerticalLocation
=
"Top"
LineThickness
=
"1"
LabelInterval
=
"2"
ShowLabels
=
"True"
/>
</
telerik:RadCartesianChart.HorizontalAxis
>
<
telerik:CandlestickSeries
x:Name
=
"xCandleStick"
CategoryBinding
=
"XValue"
LowBinding
=
"YValue2"
HighBinding
=
"YValue"
CloseBinding
=
"YValue2"
OpenBinding
=
"YValue"
ShowLabels
=
"True"
/>
<
telerik:RadCartesianChart.Annotations
>
<
telerik:CartesianGridLineAnnotation
Axis
=
"{Binding ElementName=verticalAxis}"
Label
=
"BASE VALUE"
Value
=
"13"
Stroke
=
"Green"
>
<
telerik:CartesianGridLineAnnotation.LabelDefinition
>
<
telerik:ChartAnnotationLabelDefinition
Location
=
"Left"
VerticalAlignment
=
"Top"
VerticalOffset
=
"0"
HorizontalOffset
=
"80"
/>
</
telerik:CartesianGridLineAnnotation.LabelDefinition
>
</
telerik:CartesianGridLineAnnotation
>
</
telerik:RadCartesianChart.Annotations
>
</
telerik:RadCartesianChart
>
//Code-behind
public
MainWindow()
{
InitializeComponent();
PopulateCartesianChart();
}
void
PopulateCartesianChart()
{
Random rnd =
new
Random();
List<ChartDataClass> chartDatas =
new
List<ChartDataClass>();
for
(
int
i = 0; i < 20; i++)
{
ChartDataClass cdc =
new
ChartDataClass();
cdc.XValue = i;
cdc.YValue = rnd.NextDouble() * 100;
cdc.YValue2 = cdc.YValue - 50;
chartDatas.Add(cdc);
}
xCartesianChart.Series[0].ItemsSource = chartDatas;
}
RadDock1.DockControl but I have not seen any samples or documentation for this feature. I have also looked at the Silverlight documentation and there is nothing there either.
Alex
<
Window
xmlns:TestAppWpf
=
"clr-namespace:TestApp_WPF"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
x:Class
=
"TestApp_WPF.MainWindowView"
x:Name
=
"window"
Width
=
"800"
Height
=
"600"
TextOptions.TextFormattingMode
=
"Display"
AllowDrop
=
"True"
>
<
Window.Resources
>
<
TestAppWpf:MainWindowViewModel
x:Key
=
"Vm"
/>
</
Window.Resources
>
<
telerik:RadBusyIndicator
DataContext
=
"{Binding Source={StaticResource Vm}}"
IsBusy
=
"{Binding IsBusy, Mode=OneWay}"
BusyContent
=
"{Binding BusyContent, Mode=OneWay}"
>
<
StackPanel
Margin
=
"6"
DataContext
=
"{Binding Source={StaticResource Vm}}"
>
<
TextBlock
Margin
=
"3"
>
<
Hyperlink
>
<
i:Interaction.Triggers
>
<
i:EventTrigger
EventName
=
"Click"
>
<
ei:CallMethodAction
TargetObject
=
"{Binding}"
MethodName
=
"DoWork"
/>
</
i:EventTrigger
>
</
i:Interaction.Triggers
>
<
TextBlock
Text
=
"Click Me"
/>
</
Hyperlink
>
</
TextBlock
>
<
DataGrid
Margin
=
"3"
ItemsSource
=
"{Binding Items}"
SelectedItem
=
"{Binding SelectedItem}"
AutoGenerateColumns
=
"False"
SelectionUnit
=
"FullRow"
SelectionMode
=
"Single"
CanUserDeleteRows
=
"False"
CanUserAddRows
=
"False"
IsReadOnly
=
"True"
AllowDrop
=
"True"
>
<
DataGrid.Columns
>
<
DataGridTextColumn
Binding
=
"{Binding FirstName}"
/>
<
DataGridTextColumn
Binding
=
"{Binding LastName}"
/>
<
DataGridTextColumn
Binding
=
"{Binding DOB}"
/>
<
DataGridTemplateColumn
x:Name
=
"uxColumn_Edit"
CanUserSort
=
"False"
>
<
DataGridTemplateColumn.CellTemplate
>
<
DataTemplate
>
<
TextBlock
Margin
=
"3"
>
<
Hyperlink
>
<
i:Interaction.Triggers
>
<
i:EventTrigger
EventName
=
"Click"
>
<
ei:CallMethodAction
TargetObject
=
"{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}, Path=DataContext}"
MethodName
=
"DoWork"
/>
</
i:EventTrigger
>
</
i:Interaction.Triggers
>
<
TextBlock
Text
=
"Edit"
/>
</
Hyperlink
>
</
TextBlock
>
</
DataTemplate
>
</
DataGridTemplateColumn.CellTemplate
>
</
DataGridTemplateColumn
>
</
DataGrid.Columns
>
</
DataGrid
>
</
StackPanel
>
</
telerik:RadBusyIndicator
>
</
Window
>
using
System;
using
System.Collections.ObjectModel;
using
System.ComponentModel;
using
System.Threading;
using
System.Threading.Tasks;
namespace
TestApp_WPF
{
public
class
MainWindowViewModel : INotifyPropertyChanged
{
#region Fields
private
bool
_isBusy;
private
string
_busyContent;
public
event
PropertyChangedEventHandler PropertyChanged;
protected
virtual
void
OnProperyChanged(
string
propertyName)
{
if
(PropertyChanged !=
null
)
PropertyChanged(
this
,
new
PropertyChangedEventArgs(propertyName));
}
public
ObservableCollection<Person> _items;
public
Person _selectedItem;
#endregion
#region Properties
/// <summary>
/// Gets or sets a value indicating whether [is busy].
/// </summary>
/// <value>
/// <c>true</c> if [is busy]; otherwise, <c>false</c>.
/// </value>
public
bool
IsBusy
{
get
{
return
_isBusy; }
set
{
if
(_isBusy == value)
return
;
_isBusy = value;
OnProperyChanged(
"IsBusy"
);
}
}
/// <summary>
/// Gets or sets the content of the busy.
/// </summary>
/// <value>
/// The content of the busy.
/// </value>
public
string
BusyContent
{
get
{
return
_busyContent; }
set
{
if
(_busyContent == value)
return
;
_busyContent = value;
OnProperyChanged(
"BusyContent"
);
}
}
/// <summary>
/// Gets the items.
/// </summary>
/// <value>
/// The items.
/// </value>
public
ObservableCollection<Person> Items
{
get
{
if
(_items ==
null
)
{
_items =
new
ObservableCollection<Person>
{
new
Person
{
FirstName =
"John"
,
LastName =
"Doe"
,
DOB =
new
DateTime(1972, 5, 9),
},
new
Person
{
FirstName =
"Jim"
,
LastName =
"Smith"
,
DOB =
new
DateTime(1954, 12, 15),
}
};
}
return
_items;
}
}
/// <summary>
/// Gets or sets the selected item.
/// </summary>
/// <value>
/// The selected item.
/// </value>
public
Person SelectedItem
{
get
{
return
_selectedItem; }
set
{
if
(_selectedItem == value)
return
;
_selectedItem = value;
OnProperyChanged(
"SelectedItem"
);
}
}
#endregion
#region Methods
public
void
DoWork()
{
Task.Factory.StartNew(
() =>
{
IsBusy =
true
;
BusyContent =
"Working..."
;
Thread.Sleep(5000);
IsBusy =
false
;
});
}
#endregion
}
public
class
Person
{
public
string
FirstName {
get
;
set
; }
public
string
LastName {
get
;
set
; }
public
DateTime DOB {
get
;
set
; }
}
}
<
telerik:RadTreeListView
ItemsSource
=
"{Binding Path=TestData}"
AlternationCount
=
"2"
AlternateRowBackground
=
"DarkGray"
>
<
telerik:RadTreeListView.ChildTableDefinitions
>
<
telerik:TreeListViewTableDefinition
ItemsSource
=
"{Binding Path=Children}"
/>
</
telerik:RadTreeListView.ChildTableDefinitions
>
</
telerik:RadTreeListView
>
<
Setter
Property
=
"telerik:AnimationManager.AnimationSelector"
>
<
Setter.Value
>
<
telerik:AnimationSelector
>
<
Animation:TreeViewExpandCollapseAnimation
AnimationTargetName
=
"ItemsHost"
AnimationName
=
"Expand"
Direction
=
"In"
Duration
=
"00:00:01"
SpeedRatio
=
"3"
TargetName
=
"{x:Null}"
/>
<
Animation:TreeViewExpandCollapseAnimation
AnimationTargetName
=
"ItemsHost"
AnimationName
=
"Collapse"
Direction
=
"Out"
Duration
=
"00:00:01"
SpeedRatio
=
"3"
TargetName
=
"{x:Null}"
/>
</
telerik:AnimationSelector
>
</
Setter.Value
>
</
Setter
>