chart to bitmap not working

4 posts, 0 answers
  1. JAVIER
    JAVIER avatar
    5 posts
    Member since:
    Oct 2013

    Posted 02 Apr 2014 Link to this post

    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;            
            }



  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 07 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. JAVIER
    JAVIER avatar
    5 posts
    Member since:
    Oct 2013

    Posted 10 Apr 2014 in reply to Victor Link to this post

    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);
            }









  5. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 15 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top