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

How Do I Build RadTileViewItems Dynamically

42 Answers 1013 Views

TileView

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

42 Answers, 1 is accepted

answered on 22 Sep 2009, 01:59 PM

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>

answered on 24 Sep 2009, 06:39 AM

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>

answered on 25 Sep 2009, 02:02 AM

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.

answered on 28 Sep 2009, 07:24 AM

dynamictileview.zip

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

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 29 Sep 2009, 06:55 AM

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

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 29 Sep 2009, 08:18 AM

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);


                  }

answered on 29 Sep 2009, 08:42 AM

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

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 29 Sep 2009, 11:51 PM

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">

<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>

answered on 30 Sep 2009, 08:02 PM

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.

answered on 22 Oct 2009, 03:15 PM

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

    
            private void Button_Click(object sender, System.Windows.RoutedEventArgs e)  
        
                    {  
        
                        for (int i = 0; i < 7; i++)  
        
                        {  
        
                            RadTileView1.Items.Add(new RadTileViewItem()  
        
                            {  
        
                                Header = String.Format("TileItem {0}", i),  
        
                                Content = new MyTileView() { Text = String.Format("Long Text Content Long Text Content {0}", i) }  
        
                            });  
        
                        }  
        
                    }

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:

    
                        <telerikNavigation:RadFluidContentControl.LargeContent> 
        
                                <TextBlock TextWrapping="Wrap" Text="{Binding Text}" FontSize="36" /> 
        
                        </telerikNavigation:RadFluidContentControl.LargeContent>

with

    
                        <telerikNavigation:RadFluidContentControl.LargeContent> 
        
                                <TextBox AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Margin="5" /> 
        
                        </telerikNavigation:RadFluidContentControl.LargeContent>

it will always show LargeContent even when tile is minimized.

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

answered on 09 Nov 2009, 08:45 PM

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

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 25 Nov 2009, 07:58 AM

parenttileview-restored-view-whatwewant.jpg

parenttileview-restored-view-whatwehave.jpg

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

answered on 25 Nov 2009, 09:15 AM

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

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 25 Nov 2009, 10:15 AM

tileview-firstpage.jpg

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........

answered on 30 Nov 2009, 01:31 PM

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

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 30 Nov 2009, 09:11 PM

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:

    
            <UserControl x:Class="DynamicTileView.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:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" 
        
                         xmlns:local="clr-namespace:DynamicTileView" 
        
                mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">  
        
              <Grid x:Name="LayoutRoot">  
        
                    <Grid.RowDefinitions> 
        
                        <RowDefinition /> 
        
                        <RowDefinition Height="Auto" /> 
        
                    </Grid.RowDefinitions> 
        
                    <Button Click="Button_Click" Grid.Row="1" Content="Push me" Background="Red" Margin="10" /> 
        
                    <telerikNavigation:RadTileView x:Name="RadTileView1" Grid.Row="0" /> 
        
                </Grid> 
        
            </UserControl>

and MainPage.xaml.cs

    
            using System;  
        
            using System.Windows;  
        
            using System.Windows.Controls;  
        
            using Telerik.Windows.Controls;  
        
            namespace DynamicTileView  
        
            {  
        
                public partial class MainPage : UserControl  
        
                {  
        
                    private int numberOfTileViews = 4;  
        
                    public MainPage()  
        
                    {  
        
                        InitializeComponent();              
        
                    }  
        
                    private void Button_Click(object sender, RoutedEventArgs e)  
        
                    {  
        
                        for (int i = 0; i < numberOfTileViews; i++)  
        
                        {  
        
                            RadTileView1.Items.Add(new RadTileViewItem()  
        
                            {  
        
                                Header = String.Format("TileItem {0}", i),  
        
                                Content = new MyTileView() { Text = String.Format("Long Text Content Long Text Content {0}", i) }  
        
                            });  
        
                        }  
        
                    }  
        
                }  
        
            }

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

answered on 13 Jul 2010, 04:10 PM

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

answered on 27 Jul 2010, 04:54 PM

244593-tileviewusercontrols.zip

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:

public partial class MainPage : UserControl

{

private int numberOfTileViews = 6;

public MainPage()

{

InitializeComponent();

for (int i = 0; i < numberOfTileViews; i++)

{

RadTileViewItem item = new RadTileViewItem { Header = String.Format("TileItem {0}", i) };

MyTileView view = new MyTileView();

TextBlock block_large = new TextBlock { Text = "TEST_LARGE" };

TextBlock block_normal = new TextBlock { Text = "TEST_NORMAL" };

TextBlock block_small = new TextBlock { Text = "TEST_SMALL" };

view.TileContent = new UIElement[3] { block_large, block_normal, block_small };

item.Content = view;

RadTileView1.Items.Add(item);

}

public partial class MyTileView : UserControl

{

public MyTileView()

{

InitializeComponent();

RootElement.DataContext = this;

}

public UIElement[] TileContent

{

set

{

grid_large.Children.Add(value[0]);

grid_normal.Children.Add(value[1]);

grid_small.Children.Add(value[2]);

}

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

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

answered on 25 Mar 2014, 06:01 PM

TileViewDataBinding.zip

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

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

How Do I Build RadTileViewItems Dynamically

42 Answers, 1 is accepted