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

How Do I Build RadTileViewItems Dynamically

42 Answers 866 Views
TileView
This is a migrated thread and some comments may be shown as answers.
SL R
Top achievements
Rank 1
SL R asked on 22 Sep 2009, 06:19 AM
Thanks for adding the much long awaited feature.
How do I create RadTileViewItems on the fly? Suppose I want to add the sample 6 RadTileViewItems (for example using a  for loop).

Regards.

42 Answers, 1 is accepted

Sort by
0
Tihomir Petkov
Telerik team
answered on 22 Sep 2009, 09:05 AM
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

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.
0
SL R
Top achievements
Rank 1
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>
0
Valentin.Stoychev
Telerik team
answered on 23 Sep 2009, 06:39 AM
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

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.
0
SL R
Top achievements
Rank 1
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>




0
Valentin.Stoychev
Telerik team
answered on 24 Sep 2009, 11:39 AM
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

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.
0
SL R
Top achievements
Rank 1
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.
0
Surender Reddy
Top achievements
Rank 1
answered on 26 Sep 2009, 08:56 AM
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?






0
Valentin.Stoychev
Telerik team
answered on 28 Sep 2009, 07:24 AM
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.
0
Deepak
Top achievements
Rank 1
answered on 29 Sep 2009, 05:48 AM

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.
0
Valentin.Stoychev
Telerik team
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.
0
Surender Reddy
Top achievements
Rank 1
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);
                
                
                  }


0
Valentin.Stoychev
Telerik team
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.
0
Surender Reddy
Top achievements
Rank 1
answered on 29 Sep 2009, 09:12 AM
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.

              

0
Valentin.Stoychev
Telerik team
answered on 29 Sep 2009, 09:49 AM
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

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.
0
Deepak
Top achievements
Rank 1
answered on 29 Sep 2009, 02:36 PM

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.


0
Valentin.Stoychev
Telerik team
answered on 29 Sep 2009, 09:02 PM
Hi Deepak,

Just set the MaxColumns property to 3.

All the best,
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.
0
Deepak
Top achievements
Rank 1
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">

 

 

 

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

 

0
Valentin.Stoychev
Telerik team
answered on 30 Sep 2009, 05:42 PM
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

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.
0
Surender Reddy
Top achievements
Rank 1
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.
0
Deepak
Top achievements
Rank 1
answered on 01 Oct 2009, 05:00 AM
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.

0
Valentin.Stoychev
Telerik team
answered on 01 Oct 2009, 07:34 AM
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

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.
0
Serhiy
Top achievements
Rank 1
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 ?
0
Tihomir Petkov
Telerik team
answered on 23 Oct 2009, 11:32 AM
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

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.
0
Serhiy
Top achievements
Rank 1
answered on 23 Oct 2009, 01:30 PM
Thank you for the quick response. It perfectly fits into our release schedule.
0
Serhiy
Top achievements
Rank 1
answered on 06 Nov 2009, 05:51 PM
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.
0
Tihomir Petkov
Telerik team
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.
0
Thendral Perumal
Top achievements
Rank 1
answered on 25 Nov 2009, 07:58 AM
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




0
Tihomir Petkov
Telerik team
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.
0
Thendral Perumal
Top achievements
Rank 1
answered on 25 Nov 2009, 10:15 AM

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

0
Tihomir Petkov
Telerik team
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.
0
Heather Kyle
Top achievements
Rank 2
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.
0
Tihomir Petkov
Telerik team
answered on 03 Dec 2009, 06:01 PM
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

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.
0
Gema
Top achievements
Rank 1
answered on 29 Dec 2009, 05:51 PM
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
0
Dheeraj Ramaswamy
Top achievements
Rank 2
answered on 29 Dec 2009, 07:50 PM
I am having the same issue as mentioned above about not rendering correctly when tileviewitems are added programatically with the new Q3 SP1
0
Valentin.Stoychev
Telerik team
answered on 30 Dec 2009, 08:51 AM
Hi Dheeraj Ramaswamy,

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

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.
0
Dheeraj Ramaswamy
Top achievements
Rank 2
answered on 30 Dec 2009, 12:37 PM
Thanks for the information. Will eagerly wait for the update. As always you guys rock providing such excellent RAD controls !!!!!!!!!!!
0
Monika Kogler
Top achievements
Rank 1
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
0
Tina Stancheva
Telerik team
answered on 16 Jul 2010, 02:54 PM
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
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
0
Shlomy
Top achievements
Rank 1
answered on 25 Jul 2010, 10:51 AM
I have the same problem and I can't find the ticket. Can you please publish the project here?
0
Tina Stancheva
Telerik team
answered on 27 Jul 2010, 04:54 PM
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
0
kamau
Top achievements
Rank 1
answered on 24 Mar 2014, 07:54 AM
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
0
Tina Stancheva
Telerik team
answered on 25 Mar 2014, 06:01 PM
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.

 
Tags
TileView
Asked by
SL R
Top achievements
Rank 1
Answers by
Tihomir Petkov
Telerik team
SL R
Top achievements
Rank 1
Valentin.Stoychev
Telerik team
Surender Reddy
Top achievements
Rank 1
Deepak
Top achievements
Rank 1
Serhiy
Top achievements
Rank 1
Thendral Perumal
Top achievements
Rank 1
Heather Kyle
Top achievements
Rank 2
Gema
Top achievements
Rank 1
Dheeraj Ramaswamy
Top achievements
Rank 2
Monika Kogler
Top achievements
Rank 1
Tina Stancheva
Telerik team
Shlomy
Top achievements
Rank 1
kamau
Top achievements
Rank 1
Share this question
or