Reuse XAML-code

[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

[Valeri Hristov]

Hi Grtjn,

You could put the content of your TileView item in a UserControl and add instances of this UserControl as content of the rest of the items.

Kind regards,
Valeri Hristov
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.