How Do I Build RadTileViewItems Dynamically

Hello SL R,

Adding items to the RadTileView control is very straightforward. Bwlow you can see a sample way of adding 6 new items to the control:

 

 

RadTileView tv = new RadTileView();
for (int i = 0; i < 6; i++)
{
RadTileViewItem item = new RadTileViewItem();
item.Header = String.Format("Item {0}", i);
tv.Items.Add(item);
}

 

Please let me know if you have any difficulties with that.

Sincerely yours,
Tihomir Petkov
the Telerik team

Thanks for your response. I should have been more specific about the problem. Basically I am trying to build dynamically (all the code in the tileview sample provided by Telerik). I got stuck on the animation part...

How to I add this part dynamically?

<telerikNavigation:RadFluidContentControl
                            telerikAnimation:AnimationManager.IsAnimationEnabled="False" SmallToNormalThreshold="235, 35"
                                                NormalToSmallThreshold="305, 149"
                                                NormalToLargeThreshold="315, 155"
                                                LargeToNormalThreshold="725, 345">
                            <telerikNavigation:RadFluidContentControl.SmallContent>

Hello SL R,

AnimationManager is used as an attached property and you should use this syntax to set it from the code:

RadFluidContentControl1.SetValue(

AnimationManager.IsAnimationEnabledProperty, false);

 

Please let us know if you have any other feedback on this control.

Sincerely yours,
Valentin.Stoychev
the Telerik team

I am sorry, I did not get it.

How do we tie together the two pieces

RadTileView tv = new RadTileView();
for (int i = 0; i < 6; i++)
{
RadTileViewItem item = new RadTileViewItem();
item.Header = String.Format("Item {0}", i);
tv.Items.Add(item);
}
        and

RadFluidContentControl1.SetValue(

AnimationManager.IsAnimationEnabledProperty, false);

---------------------------------------------------------------------------------
Probably for the benefit of every one, you could post an example or code..
Basically I am trying to do is to have the same result (as below)   genrated by the code.



<telerikNavigation:RadTileViewItem >
                    <telerikNavigation:RadTileViewItem.Header>
                        <TextBlock Text="BMW 6 Series" Style="{StaticResource HeaderTitle}" />
                    </telerikNavigation:RadTileViewItem.Header>

                    <telerikNavigation:RadTileViewItem.Content>
                        <telerikNavigation:RadFluidContentControl telerikAnimation:AnimationManager.IsAnimationEnabled="False" SmallToNormalThreshold="235, 35"
                                                NormalToSmallThreshold="305, 149"
                                                NormalToLargeThreshold="315, 155"
                                                LargeToNormalThreshold="725, 345">
                            <telerikNavigation:RadFluidContentControl.SmallContent>
                                <TextBlock Text="BMW 6 Series Coupe" Style="{StaticResource SmallBox}" />
                            </telerikNavigation:RadFluidContentControl.SmallContent>
                            <telerikNavigation:RadFluidContentControl.Content>
                                <Image Source="/Images/Normal/car1.png" HorizontalAlignment="Center" Height="130" Width="291" VerticalAlignment="Center" />
                            </telerikNavigation:RadFluidContentControl.Content>
                            <telerikNavigation:RadFluidContentControl.LargeContent>
                                <Grid Width="730" Height="350">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Image Source="/Images/Large/car3.png"
                                           Height="156" Width="715" VerticalAlignment="Top"
                                           Grid.ColumnSpan="3" Margin="16 16 16 0" />
                                    <Border BorderBrush="#c9cdd2" Margin="10 190 10 20" VerticalAlignment="Top" BorderThickness="0 1 0 0" Grid.ColumnSpan="3">
                                        <Border BorderBrush="#ffffff" BorderThickness="0 1 0 0" />
                                    </Border>
                                    <Image Source="/Images/text.png" HorizontalAlignment="Center"
                                           Height="106" Width="695" VerticalAlignment="Top"
                                           Grid.Row="1" Margin="0 15 0 0" />
                                </Grid>
                            </telerikNavigation:RadFluidContentControl.LargeContent>
                        </telerikNavigation:RadFluidContentControl>
                    </telerikNavigation:RadTileViewItem.Content>
                </telerikNavigation:RadTileViewItem>

Hello SL R,

I see now what you mean. But having all this code generated in the code behind is a lot of code. you will need to instantiate each element separately.

What is your scenario? Can you declare your code in a separate user control and then to instantiate just the user control in the code behind?

All the best,
Valentin.Stoychev
the Telerik team

Thanks for your prompt response.

Agreed that it is lot of code to generate. In our scenario. The NUMBER of  RadTileViewItems and the contents (both small and large) are known only at runtime, obtained from the service into a collection.

There could be anywhere between 2-8 RadTileViewItems that need to be generated based on User. The contents of each of the RadTileViewItem is also dependent on User. Based on this scenario, what is the best way to go about?

The code has to be written at least once (either in .xaml or .xaml.cs). Infact, the code would be less if RadTileViewItems are generated dynamically. As of Now the example Telerik has provided, in.xaml the code is repeated 6 times(once for each of the RadTileviewItem - Except for Content and Text, the code is repeated for everything else-Border, Grid, Animation, NormaltoSmallThreshold etc ).  A better way could be to write one common code in the .cs and then loop there the collection to call a method(that creates RadTileViewItem). the Method could  take paramters(like Content, text, image etc).

This scenario is like a dynamically generated RadTreeViewItem.

Hope you would be able to guide me in the right direction.

Thanks.

Glad to be using Telerik Controls.

We have similar situation. The need to have a variable number of tiles. Is there any documentation for this control? What events are possible for this Control? State / Size Changed?

Could you give us an example of Instantiating User Control, that is based on TileView Control?

Hello all,

Please find attached a project where tile views are created dynamicaly.
Let us know if this works for you. We are working on the documentation and it will be available with the official release of the product.

Please let us know if you have any other feedback on the Beta.

Thanks!

Sincerely yours,
Valentin.Stoychev
the Telerik team

Using C# How to Set a maximum number of rows or columns ? for TileView
How to position the Minimized Tiles?
How to set the LargeContent , Small Content?
what is difference between Content , LargeContent and Small Content?

An example using C# is appreciated.

Hello Deepak,

Please see my comments inline:

Using C# How to Set a maximum number of rows or columns ? for TileView
>> You can use the MaxColumns/MaxRows properties.

How to position the Minimized Tiles?
>> Use the MinimizedItemsPosition property.

How to set the LargeContent , Small Content?
what is difference between Content , LargeContent and Small Content?
>> These properties are not part from the Tile View control. In the example we are using the Rad Fluid control. This control has 3 content properties - SmallContent, Content and LargeContent. According to the size it can use, the proper content will be displayed. In our demo when a pane is minimized - it is displaying its SmallContent, when a pane is restored - it is using its Content property and when a pane is maximized it is using the LargeContent.


Best wishes,
Valentin.Stoychev
the Telerik team

Hi,

To your comment..

These properties are not part from the Tile View control. In the example we are using the Rad Fluid control. This control has 3 content properties - SmallContent, Content and LargeContent. According to the size it can use, the proper content will be displayed. In our demo when a pane is minimized - it is displaying its SmallContent, when a pane is restored - it is using its Content property and when a pane is maximized it is using the LargeContent.

I would like to achieve the same results as in the demo version (When Minimized - Small Content, Normal Size - Content  , When Maximized - Large Content).

But the code below shows always sets the content to Large, No matter what the state of the tile is (Maximzed, Restored/Normal or Minimized). When the statement  " fluid.SetValue(RadFluidContentControl.LargeContentProperty, ltx.Text);" is removed, it sets the contents to normal when statement fluid.SetValue(RadFluidContentControl.ContentProperty, ctx.Text); is removed, it always sets to Small content.


for (int i = 0; i < 6; i++)
            {
                RadTileViewItem item = new RadTileViewItem();
                item.Header = String.Format("Item {0}", i);
                RadFluidContentControl fluid = new RadFluidContentControl();
                
                TextBlock stx = new TextBlock();
                TextBlock ltx = new TextBlock();
                TextBlock ctx = new TextBlock();
                stx.Text = i.ToString() + "small";
                ltx.Text = i.ToString() + "large ";
                ctx.Text = i.ToString() + "content ";
                
               
                fluid.SetValue(AnimationManager.IsAnimationEnabledProperty, false);
                fluid.SetValue(RadFluidContentControl.SmallContentProperty, stx.Text);
                fluid.SetValue(RadFluidContentControl.LargeContentProperty, ltx.Text);
                fluid.SetValue(RadFluidContentControl.ContentProperty, ctx.Text);
              
                
                item.SetValue(RadFluidContentControl.ContentProperty, fluid);
                
                
                RadTileView1.Items.Add(item);
                
                
                  }

Hi Surender Reddy,

You need to define the sizez when the small/norma and large content is displayed. This is done by this code:
<telerikNavigation:RadFluidContentControl 
            SmallToNormalThreshold="291, 130"
            NormalToSmallThreshold="292, 131"
            NormalToLargeThreshold="730, 350"
            LargeToNormalThreshold="731, 351">

These four properties define the behavior of the fluid control and when it will change its state from one to another. For example the SmallToNormalThreshold property defines the size after which the control will go from small to normal state.

Please let us know how it goes.

Greetings,
Valentin.Stoychev
the Telerik team

Thanks for your prompt response.

Is this what I should be doing? What   value  should be assigned to NormalToLargeThresholdProperty ??, based on the example you posted. Does it take two int values or a string?

                fluid.SetValue(RadFluidContentControl.NormalToLargeThresholdProperty,??);
                fluid.SetValue(RadFluidContentControl.NormalToSmallThresholdProperty, ??);

Note : The RadTileVirewItems and its contents are to be generated in .cs

Regards.

              

Hi Surender Reddy,

Yes this is what you should do.

The *Threshold properties are of type Size. Here is the correct syntax:

 

double width = 300;
double height = 300;
RadFluidContentControl1.NormalToLargeThreshold = new Size(width, height);

 

Best wishes,
Valentin.Stoychev
the Telerik team

Using C# How to Set a maximum number of rows or columns ? for TileView
>> You can use the MaxColumns/MaxRows properties


I have around 8 tiles but I want to arrange in 3 rows and 3 columns.
Currently I am getting 2 rows and 4 columns.

Please provide an example where I can always set the max coulumns to 3.

Hi Deepak,

Just set the MaxColumns property to 3.

All the best,
Valentin.Stoychev
the Telerik team

Hi Valentin,

I tried as suggested but does not work . Also I would like to know how can change the animation for the tiles when maxmized or minimized.

I have following code for the TileView

<

 

UserControl x:Class="TelerikTileView.MainPage"

 

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

 

xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 

 

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

 

xmlns

 

:telerikAnimation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"

 

 

xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation">

 

 

 

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto" Padding="0" BorderThickness="0" >

 

 

 

<telerikNavigation:RadTileView x:Name="MainTileView"

 

 

Width="950"

 

 

VerticalAlignment="Stretch"

 

 

HorizontalAlignment="Stretch"

 

 

UseLayoutRounding="True"

 

 

MaxColumns="2"

 

 

MinimizedColumnWidth="300"

 

 

Grid.Column="1"

 

 

Grid.Row="1"

 

 

>

 

 

 

</telerikNavigation:RadTileView>

 

 

 

</ScrollViewer>

 

</

 

UserControl>

 

Hello Deepak,

Thank you for reporting this. We will fix it for the official release. I updated your Telerik points.

As for the animation - you can use these properties:

RadTileView1.ReorderingEasing =

new System.Windows.Media.Animation.ElasticEase();

 

RadTileView1.ResizingEasing =

new System.Windows.Media.Animation.ExponentialEase();

 

Best wishes,
Valentin.Stoychev
the Telerik team

Hi,

Based on the suggestion
http://www.telerik.com/community/forums/silverlight/tileview/how-do-i-build-radtileviewitems-dynamically.aspx#955490
 I have made the changes, but still I am not able to see small and normal content. It always shows only large contents.

Could you please check, if I am doing anything incorrectly?

The Basic idea is achieve same navigation and tiling as in the example provided. In actual production environment, the contents  could be different for each of large, normal or small tile view (it could be a grid, a chart, or a list.. .)

here is the sample code I have.
.xaml

<UserControl x:Class="TView3_dynamic1.MainPage"
   xmlns:UserControl="clr-namespace:Telerik.Windows.QuickStart;assembly=Telerik.Windows.QuickStart"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:telerikAnimation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
>
    <UserControl.Resources>
        <Style  TargetType="TextBlock" x:Key="HeaderTitle">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Padding" Value="0" />
        </Style>
        <Style  TargetType="TextBlock" x:Key="SmallBox">
            <Setter Property="Foreground" Value="#0b4366" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Padding" Value="10 0" />
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <Border Margin="10"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
            <telerikNavigation:RadTileView  x:Name="RadTileView1"
                                                 Width="1000"
                                                 Height="800"
                                                 Grid.Column="1"
                                                 Grid.Row="1"
                                                IsItemsAnimationEnabled="True"
                                            >

            </telerikNavigation:RadTileView>
        </Border>
    </Grid>
</UserControl>


.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Animation;


namespace TView3_dynamic1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {

            RadTileView1.MaxColumns = 2;
            for (int i = 0; i < 6; i++)
            {
                RadTileViewItem item = new RadTileViewItem();
                item.Header = String.Format("Item {0}", i);
                RadFluidContentControl fluid = new RadFluidContentControl();
                
                TextBlock stx = new TextBlock();
                TextBlock ltx = new TextBlock();
                TextBlock ctx = new TextBlock();
                stx.Text = i.ToString() + "small";
                ltx.Text = i.ToString() + "large ";
                ctx.Text = i.ToString() + "content ";


                double width = 235;
                double height = 25;

                fluid.SmallToNormalThreshold = new Size(width, height);
                width = 305 ;
                    height = 149;
                fluid.NormalToSmallThreshold = new Size(width, height);
                width = 315 ;
                    height = 155;
                fluid.NormalToLargeThreshold = new Size(width, height);
                width = 725 ;
                    height = 345;
                fluid.LargeToNormalThreshold = new Size(width, height);
                


               
                fluid.SetValue(AnimationManager.IsAnimationEnabledProperty, false);
                fluid.SetValue(RadFluidContentControl.SmallContentProperty, stx.Text);
                fluid.SetValue(RadFluidContentControl.LargeContentProperty, ltx.Text);
                fluid.SetValue(RadFluidContentControl.ContentProperty, ctx.Text);
              
                
                item.SetValue(RadFluidContentControl.ContentProperty, fluid);


                RadTileView1.Items.Add(item);
                   }
        }
 
    }
}
 

Regards.

Thanks Valentino,

I am trying to user Office Blue theme and Tile VIew is not supporting it and I am getting AE_PARSER_ERROR.
Please confirm what Themes Tile View supports. Is it possible to modify the existing xaml files with Beta to make it work.

Hi Deepak,

Yes- the TileView has those themes implemented. you can see on the demo site:
http://demos.telerik.com/silverlight/beta/#TileView/FirstLook that the themes are changing.

Please check how you change the theme, let us know if you still have problems.

Sincerely yours,
Valentin.Stoychev
the Telerik team

I've slightly modified your example to create Tile Items not from constructor, but from the Button click event


Now when I click button, it will mess all tiles (in my case first 2 tiles are maximized and other 5 are all around the screen)

Another problem:
if in MyTileView.xml I replaced:


with


it will always show LargeContent even when tile is minimized.

Is it a bug or I'm doing something wrong ?

Hello Serhiy,

Both of the problems you encountered are bugs in the currently available beta version of the RadTileView control. We are aware of them and they will be fixed for the upcoming Q3 release, which is available in the beginning of November.

Thank you for your feedback.

Regards,
Tihomir Petkov
the Telerik team

Thank you for the quick response. It perfectly fits into our release schedule.

Q3 release fixed the second problem, but first one is still there.
If I create tiles not from constructor but from the button click event it will mess all the tiles unless I click any tile.
After that it will work as expected.

PS.

Here's 2 screens:
Screens

1st - tiles created dynamically on some event.
2nd - after clicking on any tile, everything is ok.

Hello Serhiy,

We fixed a bug related to adding items in runtime but we are not aware of any problems related to that scenario in the latest Q3 release. Can you please provide a sample that demonstrates the issue you observe? From the screenshots I can see that you use the TileView in a bigger application, but is the bug reproducible in a simpler environment? Maybe something in the application is triggering the problem.

I will be able to investigate the problem as soon as I am able to reproduce it.

Greetings,
Tihomir Petkov
the Telerik team

Hi Genius,

Thanks for all your help...

We are having a small issue in the Telerik TileView.....

We are having a Parent TileView & a Nested TileView in one of the ParentTiles.............

When we restore the Parent Tileview ........ the Tiles in the Nested TileViews remain in the Restored State.......... so all the Tiles are not visible......... Can we make it so that..... when the Parent TileView is restored..........  all the Nested Tiles should appear in Minimised View........... (can this be made as a default property)

Attached Image sample.......... of What we have & What we want to achieve.........
_______________________________________________________________________

Another issues we are facing is...........

We are having a Tab on top of the TileView, which corresponds to each tile in the Parent TileView ...........

When we click on the first tab (Newsletter)......... we have set the Newsletter Tile to open in Maximised state........... after this if we navigate within the Tileview (so it gets shuffled etc)........... and then click on the Second Tab (Topics) and click again on the First Tab the Shuffled view returns............. But we want it to bring the unshuffled TileView as it was when we clicked on the First Tab afresh.........

Can this be done and set as a default property for all Tiles ..........


Expecting a detailed & quick reply............. as always............... Since we are in a lot of pressure now....................

Thanks a million in advance,
Thendral

Hello Thendral,

"all the Nested Tiles should appear in Minimised View"
A TileViewItem can be in minimized state only when there is a maximized tile. So, it is not possible to have all tiles in  a TileView in minimized state - there needs to be a maximized tile as well. From the screenshots you provided I can see that the tiles in the nested TileView are restored in both cases, the only difference being that on one of the screenshots there is only one row of restored tiles. Can you please explain better what exactly is the problem that the screenshots should demonstrate?

"(can this be made as a default property)"
Please explain what do you mean by "this". If you mean the state of the TileViewItems, there is already a TileState property that can be set.

I also couldn't understand your second question. What do you mean when you say that the nested TileView "gets shuffled"? In case you want to get it back to the initial restored state, then you have to set the TileState property of the maximized tile to "restored".

Sincerely yours,
Tihomir Petkov
the Telerik team

Hi Genius,

The First Question.....

 

Both the screenshots show the Tiles in the Nested TileView in Restored state, but in the first screen ........ there are only 4 tiles, while the actual number of tiles is 7... How can we make the 7 tiles to appear in 2 rows, let it be in the restored view only ......... like in the 2nd Screenshot.....


2nd Question.....

I have attached an image with comments on it........... Action 1, Action 2........ so you can get it............. hope so..........

Thanks........

Hi Thendral,

I was not able to reproduce the issue from your first question. Can you please provide a sample project that demonstrates it?

As for your second question, it seems from the screenshots that you are using the TabControl only to change the currently maximized tile and you are using the same TileView. Am I correct? If that is the case, do you see any benefits of using the TabControl instead of a row of properly styled buttons?

If you want to use the TabControl with TileViews as the content of each tab, there should be no problems. I tested this scenario as well, and the TileViews are in the same state after you return to their tab. 

Greetings,
Tihomir Petkov
the Telerik team

I am seeing the same behavior described by Serhiy on October 22. That is, when tiles are added programmatically, the layout is not correct until one of the tiles is maximized. The code for a simple example follows.

MainPage.xaml:

and MainPage.xaml.cs

Any assistance/suggestions you could provide as to the best way to fix the problem would be greatly appreciated.
Thank you.

Hi Heather,

I was indeed able to reproduce the incorrect initial rendering using the code you provided. I will investigate the issue immediately and hopefully the bug will be resolved for the service pack next week. Thank you for reporting the problem. I added 1000 Telerik points to your account.

Greetings,
Tihomir Petkov
the Telerik team

Hi all,
Is the issue described above already resolved? I´ve installed Q3 SP1, but I´m experimenting the same behavior.
I´ve created a header template and a content template. I fill RadTileView using the property ItemSource, but the first time the page is loaded the layout is not correct until one of the tiles is maximized.

Thanks

I am having the same issue as mentioned above about not rendering correctly when tileviewitems are added programatically with the new Q3 SP1

Hi Dheeraj Ramaswamy,

This is scheduled for fixing for SP2 release - mid-January.

Sincerely yours,
Valentin.Stoychev
the Telerik team

Thanks for the information. Will eagerly wait for the update. As always you guys rock providing such excellent RAD controls !!!!!!!!!!!

hi,
the example works fine but is it also possible to bind a usercontrol to each contenttype? i have tried to bind another usercontrol to each contenttype but i'm getting an exception saying the control was already bind to another control.

my xaml of customtileview:
<UserControl x:Class="SLChemserv.Custom.SLControls.TileView.CustomTileView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls">
    <Grid x:Name="RootElement">
        <telerikNavigation:RadFluidContentControl  
                                                SmallToNormalThreshold="291, 130"
                                                NormalToSmallThreshold="292, 131"
                                                NormalToLargeThreshold="730, 350"
                                                LargeToNormalThreshold="731, 351">
            <telerikNavigation:RadFluidContentControl.SmallContent>
                <Grid x:Name="grid_small"></Grid>                
            </telerikNavigation:RadFluidContentControl.SmallContent>
            <telerikNavigation:RadFluidContentControl.Content>
                <Grid x:Name="grid_normal"></Grid>
            </telerikNavigation:RadFluidContentControl.Content>
            <telerikNavigation:RadFluidContentControl.LargeContent>
                <Grid x:Name="grid_large"></Grid>
            </telerikNavigation:RadFluidContentControl.LargeContent>
        </telerikNavigation:RadFluidContentControl>
    </Grid>
</UserControl>
__________________________________________________________________________
code behing:
public partial class CustomTileView : UserControl
    {
        public CustomTileView()
        {
            InitializeComponent();
            RootElement.DataContext = this;
        }

        public UIElement TileContent
        {
            get { return (UIElement)GetValue(TileContentProperty); }
            set
            {
                SetValue(TileContentProperty, value);
                grid_large.Children.Add(value);
                grid_normal.Children.Add(value); // ERROR
                grid_small.Children.Add(value);
            }
        }

        // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TileContentProperty =
            DependencyProperty.Register("TileContent", typeof(UIElement), typeof(CustomTileView), null);
    }
________________________________________________
my value is always another usercontrol. any suggestions? thx in advance

Hello Monika Kogler,

Please take a look at the project attached to your support ticket - ID:327841.

Let us know if it works for you or if you need more info.

Best wishes,
Tina Stancheva
the Telerik team

I have the same problem and I can't find the ticket. Can you please publish the project here?

Hi Shlomy,

Thank you for contacting us.

In Silverlight, only one copy of a visual element can exist in the visual tree i.e. parent to child relationship is 1 to 1. Therefore to make your scenario work, you have to have 3 separate TextBlocks for example block_large, block_normal and block_small:

However, if your scenario requires you to use the same UserControl in the different contents for the TileView states, you can take a look at the attached project, where no large view is defined for the RadTileView, but only small and normal.

I hope this info will help you. Please let us know if we can further assist you.

Sincerely yours,
Tina Stancheva
the Telerik team

how can I display eight different images as returned from my service to a tile-view using mvvm patten.my aim is to have tile view in the xaml and bind the tileview to objects in the viewmodel.Thanks

Hi Kamau,

I am not sure how you store the images on the server and how the service returns them. However, you can bind the RadTileView ItemsSource property to a business collection of items. You can also define an:

• ItemTemplate - a DataTemplate that determines what information should be displayed in the Header of each tile
• ContentTemplate - a DataTemplate that determines what information should be displayed in the content part of each tile.

In your case in the ContentTemplate you can display the images returned by the service. Although we don't have an example demonstrating exactly the described scenario, you can examine the attached sample as it can get you started.

Regards,
Tina Stancheva
Telerik