chart to bitmap not working

[JAVIER]

Hi,

I need to create a bitmap from a user control that contains a RadCartesianChart.

I'm using WriteableBitmap control, but the chart does not render correctly. Generated image is empty.

Thanks.


.xaml:

<UserControl x:Class="EjemploLibrary.Tiles.WideTile"
    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:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
    xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"                     
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="336" d:DesignWidth="691">

    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
            <Rectangle Fill="White" Height="336" Margin="0,0,0,0" Width="691"/>
        </Canvas>
        <TextBlock x:Name="tBlockNombre" 
                FontFamily="{StaticResource PhoneFontFamilySemiBold}" 
                FontSize="44" 
                Foreground="#FFBD0926" 
                Margin="10,10,0,0"
                HorizontalAlignment="Left" 
                VerticalAlignment="Top"
                Text="EXAMPLE"
                Width="580"/>
        <chart:RadCartesianChart Name="chartGrafico" Width="320" Height="170">
            <chart:RadCartesianChart.VerticalAxis>
                <chart:LinearAxis Name="chartEje" Visibility="Visible" Maximum="500" Minimum="0" Foreground="#FFEBB6BE" FontSize="14" LineThickness="0" TickThickness="0"/>
            </chart:RadCartesianChart.VerticalAxis>
            <chart:RadCartesianChart.HorizontalAxis>
                <chart:CategoricalAxis Visibility="Collapsed"/>
            </chart:RadCartesianChart.HorizontalAxis>
            <chart:AreaSeries Name="chartSeries" Stroke="#FFC72E46" Fill="#99E898A4" StrokeThickness="2">
                <chartEngine:CategoricalDataPoint Value="100.0"/>
                <chartEngine:CategoricalDataPoint Value="102.9"/>
                <chartEngine:CategoricalDataPoint Value="211.9"/>
                <chartEngine:CategoricalDataPoint Value="232.3"/>
                <chartEngine:CategoricalDataPoint Value="322.1"/>
                <chartEngine:CategoricalDataPoint Value="433"/>                
            </chart:AreaSeries>
            <chart:RadCartesianChart.Grid>
                <chart:CartesianChartGrid MajorLinesVisibility="Y">
                    <chart:CartesianChartGrid.MajorYLineStyle>
                        <Style TargetType="Line">
                            <Setter Property="Stroke" Value="#FFD76B7D"/>
                        </Style>
                    </chart:CartesianChartGrid.MajorYLineStyle>
                </chart:CartesianChartGrid>
            </chart:RadCartesianChart.Grid>
         
        </chart:RadCartesianChart>     
    </Grid>        
</UserControl>



.cs:
        public Uri mRender(int id)
        {                
            IsolatedStorageFile userStore = IsolatedStorageFile.GetUserStoreForApplication();
            Uri imageUri;
                
            const string shellContentDirectory = "Shared\\ShellContent";
            userStore.CreateDirectory(shellContentDirectory);

            this.UpdateLayout();

            WriteableBitmap bitmap = new WriteableBitmap(this, null);
            bitmap.Invalidate();
            
            string imagePath = shellContentDirectory + "\\" + id + ".jpg";

            using (IsolatedStorageFileStream stream = userStore.OpenFile(imagePath, System.IO.FileMode.Create))
            {
                bitmap.SaveJpeg(stream, 691, 336, 0, 100);                 
            }                
            imageUri = new Uri("isostore:/" + imagePath.Replace('\\', '/'));                    
            return imageUri;            
        }

[Victor]

Hello Javier,

Thanks for writing.
Please have a look at the attached app. It demonstrates how to take a picture of a user control with RadChart inside. There must be something specific to your app that causes the image to not be drawn.

Regards,
Victor
Telerik

 

 

[JAVIER]

Thanks Victor,

Your app works correctly, but if you create user control at runtime don't work.

A catastrophic failure exception is thrown...


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            WindowsPhoneControl1 control = new WindowsPhoneControl1();
            this.image.Source = new WriteableBitmap(control, null);
        }

[Victor]

Hello Javier,

Thanks for writing again.
Yes, it seems it does but this is just how WriteableBitmap works. The Telerik controls can not work around this issue. You have to make sure that your component is inside an element tree and that it is rendered for it to work.

You can also try manually measuring and arranging the user control, however, I am not sure if this will work.

Please write again if you have other questions.

Regards,
Victor
Telerik