This is a migrated thread and some comments may be shown as answers.

Binding Within Fluid Content Control Properties

1 Answer 83 Views

ChartView

This is a migrated thread and some comments may be shown as answers.

Michael asked on 21 Aug 2013, 04:25 PM

Hello Again;

I've recently hit up against another wall, in an attempt to use FluidContentControl within my TileViewItems I seem to lose data binding, charts that worked outside the control's properties no longer receive data, and same for data grids, I'm not sure how to proceed. The following is an example of my xaml (the small is meant to be 'blank' while the medium and large share the same content since I was experimenting with the controls), the chart is tied to an observable collection of objects each of which has an observable collection of 'dates' and 'decimal values' for which to populate the chart.

<telerik:RadTileViewItem Header="Equity" MinimizedWidth="100">

<telerik:RadFluidContentControl>

<telerik:RadFluidContentControl.SmallContent>

<Grid Width="100"></Grid>

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.Content>

<Grid>

<DockPanel LastChildFill="True">

<telerik:RadLegend DockPanel.Dock="Bottom" x:Name="legends" Items="{Binding ElementName=chartz, Path=LegendItems}" HorizontalAlignment="Center">

<telerik:RadLegend.ItemsPanel>

<ItemsPanelTemplate>

<telerik:RadWrapPanel Orientation="Horizontal"/>

</ItemsPanelTemplate>

</telerik:RadLegend.ItemsPanel>

</telerik:RadLegend>

<telerik:RadCartesianChart DockPanel.Dock="Bottom" x:Name="chartz" Palette="Windows8" >

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid MajorLinesVisibility="Y"/>

</telerik:RadCartesianChart.Grid>

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Horizontal"/>

</telerik:RadCartesianChart.Behaviors>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeContinuousAxis LabelFitMode="Rotate" LabelFormat="dd MMM yyyy"/>

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis HorizontalAlignment="Right"></telerik:LinearAxis>

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.SeriesProvider>

<telerik:ChartSeriesProvider Source="{Binding VisiblePortfolios}">

<telerik:ChartSeriesProvider.SeriesDescriptors>

<telerik:CategoricalSeriesDescriptor ItemsSourcePath="EquityCurve" ValuePath="Value" CategoryPath="Date">

<telerik:CategoricalSeriesDescriptor.Style>

<Style TargetType="telerik:LineSeries">

<Setter Property="StrokeThickness" Value="2"/>

<Setter Property="LegendSettings" Value="{Binding Name, Converter={StaticResource SeriesSourceNameToSeriesLegendSettigsConverter}}"/>

</Style>

</telerik:CategoricalSeriesDescriptor.Style>

</telerik:CategoricalSeriesDescriptor>

</telerik:ChartSeriesProvider.SeriesDescriptors>

</telerik:ChartSeriesProvider>

</telerik:RadCartesianChart.SeriesProvider>

</telerik:RadCartesianChart>

</DockPanel>

</Grid>

</telerik:RadFluidContentControl.Content>

<telerik:RadFluidContentControl.LargeContent>

<Grid>

<DockPanel LastChildFill="True">

<telerik:RadLegend DockPanel.Dock="Bottom" x:Name="legend" Items="{Binding ElementName=chart, Path=LegendItems}" HorizontalAlignment="Center">

<telerik:RadLegend.ItemsPanel>

<ItemsPanelTemplate>

<telerik:RadWrapPanel Orientation="Horizontal"/>

</ItemsPanelTemplate>

</telerik:RadLegend.ItemsPanel>

</telerik:RadLegend>

<telerik:RadCartesianChart DockPanel.Dock="Bottom" x:Name="chart" Palette="Windows8" >

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid MajorLinesVisibility="Y"/>

</telerik:RadCartesianChart.Grid>

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Horizontal"/>

</telerik:RadCartesianChart.Behaviors>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeContinuousAxis LabelFitMode="Rotate" LabelFormat="dd MMM yyyy"/>

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis HorizontalAlignment="Right"></telerik:LinearAxis>

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.SeriesProvider>

<telerik:ChartSeriesProvider Source="{Binding VisiblePortfolios}">

<telerik:ChartSeriesProvider.SeriesDescriptors>

<telerik:CategoricalSeriesDescriptor ItemsSourcePath="EquityCurve" ValuePath="Value" CategoryPath="Date">

<telerik:CategoricalSeriesDescriptor.Style>

<Style TargetType="telerik:LineSeries">

<Setter Property="StrokeThickness" Value="2"/>

<Setter Property="LegendSettings" Value="{Binding Name, Converter={StaticResource SeriesSourceNameToSeriesLegendSettigsConverter}}"/>

</Style>

</telerik:CategoricalSeriesDescriptor.Style>

</telerik:CategoricalSeriesDescriptor>

</telerik:ChartSeriesProvider.SeriesDescriptors>

</telerik:ChartSeriesProvider>

</telerik:RadCartesianChart.SeriesProvider>

</telerik:RadCartesianChart>

</DockPanel>

</Grid>

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</telerik:RadTileViewItem>

Your assistance is appreciated.

1 Answer, 1 is accepted

answered on 26 Aug 2013, 01:42 PM

ChartViewInATileView.zip

Hi,

RadFluidContentControl exposes three content properties - Content, SmallContent and LargeContent. Only one of these three properties is visible at any given time. Hence, you need to have defined all three states. For more information you can refer to our online help topic here.

You can also take a look at the attached sample project to help you start with.

Regards,
Peshito
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>