Same components in tileviewitems

[Grtjn]

Hi,

I use the tileview to display dashoards. So for i have one dashboard in a tileviewitem and the other item is empty.
What i want to do now, is have the same dashboard in the other tileviewitem.

Fact is i don't want to just copy the code (XAML). Is there a way to just call the code instead of having to rewrite everything again?!
So just calling the XAML-code for the dashboard in both the tileviewitems...

Code:

<telerikNavigation:RadTileViewItem Header="Dashboard Wasser A" Foreground="Black" Background="Black" >
                    <telerikNavigation:RadTileViewItem.Content>
                        <telerik:RadFluidContentControl Foreground="White" SmallToNormalThreshold="500 0" NormalToSmallThreshold="500 0"
                                                                       NormalToLargeThreshold="1040 0" LargeToNormalThreshold="1035 0">
                            <telerik:RadFluidContentControl.SmallContent>
                                <Grid x:Name="Grid1" Width="100" Height="100">
                                    <TextBlock Text="Dashboard A" VerticalAlignment="Center" />
                                </Grid>
                            </telerik:RadFluidContentControl.SmallContent>
                            <telerik:RadFluidContentControl.Content>
                                <Grid x:Name="Grid2" Width="500" Height="500" >
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="40" />
                                        <RowDefinition MaxHeight="300" />
                                    </Grid.RowDefinitions>
                                    <TextBlock Grid.Row="0" Text="Dashboard Wasser A" HorizontalAlignment="Center" FontSize="20" TextDecorations="Underline" />
                                    <Telerik_Windows_Controls:RadChart Grid.Row="1" x:Name="pieChartTile" />
                                </Grid>
                            </telerik:RadFluidContentControl.Content>
                            <telerik:RadFluidContentControl.LargeContent>
                                <Grid x:Name="LayoutRoot" >
                                    <Grid.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="0.747"/>
                                            <GradientStop Color="#FF484443"/>
                                        </LinearGradientBrush>
                                    </Grid.Background>
                                    <Grid.Resources>
                                        <RadialGradientBrush x:Key="DoughnutMaskBrush" GradientOrigin="0.5,0.5">
                                            <GradientStop Color="#33FFFFFF" Offset="0.88" />
                                            <GradientStop Color="#00FFFFFF" Offset="0.66"/>
                                            <GradientStop Color="#19FFFFFF" Offset="0.47"/>
                                            <GradientStop Offset="0.46"/>
                                            <GradientStop Offset="0.89"/>
                                        </RadialGradientBrush>
                                        <Style x:Key="PieStyle" TargetType="Telerik_Windows_Controls_Charting:Doughnut">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="Telerik_Windows_Controls_Charting:Doughnut" >
                                                        <Canvas>
                                                            <Ellipse    Clip="{TemplateBinding FigurePath}"
                                            Width="{TemplateBinding ItemActualWidth}"
                                            Height="{TemplateBinding ItemActualHeight}"
                                            StrokeThickness="0"
                                            Fill="{Binding DataItem.Kleur}" />
                                                            <Path x:Name="PART_DefiningGeometry"
                                      Data="{TemplateBinding FigurePath2}"
                                      Fill="Transparent"
                                      Style="{TemplateBinding ItemStyle}" />
                                                            <Ellipse Clip="{TemplateBinding FigurePath3}"
                                         Fill="{StaticResource DoughnutMaskBrush}"
                                         Width="{TemplateBinding ItemActualWidth}"
                                         Height="{TemplateBinding ItemActualHeight}"/>
                                                            <Canvas.RenderTransform>
                                                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                                                            </Canvas.RenderTransform>
                                                        </Canvas>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>

                                        <Style x:Key="PieSmallStyle" TargetType="Telerik_Windows_Controls_Charting:Doughnut">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="Telerik_Windows_Controls_Charting:Doughnut" >
                                                        <Canvas>
                                                            <Ellipse    Clip="{TemplateBinding FigurePath}"
                                            Width="{TemplateBinding ItemActualWidth}"
                                            Height="{TemplateBinding ItemActualHeight}"
                                            StrokeThickness="0"
                                            Fill="{Binding DataItem.Kleur}" />
                                                            <!--<Path x:Name="PART_DefiningGeometry"
                                      Data="{TemplateBinding FigurePath2}"
                                      Fill="Transparent"
                                      Style="{TemplateBinding ItemStyle}" />
                                <Ellipse Clip="{TemplateBinding FigurePath3}"
                                         Fill="{StaticResource DoughnutMaskBrush}"
                                         Width="{TemplateBinding ItemActualWidth}"
                                         Height="{TemplateBinding ItemActualHeight}"/>-->
                                                            <Canvas.RenderTransform>
                                                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                                                            </Canvas.RenderTransform>
                                                        </Canvas>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>

                                        <Style x:Key="BarStyle" TargetType="Telerik_Windows_Controls_Charting:Bar">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="Telerik_Windows_Controls_Charting:Bar">
                                                        <Canvas>
                                                            <Rectangle x:Name="PART_DefiningGeometry"
                                                                Height="{TemplateBinding ItemActualHeight}"
                                                                Width="{TemplateBinding ItemActualWidth}"
                                                                RadiusX="3"
                                                                RadiusY="3"
                                                                Fill="{Binding DataItem.Kleur}" />
                                                            <Telerik_Windows_Controls_Charting:SeriesItemLabel x:Name="PART_SeriesItemLabel"
                                                                Content="{TemplateBinding SeriesItemLabelText}"
                                                                Visibility="{TemplateBinding SeriesItemLabelVisibility}"
                                                                Style="{TemplateBinding SeriesItemLabelStyle}"
                                                                Foreground="Black" FontWeight="Bold" FontSize="10" />
                                                            <Canvas.RenderTransform>
                                                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                                                            </Canvas.RenderTransform>
                                                        </Canvas>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Grid.Resources>


                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="35" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition MaxHeight="125" />
                                        <RowDefinition Height="15" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>

                                    <Grid x:Name="Row0" Grid.Row="0" >
                                        <TextBlock x:Name="TitelDashboard" HorizontalAlignment="Center" VerticalAlignment="Top" TextDecorations="Underline" FontSize="20" FontWeight="Bold" Foreground="White" />
                                        <Button x:Name="ReloadButton" Content="Reload data" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,5,120,0" Width="80" Height="26" Click="ReloadButton_Click" IsTabStop="False" Cursor="Hand" />
                                        <HyperlinkButton x:Name="LinkButton" Content="OEE-Reports" Foreground="White" FontSize="10" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,9,35,4" Width="73" IsTabStop="False" Cursor="Hand" />
                                    </Grid>

                                    <Grid x:Name="Row1" Grid.Row="1" >
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition MaxWidth="450" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Telerik_Windows_Controls:RadChart x:Name="pieChart1" Grid.Column="0" Margin="5,-30,0,80" />
                                        <Telerik_Windows_Controls:RadChart x:Name="radChart1" Grid.Column="1" />
                                    </Grid>

                                    <Grid x:Name="Row2" Grid.Row="2" Margin="0,-20,0,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Telerik_Windows_Gauge:RadGauge x:Name="rg1" MouseLeftButtonDown="rg1_MouseDown" Grid.Column="0" HorizontalAlignment="Left" Cursor="Hand" />
                                        <Telerik_Windows_Gauge:RadGauge x:Name="rg2" MouseLeftButtonDown="rg2_MouseDown" Grid.Column="1" HorizontalAlignment="Left" Cursor="Hand" />
                                        <Telerik_Windows_Gauge:RadGauge x:Name="rg3" MouseLeftButtonDown="rg3_MouseDown" Grid.Column="2" HorizontalAlignment="Left" Cursor="Hand" />
                                        <Telerik_Windows_Gauge:RadGauge x:Name="rg4" MouseLeftButtonDown="rg4_MouseDown" Grid.Column="3" HorizontalAlignment="Left" Cursor="Hand" />
                                        <Telerik_Windows_Gauge:RadGauge x:Name="rg5" MouseLeftButtonDown="rg5_MouseDown" Grid.Column="4" HorizontalAlignment="Left" Cursor="Hand" />
                                    </Grid>

                                    <Grid x:Name="Row3" Grid.Row="3" Margin="0,0,0,0" >
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock x:Name="tb1" Foreground="White" Grid.Column="0" HorizontalAlignment="Center" />
                                        <TextBlock x:Name="tb2" Foreground="White" Grid.Column="1" HorizontalAlignment="Center" />
                                        <TextBlock x:Name="tb3" Foreground="White" Grid.Column="2" HorizontalAlignment="Center" />
                                        <TextBlock x:Name="tb4" Foreground="White" Grid.Column="3" HorizontalAlignment="Center" />
                                        <TextBlock x:Name="tb5" Foreground="White" Grid.Column="4" HorizontalAlignment="Center" />
                                    </Grid>

                                    <Grid x:Name="Row4" Grid.Row="4">
                                        <Telerik_Windows_Controls:RadChart x:Name="lineChart1" />
                                    </Grid>
                                </Grid>
                            </telerik:RadFluidContentControl.LargeContent>
                        </telerik:RadFluidContentControl>
                    </telerikNavigation:RadTileViewItem.Content>
                </telerikNavigation:RadTileViewItem>

Kind regards,

Gertjan

[Tina Stancheva]

Hi Grtjn,

In your case you can use UserControls. For example you can define the dashboard in a UserControl and then simply add the UserControl to the RadTileViewItem.

I prepared a sample project illustrating the suggested approach. Please take a look at it and let me know if it works for you or if you need more info.

Greetings,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Grtjn]

Hi,

Thanks for the example!

I tried to do this for the smallconten and this worked fine.

But now i did this for the normallcontent and here i have a problem. I my normallcontent i have a piechart.
How can i refer to this piechart from my code behind, because for now it says:
Error 5 The name 'pieChartTile' does not exist in the current context C:\Users\gertjan.demeyer\Documents\Visual Studio 2008\Projects\DashBoard_Tile\DashBoard_Tile\MainPage.xaml.cs 217 17 DashBoard_Tile

Edit --> And can I call such a UserControl from the codebehind (c#) ?

Any solution for this?

kind regards,

Gertjan

[Tina Stancheva]

Hi Grtjn,

Let me suggest another approach that might work better in your case.

You can use the ItemTemplate property of the RadTileView to define the Header of the RadTileViewItems and the ContentTemplate property to define the content of each item. Thus you can use a DataTemplate and define the controls you need to display in every state of the RadTileViewItems. This DataTemplate will be applied to all RadTileViewItems and you won't have to copy your code for each TileItem.

I modified the project accordingly. Can you give it a try and let me know if this approach better suits your scenario.

Greetings,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Grtjn]

Thanks for all the information, but i found a working solution!

Kind regards,

Gertjan