Same components in tileviewitems

5 posts, 1 answers
  1. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 22 Apr 2010 Link to this post

    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
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Apr 2010 Link to this post

    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.
  3. DevCraft banner
  4. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 26 Apr 2010 Link to this post

    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
  5. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Apr 2010 Link to this post

    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.
  6. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 30 Apr 2010 Link to this post

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

    Kind regards,

    Gertjan
Back to Top
DevCraft banner