We are populating Carousel control with multiple Radchart at runtime.
In XAML code one single RadChart is defined in the DataTemplate and that DataTemplate is the ItemTemplate of the RadCarousel
In the code behind we are binding the RadCarousel with Collection of data. Each item in the collection corresponds to one RadChart data.
radCarousel.ItemsSource = CountyComparisonList();
Each CountyComparison class has a DataSeries property and we are populating DataSeries with multiple data point as bar series and adding in the Collection.
Say first object in the collection gets populated with 6 data point and second object has two data point and third has one data point. So we need to change the width of each Radchart because they dont have equal number of bars.
In each rad chart we are displaying multiple bar series.
Problem is we are not able to adjust width and height of each individual RadChart populated in the RadCarousel.
How do we do that?
Thanks in advance for any Help
Manidipa
11 Answers, 1 is accepted
I am sending you a sample project illustrating a possible approach for handling this scenario.
Best wishes,
Maya
the Telerik team
Thank you,
Corey
May you verify whether you have tried the approach demonstrated in the sample project I previously attached ? Furthermore, may you try to modify this application so that it gets closer to your settings and requirements and send it back if possible. Thus we will be able to debug and investigate the case based on particular scenario.
All the best,
Maya
the Telerik team
This is not resolving my Issue. I am able to resize RadChart but not able to Resize the extra space on the right side of the chart )probably panel) we dont find it in the xaml code
please check the screenshot Corey sent it you.
Regards
Maniidpa
As far as making your example work the way our solution does, it is a bit complicated. We have a bunch of layers that come together to build the charts and the chart data. We don't really have development time to rebuild the charts into anothe solution.
The real simple version of our question is if there is a way to resize panel items, not just the contents when using a DataTemplate/ItemTemplate mixed with the carousel?
Ok update, I added just this portion from your example application to the page and it seemed to work.
"<Style TargetType="{x:Type telerik:CarouselItem}">
<Setter Property="MaxHeight" Value="1000" />
<Setter Property="MaxWidth" Value="1000" />
<Setter Property="Height" Value="Auto"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:CarouselItem}">
<Grid>
<Border BorderThickness="2" />
<ContentPresenter Margin="60,20,60,20"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>"
Now the only issue is that the panels are spread too far apart. The items that aren't very wide are spaced very spread out. Is there a way to make the items squish together only when the items are skinny?
Thank you for your help so far.
As explained by Corey our resizing issue is resolved with the item style you provided.
1) But now Carousel Items are far and also they are not equisdistant from each other. One Item going behind the Other Item.
2) When first time Carousel loaded its not loading all 6 items.
3)We defined ChartLegend as follows. Now Issue with ChartLegend margin since RadChart are of different width and legend Margin is defined in the Xaml so it is cutting off. Is there any way we can define the Chartlegend Margin in code behind or how do we set Margin when we are assigning different with to different RadChart in the code behind. Thanks for your help.
<
telerik:ChartArea x:Name="ChartArea1" LegendName="ChartLegend2"
Padding="0" Margin="0" Width="Auto" Grid.Row="2" Grid.ColumnSpan
<telerik:ChartLegend x:Name="ChartLegend2" Style="{StaticResource CustomLegendStyle}" Margin="400,-25,0,0" Width="180"
ItemsPanelOrientation="Horizontal" UseAutoGeneratedItems="False"
Grid.Row="1" Grid.ColumnSpan
Currently there is no way to manually set the distance between carousel items - they are all equally spread out on the carousel path.
Regarding the second question, I would really appreciate it if you could give more details. For example, have you set a different value to ItemsPerPage. How many items are actually loaded?
Regarding the third question, why do you need to set the width in code behind? Is this a requirement?
Greetings,
Milan
the Telerik team
Please see the attached screenshot sixGraphs.jpeg. This is what I need to display. But in reality I am able to achive sixgraphsReality.jpeg.
1)How do i achieve something like first screen shot.
2)I have 6 graphs to display. ItemsPerPage making the graphs transparent. Now I commented ItemsPerpage.
3)I am refreshing the chart data when year and month changes in the slicder control.
If i select a carousel item and then do some other action like changing year in the year slider so that carousel items data gets refreshed for the selected yaer then I am not able to see the selected carousel item.
means initially I want to display performance metrices graph at the front but when I select a different items in carousel then change the year in the slider control at that time I want to see the selected item.
Thanks in advance for any help
All the best,
Milan
the Telerik team
Hi Manidipa,
I am afraid that the view shown in sixGraphs.jpg cannot be achieve with RadCarousel for WPF.
Regarding selection, selection will be cleared when new source is applied to the carousel. Maybe that is what happens when a new year is chosen. One possible workaround is to save SelectedItem before ItemsSource gets changed and after the new ItemsSource is applied invoke the method BringDataItemIntoView to focus the previously selected item.
All the best,
Milan
the Telerik team