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

ChartView in RadPane

8 Answers 185 Views

Docking

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

This question is locked. New answers and comments are not allowed.

Deepak Shakya asked on 22 May 2012, 10:54 AM

Hi,

I have tried to implement a chartview in RadPane using RadDocking where HasDocumentHost=False.
One Radpane as dataentry form and the other one has charts.
The chart displays the data fine but when I float the chartpane, the charts disappear as it doesn't know where to get the data from. The datacontext is not maintained. It would be good to have the DataContext preserved for this operation.
I can get the datacontext back by hooking up to LayoutChanged event of the RadSplitContainer. It would be good to have a eventhandler defined for when the Splitter is Floated or Docked. Currently there doesn't seem to be one available.

This is one side of my problem. The other one is:

I have placed two charts in a grid which is inside a scrollviewer.
Grid has a MinHeight of 400 so that I see the scrollbars when the Height is less than 400.
Both the charts are designed to stretch to fill the grid row. This happens for the first time when it is loaded. But when I change the size of the pane or float it, one of the chart is not stretched to full width.

Please let me know if this is a bug or is there something I need to consider to manage the resizing of the panes.

8 Answers, 1 is accepted

answered on 22 May 2012, 11:25 AM

OK, why do things start to work after I have posted on this forum?

Anyway, I found the EventHandler - PaneStateChanged for RadDocking where I can handle the assignment of DataContext. But i still think that it would be better if I could maintain the datacontext on statechange.

The issue regarding second chart not being stretched to the maximum width - it is still very patchy. It is fine at times and not at others. One chart sizes fine but not the other. Could it be due to memory issue? Because it seems to freeze when I resize the pane and if I resize it again very slowly, it resizes to full width. A bit annoying. (Still using XP machine)

Thanks for looking. Cheers!

answered on 25 May 2012, 03:04 AM

Hi Lancelot,

Thanks for putting together a video and a sample. I added another column to the grid and copy and paste the chart in the second column. When I ran the sample, everything runs smooth and there is no lag in redrawing even if I add a RadExpander to hold the Grid.

But back to my application, even though I got rid of the idea of using RadDocking, the problem still persists with the ChartView redrawing.

My visual tree looks like:
<telerik:RadExpander Header="Charts" VerticalContentAlignment="Top" Height="Auto" IsExpanded="False" FontSize="{StaticResource TitleTextSize}" Foreground="{StaticResource BlueBrushUndo}" Padding="2">

    <Border x:Name="Charts">

        <Grid Margin="0" >

            <Grid.ColumnDefinitions>

                <ColumnDefinition/>

                <ColumnDefinition/>

            </Grid.ColumnDefinitions>

            <Border x:Name="BorderNChart" BorderThickness="0" Margin="0,0,10,0">

                <Grid x:Name="GridNitrogenChart">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto" />

                        <RowDefinition />

                    </Grid.RowDefinitions>

                    <Border BorderThickness="1,1,1,0" Margin="0" Style="{StaticResource GreyHeaderBorderStyle}">

                        <vs:Label Content="Nitrogen (kg/yr)" Margin="0" HorizontalAlignment="Center" Foreground="White" FontFamily="{StaticResource UndoFont}" FontSize="{StaticResource UndoFontSize}" FontWeight="Bold" />

                    </Border>

                    <Border x:Name="BorderChartNitrogen" BorderThickness="1" BorderBrush="{StaticResource BorderBrush}" Grid.Row="1">

                        <telerik:RadCartesianChart x:Name="NitrogenChart" Palette="Metro" Height="300" MaxZoom="10,1" Zoom="{Binding Zoom, Mode=TwoWay}" PanOffset="{Binding PanOffset, Mode=TwoWay}" Padding="0,0,0,5">

                            <telerik:RadCartesianChart.Behaviors>

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

                            </telerik:RadCartesianChart.Behaviors>

                            <telerik:RadCartesianChart.HorizontalAxis>

                                <telerik:CategoricalAxis LabelRotationAngle="270" LabelFitMode="Rotate" ShowLabels="True" FontSize="{StaticResource ChartLabelFont}" HorizontalLocation="Right" />

                            </telerik:RadCartesianChart.HorizontalAxis>

                            <telerik:RadCartesianChart.VerticalAxis>

                                <telerik:LinearAxis FontSize="{StaticResource ChartLabelFont}" />

                            </telerik:RadCartesianChart.VerticalAxis>

                            <telerik:BarSeries ItemsSource="{Binding Model.Subregions}" CategoryBinding="SubregionName" ValueBinding="NitrogenInput" />

                        </telerik:RadCartesianChart>

                    </Border>

                </Grid>

            </Border>

            <Border x:Name="BorderPChart" BorderThickness="0" Grid.Column="1" Margin="10,0,0,0">

                <Grid x:Name="GridPhosphorusChart" Margin="0,0,-2,-2">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto" />

                        <RowDefinition />

                    </Grid.RowDefinitions>

                    <Border Style="{StaticResource GreyHeaderBorderStyle}">

                        <vs:Label Content="Phosphorus (kg/yr)" Margin="0" HorizontalAlignment="Center" Foreground="White" FontFamily="{StaticResource UndoFont}" FontSize="{StaticResource UndoFontSize}" FontWeight="Bold" />

                    </Border>

                    <Border x:Name="BorderChartPhosphorus" BorderThickness="1" Grid.Row="1" Margin="0" BorderBrush="{StaticResource BorderBrush}">

                            <telerik:RadCartesianChart x:Name="PhosphorusChart" Palette="Natural" MaxZoom="10,1" Zoom="{Binding Zoom, Mode=TwoWay}" PanOffset="{Binding PanOffset, Mode=TwoWay}" Height="300" Padding="0,0,0,5">

                                <telerik:RadCartesianChart.Behaviors>

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

                                </telerik:RadCartesianChart.Behaviors>

                                <telerik:RadCartesianChart.HorizontalAxis>

                                    <telerik:CategoricalAxis FontSize="{StaticResource ChartLabelFont}" LabelRotationAngle="270" LabelFitMode="Rotate" />

                                </telerik:RadCartesianChart.HorizontalAxis>

                                <telerik:RadCartesianChart.VerticalAxis>

                                    <telerik:LinearAxis FontSize="{StaticResource ChartLabelFont}" />

                                </telerik:RadCartesianChart.VerticalAxis>

                                <telerik:BarSeries ItemsSource="{Binding Model.Subregions}" CategoryBinding="SubregionName" ValueBinding="PhosphorusInput" />

                            </telerik:RadCartesianChart>

                    </Border>

                </Grid>

            </Border>

        </Grid>

    </Border>

</telerik:RadExpander>
The RadExpander is the last element in vertical Stackpanel
When I maximize the window, there is a funny thing going with the redraw
I then collapse and re-open the RadExpander, the layout is fine again.
I then restore the window - Charts overlap.

Please let me know if there is anything I can do to get rid of this issue. You can download the video recording of what happens from my skydrive :

https://skydrive.live.com/redir?resid=56C17B3FA2DE6729!445&authkey=!AGmDWfmy7xsVaEk

Thank you.

answered on 25 May 2012, 04:38 PM

Thank you for the video and your XAML, that helped me drill into your issue and provide a custom fix. I've recorded a new video for you and also a link to get the example's source code. There are two RadPanes with charts, both are based on your VisualTree. The RadPane highest in the visual tree is your exact code, minus the custom styling and I added the number 2 to the element names. (example: TextBlock is renamed TextBlock2)

Just copy and paste it into your project and then add the styles back in.

Resources:
Video of me demonstrating the new solution: http://screencast.com/t/jFNqFQsN
Link to the source code: http://dl.dropbox.com/u/47517502/ChartAndDockExample_Deepak.zip

This should solve your overlapping issue. If not, let me know and we'll take a look at your static resources and see if they're are effecting the layout.

Lancelot

answered on 28 May 2012, 03:18 AM

Hi Lancelot,

Thanks again. I went through the example and stripped out all the styling from my application. The result was still the same. I think I have found the culprit in my visual tree. One thing I didn't mention in the visual tree was that my page has a scrollviewer and everything is inside it.

So I went ahead and in your example,

I removed everything
Just placed a scrollviewer inside the grid
a border with MinHeight of 600 inside the grid
RadExpander with the charts inside the border
Ran the app
Resized the window so that it is small, say when no scrollbars appear
Now, maximised the window
Voila, there was my infamous overlap.

Hope you get the overlap as well. ;-)

You can find the modified code in here:

https://skydrive.live.com/redir?resid=56C17B3FA2DE6729!446&authkey=!ACnVdolZKX5emls

Any help would be great. Thanks again.

answered on 29 May 2012, 04:31 PM

Thank you for providing with the source code, I was able to reproduce your problem and I've found a solution for you.

Your issue is due to the parent container that hold the charts. You are using a Grid and assigning each chart to a different column. When you maximize and restore, the Grid will resize itself and first column is not giving you enough of a margin. So after restoring from a maximized state, the first column is not returning to the original width. The second column's chart then overlaps the edge of chart inside of column one because column one's width is smaller than the chart inside it.

You can do a couple things here, you could set a minimum width to each column so that no matter how small the windows gets, the columns will not encroach on the chart inside it... Or what I strongly recommend is use a StackPanel instead of a Grid.

This is one of the scenarios where the StackPanel really shines. No matter what the size the chart, the Stackpanel will give it the right amount of space inside of each panel and they will not overlap.

You can change the Stackpanel's orientation property to Horizontal. This will ensure that no matter the size of the window, the Stackpanel will hold the chart without clipping. When one chart ends, the next begins. there is an invisible line that cant be crossed by the charts. If you want a little more room between the charts, just add a bit of Margin like you did in your Grid example.

Here is the code from your example with my changes to the parent container. Replace your entire MainPage.xaml code with this code. Notice how I replaced the parent container with a Stackpanel, gave it Orientation="Horizontal", and a HorizontalAlignment="Left" properties. I also gave BorderNChart2 a Right Margin of 10, but is unnecessary with the stackpanel.

<UserControl x:Class="chartDockexample.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"

xmlns:charting="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"

xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"

xmlns:demo="clr-namespace:chartDockexample.ViewModel.Radial"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

<UserControl.DataContext>

<demo:RadialViewModel />

</UserControl.DataContext>

<UserControl.Resources>

<Style x:Key="LabelStyle" TargetType="TextBlock">

<Setter Property="FontFamily" Value="Segoe UI" />

<Setter Property="FontSize" Value="14" />

</Style>

<Style x:Key="legendStyle" TargetType="StackPanel">

<Setter Property="Margin" Value="0,15,80,0" />

</Style>

<Style x:Key="legendItemStyle" TargetType="TextBlock">

<Setter Property="FontFamily" Value="Segoe UI" />

<Setter Property="FontSize" Value="14" />

<Setter Property="Foreground" Value="#FF767676" />

<Setter Property="Margin" Value="8,4,8,4" />

<Setter Property="VerticalAlignment" Value="Center" />

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >

<Border BorderThickness="10" MinHeight="600">

<telerik:RadExpander Header="Charts" VerticalContentAlignment="Top" Height="Auto" IsExpanded="False" Padding="2">

<Border x:Name="Charts2">

<StackPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Left">

<Border x:Name="BorderNChart2" BorderThickness="0" HorizontalAlignment="Left" Height="319" Width="285" Margin="0,0,10,0">

<Grid x:Name="GridNitrogenChart2">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

</Grid.RowDefinitions>

<Border BorderThickness="1,1,1,0" Margin="0">

<TextBlock Text="Nitrogen (kg/yr)" Margin="0" HorizontalAlignment="Center" Foreground="White" FontWeight="Bold" />

</Border>

<Border x:Name="BorderChartNitrogen2" BorderThickness="1" Grid.Row="1">

<chart:RadCartesianChart x:Name="NitrogenChart2" Palette="Metro" Height="300" MaxZoom="10,1" Zoom="{Binding Zoom, Mode=TwoWay}" PanOffset="{Binding PanOffset, Mode=TwoWay}" Padding="0,0,0,5">

<chart:RadCartesianChart.Behaviors>

<chartView:ChartPanAndZoomBehavior PanMode="Horizontal" ZoomMode="Horizontal" />

</chart:RadCartesianChart.Behaviors>

<chart:RadCartesianChart.HorizontalAxis>

<chartView:CategoricalAxis LabelRotationAngle="270" LabelFitMode="Rotate" ShowLabels="True" FontSize="12" HorizontalLocation="Right" />

</chart:RadCartesianChart.HorizontalAxis>

<chart:RadCartesianChart.VerticalAxis>

<chartView:LinearAxis FontSize="12" />

</chart:RadCartesianChart.VerticalAxis>

<chartView:BarSeries ItemsSource="{Binding Model.Subregions}" CategoryBinding="SubregionName" ValueBinding="NitrogenInput" />

</chart:RadCartesianChart>

</Border>

</Grid>

</Border>

<Border x:Name="BorderPChart2" BorderThickness="0" HorizontalAlignment="Right" Height="319" Width="284">

<Grid x:Name="GridPhosphorusChart2" Margin="0,0,-2,-2">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

</Grid.RowDefinitions>

<Border>

<TextBlock Text="Phosphorus (kg/yr)" Margin="0" HorizontalAlignment="Center" Foreground="White" FontWeight="Bold" />

</Border>

<Border x:Name="BorderChartPhosphorus2" BorderThickness="1" Grid.Row="1" Margin="0">

<chart:RadCartesianChart x:Name="PhosphorusChart2" Palette="Natural" MaxZoom="10,1" Zoom="{Binding Zoom, Mode=TwoWay}" PanOffset="{Binding PanOffset, Mode=TwoWay}" Height="300" Padding="0,0,0,5">

<chart:RadCartesianChart.Behaviors>

<chartView:ChartPanAndZoomBehavior PanMode="Horizontal" ZoomMode="Horizontal" />

</chart:RadCartesianChart.Behaviors>

<chart:RadCartesianChart.HorizontalAxis>

<chartView:CategoricalAxis FontSize="12" LabelRotationAngle="270" LabelFitMode="Rotate" />

</chart:RadCartesianChart.HorizontalAxis>

<chart:RadCartesianChart.VerticalAxis>

<chartView:LinearAxis FontSize="12" />

</chart:RadCartesianChart.VerticalAxis>

<chartView:BarSeries ItemsSource="{Binding Model.Subregions}" CategoryBinding="SubregionName" ValueBinding="PhosphorusInput" />

</chart:RadCartesianChart>

</Border>

</Grid>

</Border>

</StackPanel>

</Border>

</telerik:RadExpander>

<!--<telerik:RadDocking BorderThickness="0" Padding="0" Margin="20">

<telerik:RadDocking.DocumentHost>

<telerik:RadSplitContainer>

<telerik:RadPaneGroup>

<telerik:RadDocumentPane Header="Document 1" Title="Document 1" >

<telerik:RadExpander Header="Charts" VerticalContentAlignment="Top" Height="Auto" IsExpanded="False" FontSize="18" Foreground="Black" Padding="2">

<Border x:Name="Charts">

<Grid Margin="0" >

<Grid.ColumnDefinitions>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Border x:Name="BorderNChart" BorderThickness="0" Margin="0,0,10,0">

<Grid x:Name="GridNitrogenChart">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

</Grid.RowDefinitions>

<Border BorderThickness="1,1,1,0" Margin="0" >

<TextBlock Text="Nitrogen (kg/yr)" Margin="0" HorizontalAlignment="Center" Foreground="White" FontSize="12" FontWeight="Bold" />

</Border>

<Border x:Name="BorderChartNitrogen" BorderThickness="1" BorderBrush="Black" Grid.Row="1">

<telerik:RadCartesianChart x:Name="NitrogenChart" Palette="Metro"

Height="300" MaxZoom="10,1"

Zoom="{Binding Zoom, Mode=TwoWay}"

PanOffset="{Binding PanOffset, Mode=TwoWay}"

Padding="0,0,0,5">

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid MajorLinesVisibility="Y" MajorYLineDashArray="5, 5">

<telerik:CartesianChartGrid.MajorYLineStyle>

<Style TargetType="Line">

<Setter Property="Shape.Stroke" Value="Gray" />

</Style>

</telerik:CartesianChartGrid.MajorYLineStyle>

</telerik:CartesianChartGrid>

</telerik:RadCartesianChart.Grid>

<telerik:RadCartesianChart.Behaviors>

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

</telerik:RadCartesianChart.Behaviors>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:CategoricalAxis />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis />

</telerik:RadCartesianChart.VerticalAxis>

<telerik:BarSeries CombineMode="Stack">

<telerik:BarSeries.PointTemplate>

<DataTemplate>

<Rectangle Fill="#FF5AA4D4" />

</DataTemplate>

</telerik:BarSeries.PointTemplate>

<telerik:CategoricalDataPoint Category="1" Value="0.2" />

<telerik:CategoricalDataPoint Category="2" Value="0.7" />

</telerik:BarSeries>

<telerik:BarSeries CombineMode="Stack">

<telerik:BarSeries.PointTemplate>

<DataTemplate>

<Rectangle Fill="DarkOrange" />

</DataTemplate>

</telerik:BarSeries.PointTemplate>

<telerik:CategoricalDataPoint Category="1" Value="0.9" />

<telerik:CategoricalDataPoint Category="2" Value="0.6" />

</telerik:BarSeries>

</telerik:RadCartesianChart>

</Border>

</Grid>

</Border>

<Border x:Name="BorderPChart" BorderThickness="0" Grid.Column="1" Margin="10,0,0,0">

<Grid x:Name="GridPhosphorusChart" Margin="0,0,-2,-2">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

</Grid.RowDefinitions>

<Border >

<TextBlock Text="Phosphorus (kg/yr)" Margin="0" HorizontalAlignment="Center" Foreground="White" FontSize="12" FontWeight="Bold" />

</Border>

<Border x:Name="BorderChartPhosphorus" BorderThickness="1" Grid.Row="1" Margin="0" BorderBrush="Black">

<telerik:RadCartesianChart x:Name="PhosphorusChart" Palette="Natural" MaxZoom="10,1" Zoom="{Binding Zoom, Mode=TwoWay}" PanOffset="{Binding PanOffset, Mode=TwoWay}" Height="300" Padding="0,0,0,5">

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid MajorLinesVisibility="Y" MajorYLineDashArray="5, 5">

<telerik:CartesianChartGrid.MajorYLineStyle>

<Style TargetType="Line">

<Setter Property="Shape.Stroke" Value="Gray" />

</Style>

</telerik:CartesianChartGrid.MajorYLineStyle>

</telerik:CartesianChartGrid>

</telerik:RadCartesianChart.Grid>

<telerik:RadCartesianChart.Behaviors>

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

</telerik:RadCartesianChart.Behaviors>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:CategoricalAxis />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis />

</telerik:RadCartesianChart.VerticalAxis>

<telerik:AreaSeries CombineMode="Stack" Fill="#FF5AA4D4">

<telerik:CategoricalDataPoint Value="1.0" />

<telerik:CategoricalDataPoint Value="1.9" />

<telerik:CategoricalDataPoint Value="2.3" />

<telerik:CategoricalDataPoint Value="2.1" />

</telerik:AreaSeries>

<telerik:AreaSeries CombineMode="Stack" Fill="#88FF5B00">

<telerik:CategoricalDataPoint Value="1.0" />

</telerik:AreaSeries>

</telerik:RadCartesianChart>

</Border>

</Grid>

</Border>

</Grid>

</Border>

</telerik:RadExpander>

</telerik:RadDocumentPane>

</telerik:RadPaneGroup>

</telerik:RadSplitContainer>

</telerik:RadDocking.DocumentHost>

<telerik:RadSplitContainer Orientation="Vertical" InitialPosition="DockedLeft">

<telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="300, 300">

<telerik:RadPane Header="Pane Left 1" Loaded="RadPane_Loaded" >

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >

<chart:RadPieChart x:Name="PieChart" Palette="Summer">

<chartView:PieSeries ShowLabels="True" RadiusFactor="0.8">

<chartView:PieSeries.DataPoints>

<charting:PieDataPoint Value="82.35" />

<charting:PieDataPoint Value="6.69" />

<charting:PieDataPoint Value="5.12" />

<charting:PieDataPoint Value="4.71" />

</chartView:PieSeries.DataPoints>

<chartView:PieSeries.LabelDefinitions>

<chartView:ChartSeriesLabelDefinition Margin="-40,0,0,0" DefaultVisualStyle="{StaticResource LabelStyle}" />

</chartView:PieSeries.LabelDefinitions>

<chartView:PieSeries.AngleRange>

<charting:AngleRange StartAngle="270" SweepAngle="360" />

</chartView:PieSeries.AngleRange>

</chartView:PieSeries>

</chart:RadPieChart>

<StackPanel x:Name="PieLegend" Style="{StaticResource legendStyle}" Grid.Column="1">

<StackPanel Orientation="Horizontal">

<Rectangle Width="24" Height="24" />

<TextBlock Style="{StaticResource legendItemStyle}" Text="Google" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<Rectangle Width="24" Height="24" />

<TextBlock Style="{StaticResource legendItemStyle}" Text="Yahoo!" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<Rectangle Width="24" Height="24" />

<TextBlock Style="{StaticResource legendItemStyle}" Text="Baidu" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<Rectangle Width="24" Height="24" />

<TextBlock Style="{StaticResource legendItemStyle}" Text="Others" />

</StackPanel>

</Grid>

</telerik:RadPane>

</telerik:RadPaneGroup>

<telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="200, 100">

<telerik:RadPane Header="Pane Left 2" Content="Pane Left 2" />

</telerik:RadPaneGroup>

<telerik:RadPaneGroup>

<telerik:RadPane Header="Pane Left 3" Content="Pane Left 3" />

</telerik:RadPaneGroup>

</telerik:RadSplitContainer>

<telerik:RadSplitContainer Orientation="Horizontal" InitialPosition="DockedRight">

<telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="150, 200">

<telerik:RadPane Header="Pane Right 1" >

Here is where I placed your example. I replaced your bound attributes with a hard coded items for simplicity

</telerik:RadPane>

</telerik:RadPaneGroup>

</telerik:RadSplitContainer>

<telerik:RadSplitContainer Orientation="Horizontal" InitialPosition="DockedBottom">

<telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="100, 200">

<telerik:RadPane Header="Pane Bottom 1" Content="Pane Bottom 1" />

</telerik:RadPaneGroup>

<telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="300, 200">

<telerik:RadPane Header="Pane Bottom 2" Content="Pane Bottom 2" />

</telerik:RadPaneGroup>

</telerik:RadSplitContainer>

</telerik:RadDocking>-->

</Border>

</ScrollViewer>

</Grid>

</UserControl>

This will solve your overlapping problem for good. Thank you for providing the code, and if you need any additional help I am happy to help.

Lancelot

answered on 30 May 2012, 02:19 AM

Hi Lancelot,

Thanks for the suggestion. If I change the container to stackpanel, it works but the display is not what I had planned. Wrapping the charts in stackpanel means that I have to provide the charts a definite width or else it will shrink. This also means that my charts won't resize when the window size changes. This is not exactly what I want to achieve. Looks like charts have difficulty redrawing itself when the container size changes (too quickly).

Grid is my preferred option as it allows resizing. For now I will live with it overlapping but could you please let me know if you find a way to get over this?

Thank you once again.

Cheers!

answered on 30 May 2012, 05:07 PM

Hi Deepak,

Ok, if we are to stay with the Grid then lets do this...

I've rerun a couple examples of finding the best way to do this using just the Grid and attain the flexibility of your UI goals. The fix (using the code you gave me) is to set the MinWidth of the Grid's ColumnDefinitions to 290px. This will prevent column 2 from overlapping column one. The code from inside the ScrollViewer is below, notice the Grid.ColumnDefinitions section of the Grid

When you apply this to your working code, see how small the chart gets before the overlapping occurs. Add ten px to this width and use it for MinWidth of the column. I found that 290 was the magic number using the code you gave me.

If this still doesn't provide the effect you want, you could also try the Padding property of the grid. Add this property to the grid Padding="0,0,10,0" Increase the number 10 to what works for you.

I hope this helps get you closer!
Lancelot

<telerik:RadExpander Header="Charts" VerticalContentAlignment="Top" Height="Auto" IsExpanded="False" Padding="2">

<Border x:Name="Charts2">

<Grid HorizontalAlignment="Left" Margin="0" >

<Border x:Name="BorderNChart2" BorderThickness="0" HorizontalAlignment="Left" Width="285" Margin="0,0,0,-40">

<Grid x:Name="GridNitrogenChart2">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition MinWidth="290" />

</Grid.ColumnDefinitions>

<Border BorderThickness="1,1,1,0" Margin="0">

<TextBlock Text="Nitrogen (kg/yr)" Margin="0" HorizontalAlignment="Center" Foreground="White" FontWeight="Bold" />

</Border>

<Border x:Name="BorderChartNitrogen2" BorderThickness="1" Grid.Row="1">

<chart:RadCartesianChart.Behaviors>

<chartView:ChartPanAndZoomBehavior PanMode="Horizontal" ZoomMode="Horizontal" />

</chart:RadCartesianChart.Behaviors>

<chart:RadCartesianChart.HorizontalAxis>

<chartView:CategoricalAxis LabelRotationAngle="270" LabelFitMode="Rotate" ShowLabels="True" FontSize="12" HorizontalLocation="Right" />

</chart:RadCartesianChart.HorizontalAxis>

<chart:RadCartesianChart.VerticalAxis>

<chartView:LinearAxis FontSize="12" />

</chart:RadCartesianChart.VerticalAxis>

<chartView:BarSeries ItemsSource="{Binding Model.Subregions}" CategoryBinding="SubregionName" ValueBinding="NitrogenInput" />

</chart:RadCartesianChart>

</Border>

</Grid>

</Border>

<Border x:Name="BorderPChart2" BorderThickness="0" HorizontalAlignment="Right" Width="284" Margin="0,0,-284,-40" d:LayoutOverrides="HorizontalAlignment">

<Grid x:Name="GridPhosphorusChart2" Margin="0,0,-2,-2">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

</Grid.RowDefinitions>

<Border>

<TextBlock Text="Phosphorus (kg/yr)" Margin="0" HorizontalAlignment="Center" Foreground="White" FontWeight="Bold" />

</Border>

<Border x:Name="BorderChartPhosphorus2" BorderThickness="1" Grid.Row="1" Margin="0">

<chart:RadCartesianChart.Behaviors>

<chartView:ChartPanAndZoomBehavior PanMode="Horizontal" ZoomMode="Horizontal" />

</chart:RadCartesianChart.Behaviors>

<chart:RadCartesianChart.HorizontalAxis>

<chartView:CategoricalAxis FontSize="12" LabelRotationAngle="270" LabelFitMode="Rotate" />

</chart:RadCartesianChart.HorizontalAxis>

<chart:RadCartesianChart.VerticalAxis>

<chartView:LinearAxis FontSize="12" />

</chart:RadCartesianChart.VerticalAxis>

<chartView:BarSeries ItemsSource="{Binding Model.Subregions}" CategoryBinding="SubregionName" ValueBinding="PhosphorusInput" />

</chart:RadCartesianChart>

</Border>

</Grid>

</Border>

</Grid>

</Border>

</telerik:RadExpander>