[Solved] Chart at ItemDetail Page of standard template "Grid App"

[schneeflocke]

Hi,



I'm trying to place a Chart on the ItemDetailPage of the Microsoft Standard template "Grid App (XAML)".

The ItemDetailPage is based on a flipView-Control. And here I'm currently completely lost.



Could you provide a simple sample how I can place a Telerik Chart in this flipView-Control and bind the data to the item?



Currently I have no Idea how I can do this.



Thanks an Best Regards



Stefan

[Georgi]

Hi Stefan,

Thank you for your interest in RadControls for Metro and for your question.

We provide two complete applications that showcase our components and may be used as an entry point for building your applications:

1. The QSF (Quick Start Framework) - this is a demo center application that comes with numerous examples for all controls. The app is available with the installation package and a shortcut to its solution is placed on your desktop

2. The Dashboard demo application. It is available for you to download from your Telerik Account. This demo uses our data visualization controls heavily and may help you build your own charts.

Additionally, you may refer to our online documentation:

RadControls for Metro Documentation

I hope this helps. Let me know if I can assist you further.

Greetings,
Georgi
the Telerik team

[schneeflocke]

Hi,

helps not really. I already checked the samples but they are not so helpful for a beginner.

I already tried to place the simple sample from the telerik documentation into the ItemDetailPage.xaml of the microsoft Standard Grid Template but without success.

if possible please create a project using the microsoft standard template (Grid)
and place a grid populated with data into the ItemDetailPage.xaml.

That's all I'm trying, but it dosn't work.

Thanks

Stefan

[Georgi]

Hi Stefan,

Thanks for getting back to me.

I am sorry to hear that the provided resources didn't work for you. I am sending you a demo project that shows how to add RadPieChart to the ItemDetailPage.xaml.

Please, have a look and let me know what prevented your from achieving it yourself and how can we improve our support resources. Note that the application is built with the latest RC release and you will need to download it from your Telerik account.

I am looking forward to your reply.

Greetings,
Georgi
the Telerik team

[schneeflocke]

Hi Georgi,

thanks for the simple example. It covers nearly all of my questions. But one Question is still open.

Is it possible to place more than one chart into the ItemDetailPage.xaml

Take the sample you provided and place the following code into the ItemDetailPage.xaml. Just simply after the <FlipView.ItemTemplate><DataTemplate> statements.

<ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
    <!-- Inhalte können sich über so viele Spalten wie nötig erstrecken. -->
    <common:RichTextColumns x:Name="richTextColumns" Margin="117,0,117,47">

        <RichTextBlock x:Name="richTextBlock" Width="450" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
            <Paragraph>
                <Run FontSize="26.667" FontWeight="Light" Text="{Binding Title}"/>
                <LineBreak/>
                <LineBreak/>
                <Run FontWeight="Normal" Text="{Binding Subtitle}"/>
            </Paragraph>
            <Paragraph LineStackingStrategy="MaxHeight">
                <InlineUIContainer>
                    <Chart:RadPieChart PaletteName="DefaultDark" Margin="50">
                        <Chart:PieSeries ItemsSource="{Binding Items, Source={StaticResource ChartData}}" RadiusFactor="0.9"/>
                    </Chart:RadPieChart>
                </InlineUIContainer>
            </Paragraph>
            <Paragraph>
                <Run FontWeight="SemiLight" Text="{Binding Content}"/>
            </Paragraph>
        </RichTextBlock>

        <!-- Zusätzliche Spalten werden von dieser Vorlage erstellt. -->
        <common:RichTextColumns.ColumnTemplate>
            <DataTemplate>
                <RichTextBlockOverflow Width="560" Margin="80,0,0,0">
                    <RichTextBlockOverflow.RenderTransform>
                        <TranslateTransform X="-1" Y="4"/>
                    </RichTextBlockOverflow.RenderTransform>
                </RichTextBlockOverflow>
            </DataTemplate>
        </common:RichTextColumns.ColumnTemplate>
    </common:RichTextColumns>

    </ScrollViewer>

and then execute the App. Click on the first item of the Group to navigate into the ItemDetailPage.
Now scroll in a horizontal way through the first 5 items.
Latest if you scroll backwards through the items you will recognize that some charts are missing, also some of the texts.

Currently I'm not sure if multiple Charts in such a FlipView/ScrollViewer combination are allowed or not.

The Idea for my App is to scroll through the different items and show one or two chart for each item.

Many Thanks,

Stefan

[Georgi]

Hi Stefan,

Generally you may have any arbitrary number of charts placed within a Panel and there is nothing we are aware of that would make this impossible. In your scenario you are placing the Chart within a RichTextBlock as an InlineUIContainer and this may imply some limitations. Try to put the chart outside the RichTextBlock and there should be no issues.

Let me know how it goes.

Regards,
Georgi
the Telerik team

[schneeflocke]

Works perfect outside of the RichTextBlock.
Thanks for your help.

Best Regards,

Stefan

[Shashank]

Hi Georgi,

I want to add Listview in itemdetail page.

Can you please assist me with it?

Thanks & Regards
Shashank

[Ivaylo Gergov]

Hi Shashank,

Thank you for contacting us.

Can you please elaborate a bit more on this, e.g., what exactly are you trying to achieve, what is the difficulty that you are experiencing and does it include any of our RadControls for Windows 8?

 

Regards,
Ivaylo Gergov
the Telerik team

[Shashank]

Dear Ivaylo,

Thanks for your quick reply...!

Its doesn't include any of your RadControls for windows 8.

I want to switch between ItemDetail page using a button instead of flipview.

Can you please help me with that?

Thanks
Shashank

[Georgi]

Hi Shashank,

Thank you for your clarification.

I would recommend visiting the Microsoft Developer Network (MSDN) for more information about navigating among pages in Windows Store apps. Here is a sample link:

http://msdn.microsoft.com/library/windows/apps/hh771188.aspx

I hope this information is useful.

Regards,
Georgi
Telerik