This is a migrated thread and some comments may be shown as answers.

Reuse XAML-code

1 Answer 29 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Grtjn
Top achievements
Rank 1
Grtjn asked on 23 Apr 2010, 09:12 AM

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

1 Answer, 1 is accepted

Sort by
0
Valeri Hristov
Telerik team
answered on 26 Apr 2010, 04:40 PM
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.
Tags
General Discussions
Asked by
Grtjn
Top achievements
Rank 1
Answers by
Valeri Hristov
Telerik team
Share this question
or