Hide a TileViewItem while dynamically creating them

[HDD]

I am using RadTileView Silverklight control in VS 2010 with SL 4.

I need to create the TileViewItems (lets say 8 Tiles) dynamically, as well as have the ability to decide upon (based on users roles) which Tiles to Hide before you see them on the UI.

I mean, the code always creates 8 Tiles, but then the logic hides away 4 Tiles so that you see only 4 when the page gets displayed.

Is there a way to implement this, or is it the better way to go about implementing this scenario.

Any help would be highly appreciated.

Thanks.

[Kiril Stanoev]

Hello Neeraj,

There are various path you can take to accomplish this task. I'm attaching a sample project that offers one possible solution. Have a look at it and let me know how it works for you. If you have additional questions or comments, do not hesitate to contact us.

Regards,
Kiril Stanoev
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.

[HDD]

Hi Kiril,

Thanks for providing me with a sample project. That definitely helps.

Looks like you have very much the same thing that I was looking for. 

But I think I missed to mention in my earlier post and since then have started to use the Prism regions within my RadTileViewItems (by following another thread).

Here is what it looks like now:

************************************************************************************************************************

 <telerikNavigation:RadTileView MinimizedColumnWidth="450" MinimizedItemsPosition="Left" >

            <telerikNavigation:RadTileViewItem Header="My Orders" Style="{StaticResource myTileViewItemStyleResource}">

                <telerik:RadFluidContentControl 

SmallToNormalThreshold="480, 240" NormalToSmallThreshold="480, 240"

NormalToLargeThreshold="480, 240" LargeToNormalThreshold="480, 240">

                    <telerik:RadFluidContentControl.SmallContent>

                        <ItemsControl   Regions:RegionManager.RegionName="MyOrdersRegion" 

                                        Margin="5,5,5,5" BorderThickness="1">

                        </ItemsControl>

                    </telerik:RadFluidContentControl.SmallContent>

                    <telerik:RadFluidContentControl.Content>

                        <ItemsControl   Regions:RegionManager.RegionName="MyOrdersRegion" 

                                        Margin="5,5,5,5" BorderThickness="1">

                        </ItemsControl>

                    </telerik:RadFluidContentControl.Content>

                    <telerik:RadFluidContentControl.LargeContent>

                        <ItemsControl   Regions:RegionManager.RegionName="MyOrdersRegion" Background="Yellow"  Margin="5,5,5,5"

                                            BorderThickness="1">

                        </ItemsControl>

                    </telerik:RadFluidContentControl.LargeContent>

                </telerik:RadFluidContentControl>

            </telerikNavigation:RadTileViewItem>

</telerikNavigation:RadTileView>

************************************************************************************************************************

This is code for one tileviewItem. I have similar code for 7 other items defining their own regions: MyMailRegion, MyContacts, MyPendingTasksRegion, etc. Please note that I am also using the RadFluidContentControl to control 3 different states.

I appreciate the code that you have shared, but now I am wondering, how do I fit all this into the Prism "Region" scenario.

Any help with this.

Thanks a bunch for all the help.

[Kiril Stanoev]

Hi Neeraj,

Sorry for the late reply. I've prepared a small project that shows how to use TileView and Prism. This project does not take its data from WCF service, so I'm leaving this to you to determine how to integrate it, depending on your scenario. Let me know if you have questions on the topic.

PS: The solution is called OutlookBarAndPrism but it is actually demonstrating TileView and Prism, since I reused an old example.

Best wishes,
Kiril Stanoev
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.

[HDD]

Hi Kiril,

Thanks for the example, appreciate much for this.

I was extending this example into my scenario when I realized that there were a couple of things that I needed to understand.

Can you throw some light on how and where the "Title Header" of each of the Tiles are getting set.

I mean how do you display the "Contact", "Mail" and "Pending Tasks" in the header area and is there a way to format, align this text.

I have tried commenting the code as below for each ViewModels i.e, "ContactsViewModel", "MailViewModel" and "PendingTasksViewModel":

public ContactsViewModel()

{

//this.Title = "Contacts";

}

but looks like it is still somehow getting the Title set from elsewhere.

Kindly suggest.

Thanks.

[Kiril Stanoev]

Hello Neeraj,

Actually the Title property is not used anywhere. If you go to ShellView.xaml, you can see that the TileView has its TileViewItems defined in code. Notice that the Header is set to the string you see displayed when you run the application:

<telerikNavigation:RadTileView>
    <telerikNavigation:RadTileViewItem Header="Mail"
            prismRegions:RegionManager.RegionName="MailViewRegion"
            ContentTemplate="{StaticResource ContentTemplate}" />
    <telerikNavigation:RadTileViewItem Header="Contacts"
            prismRegions:RegionManager.RegionName="ContactsViewRegion"
            ContentTemplate="{StaticResource ContentTemplate}" />
    <telerikNavigation:RadTileViewItem Header="Pending Tasks"
            prismRegions:RegionManager.RegionName="PendingTasksViewRegion"
            ContentTemplate="{StaticResource ContentTemplate}" />
</telerikNavigation:RadTileView>

This means that you can remove the Title property from the ViewModelBase.cs. Give it a try and let me know how it works for you.

On a side note, I'd like to inform you that we've just released an online tool that allows you to reduce the size of your Silverilght applications. For more information, please visit http://blogs.telerik.com/blogs/posts/10-06-10/telerik_assembly_minifier.aspx

Kind regards,
Kiril Stanoev
the Telerik team