Binding Within Fluid Content Control Properties

[Michael]

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.

[Peshito]

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