Binding Within Fluid Content Control Properties

2 posts, 0 answers
  1. Michael
    Michael avatar
    4 posts
    Member since:
    Jul 2013

    Posted 21 Aug 2013 Link to this post

    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.
  2. Peshito
    Admin
    Peshito avatar
    496 posts

    Posted 26 Aug 2013 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top