|
The following steps describe how to add the WPF SfChart inside the SfDataGrid. Step 1: Create an instance of the GridTemplateColumn class, and add it to the Columns property in the SfDataGrid to display the custom content specified in the CellTemplate. XAML: <syncfusion:SfDataGrid> <syncfusion:SfDataGrid.Columns> <syncfusion:GridTemplateColumn> </syncfusion:GridTemplateColumn> </syncfusion:SfDataGrid.Columns> </syncfusion:SfDataGrid>
Step 2: Then, add the SfChart control to the CellTemplate property as custom template content as demonstrated in then following code sample. XAML: <syncfusion:SfDataGrid>
<syncfusion:SfDataGrid.Resources>
<local:ItemsSourceConverter x:Key="converter" />
<local:MaximumConverter x:Key="maximumConverter" />
</syncfusion:SfDataGrid.Resources>
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTemplateColumn>
<syncfusion:GridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<chart:SfChart SideBySideSeriesPlacement="False">
<chart:SfChart.ColumnDefinitions>
<chart:ChartColumnDefinition />
<chart:ChartColumnDefinition />
</chart:SfChart.ColumnDefinitions>
<chart:SfChart.PrimaryAxis>
<chart:NumericalAxis IsInversed="True" ShowGridLines="False" Visibility="Collapsed" />
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis IsInversed="True" Maximum="{Binding Maximum}"
ShowGridLines="False" Visibility="Collapsed" />
</chart:SfChart.SecondaryAxis>
<chart:BarSeries Interior="LawnGreen" XBindingPath="XValue"
ItemsSource="{Binding., Converter={StaticResource converter}}" YBindingPath="YValue1">
</chart:BarSeries>
<chart:BarSeries Interior="Red" XBindingPath="XValue" YBindingPath="YValue2"
ItemsSource="{Binding., Converter={StaticResource converter}}">
<chart:BarSeries.YAxis>
<chart:NumericalAxis ShowGridLines="False" Maximum="{Binding Maximum}"
chart:ChartBase.Column="1" Visibility="Collapsed" />
</chart:BarSeries.YAxis>
</chart:BarSeries>
</chart:SfChart>
</Grid>
</DataTemplate>
</syncfusion:GridTemplateColumn.CellTemplate>
</syncfusion:GridTemplateColumn>
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
ItemsSourceConverter: public class ItemsSourceConverter : IValueConverter
{
public object Convert(object values, Type targetType, object parameter, CultureInfo culture)
{
var data = values as OrderInfo;
var collection = new ObservableCollection<Model>();
Model model = new Model() { XValue = data.XValue, YValue1 = data.YValue1, YValue2 = data.YValue2 };
data.Models.Add(model);
collection.Add(model);
return collection;
}
object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}
Output:
|
2X faster development
The ultimate WPF UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
