RadCarousel Panel/Item resize issue

[Manidipa]

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

[Maya]

Hello Manidipa,

I am sending you a sample project illustrating a possible approach for handling this scenario. 

 

Best wishes,
Maya
the Telerik team

[Corey]

My question and Manidipa's are the same, from a different thread.  I have attached a images with code samples and screenshot of what we are having problems with.  Can you please take a look and let us know if you understand the problem and if there is a solution.

Thank you,

Corey

[Maya]

Hi 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

[Manidipa]

Maya

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

[Corey]

We did try the example you provided.  It works off of static items that are inserted into a carousel.  Ours works off of dynamic objects being populated into the carousel.  Screenshot 1 and 2 show the code that is in the xaml.  We can't find a way to tie into each of the panels that get created dynamically by the carousel at runtime.  If we could find a way to set the sizes of the panels that open we could then make our charts just fill in the space inside of the panel.  As it stands now, we either can size the charts inside the panel, which results in the screenshot 3 that I posted before where there is a bunch of whitespace next to the chart.  We want the panel to collapse down to the size of the chart or to find a way to resize the panels and let the chart just fill in the space.

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?

[Corey]

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.

[Manidipa]

Maya

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

="3" />

 

 

 

 

 

<telerik:ChartLegend x:Name="ChartLegend2" Style="{StaticResource CustomLegendStyle}" Margin="400,-25,0,0" Width="180"

 

 

 

 

 

 

ItemsPanelOrientation="Horizontal" UseAutoGeneratedItems="False"

 

 

 

 

 

 

Grid.Row="1" Grid.ColumnSpan

="3" />

 

 

[Milan]

Hi Manidipa,

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

[Manidipa]

Hi Milan
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

[Milan]

Hello Manidipa,


All the best,
Milan
the Telerik team

[Milan]

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