Customizing TileViews within a Prism region

10 posts, 1 answers
  1. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 15 Jun 2010 Link to this post

    Okay, I have been working along with your support personnel to get some customization around the RadTileView.
    Got working to a large extent, but now there has been a change in the structure as how I am getting the Tiles Views injected.
    I have a MainPage essentially declaring a RadTileView control with a Region as "ApplicationRegion". It goes somewhat like this:
     <telerikNavigation:RadTileView  Regions:RegionManager.RegionName="ApplicationRegion" MinimizedColumnWidth="200">

     </telerikNavigation:RadTileView>

    And just that. There is no more declaration of any child Tile views on this page.
    Now I have a module "Module1", where I am injecting my views like below:
    _regionManager.RegisterViewWithRegion("ApplicationRegion", typeof(HourlyView));
     _regionManager.RegisterViewWithRegion("ApplicationRegion", typeof(DailyView));
     _regionManager.RegisterViewWithRegion("ApplicationRegion", typeof(MonthlyView));
     _regionManager.RegisterViewWithRegion("ApplicationRegion", typeof(YearlyView));

    This gives me a nice looking MainPage with 4 Tiles displayed within it.
    Now my requirement is to customize these 4 Child TileViews to get a curved border, display the headers and change the close button picture to my own.

    We did that close button icon as per the below url, and now I am looking to do that same in this new structure.

    Any help in getting this done. Where should I be placing the custom code for making those template changes.
    Any sample would highly be appreciated.
    Thanks.
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 18 Jun 2010 Link to this post

    Hello HDD,

    You can simply copy the style code from the other project (http://www.telerik.com/community/forums/silverlight/tileview/custom-border-and-maximize-button.aspx) into the MainPage where the TileView is defined and set it as a ItemContainerStyle, like so:
    <telerikNavigation:RadTileView  prismRegions:RegionManager.RegionName="ApplicationRegion" MinimizedColumnWidth="200"
            ItemTemplate="{StaticResource HeaderTemplate}"
            ContentTemplate="{StaticResource ContentTemplate}"
            ItemContainerStyle="{StaticResource RadTileViewItemStyle}">
     
    </telerikNavigation:RadTileView>

    I prepared a sample project illustrating this approach. Take a look at it and let me know if this is what you had in mind or if you need more info.

    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

    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
  3. DevCraft banner
  4. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 18 Jun 2010 Link to this post

    Tina,
    Thanks for your guidance. I have been trying to incorporate the styles from the other project. The one you provided as attachment seems to display the "X" icon as the restore button but when I move those same styles to my project, I do not see the icon. It just displays the default image that were displayed before the styles were applied.
    Trying to troubleshoot here, but do you think you have any wild guesses as to where the things might have gone wrong.
    The only one change I have made to this style block of <UserControl.Resources> is as below:

    <Grid Width="20" Height="20" x:Name="Restore">
              ......................
               <Image Source="/mynamespace;component/Assets/icon2.png"  Stretch="None"  />
    </Grid>

    The good thing is that I am able to see the Title and and the content of the view.
    Any direction...

    Thanks.
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 21 Jun 2010 Link to this post

    Hello HDD,

    I cannot really say where the problem might come from without looking at your project. However, I was wondering whether the source to the image is correct. Can you see the image if you move it from the style to the content area of the TileView? 

    Also, can you please make sure that the style is correctly applied. For example, you can set a Background color, like Red and see if it is applied, like so:
    <Style TargetType="telerikNavigation:RadTileViewItem" x:Key="RadTileViewItemStyle" >
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Background" Value="Red" />
        <Setter Property="BorderBrush" Value="{StaticResource TileView_OuterBorder}" />
        <Setter Property="BorderThickness" Value="1" />
    ...
    </Style>

    If this suggestions doesn't help you to locate the problem, it would be best if you can send us a sample project reproducing the issue. That will help us further investigate the issue and what is causing it.

    I am looking forward to your reply.

    All the best,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 21 Jun 2010 Link to this post

    Hi Tina,
    Thanks for your prompt responses. 
    I got this resolved but would need to come back to this later as I assume it should have worked the way I had it earlier.
    This is what is...
    I had my Styles defined in a <ResourceDictionary> like this...
    <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="/mynamespace;Component/myResDictionary.xaml"/>
                </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

    Ideally, this should work, in my opinion (Pl let me know if I am missing something here.)
    But it didn't, so now I have put all my Styles "inline" into my xaml within the :
     <UserControl.Resources>
         ..................
        .......................
     </UserControl.Resources>

    It works for now, But I would later investigate and move to the myResDictionary.xaml file.
    Appreciate all your help till now.
    Now to move on...As I have the Tiles displayed on my main page, I am using the RadFluidContentControl to control the Small, Normal and Large View.
    Your sample code has a ContactsViewModel.cs, which I am trying to refer to. When I run your sample and try to minimize/restore the tiles, it works only for the first time. After that I see only "Large View" text no matter what is the state.
    I am also having hard-time understanding the Threshold values.
    I have a set these two for the RadTileView in MainPage.xaml :
    MinimizedColumnWidth="300"  
    MinimizedItemsPosition="Left" 

    How do I decide what values should be set for SmallToNormalThreshold, NormalToLargeThreshold, NormalToSmallThreshold and LargeToNormalThreshold.

    Any help would be appreciated.
    Thanks.
  7. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 24 Jun 2010 Link to this post

    Hi HDD,

    RadFluidContentControl exposes three content properties - Content, SmallContent and LargeContent. In order to control which one of these three properties is visible at any given time, the four available threshold properties - LargeToNormalThreshold, NormalToLargeThreshold, SmallToNormalThreshold and NormalToSmallThreshold, are used. They determine when the content of the item should be small, large or normal, depending on the available size.

    If you choose to use RadFluidContentControl with RadTileView, an additional property can be taken into consideration - ContentChangeMode. RadFluidContentControl's ContentChangeMode property allows to manually change the State of the control, and thus the visible content. Setting the property to "Manual", tells RadFluidContentControl to completely disregard its threshold properties, thus making you responsible for switching the visible content. Setting the property to "Automatic" makes the control use the thresholds again.

    You can find more info about the RadFluidContentControl here and here.

    However, in your case, if you need to change the content of the TileViewItems depending on their state(Minimized, Maximized, Restored) it is better to set the RadFluidContentControl ContentChangeMode to Manual and handle the TileStateChanged() event of the TileView to change the content. I modified the example to implement this scenario.

    I hope the information will help you. Also, please take a look at the project and let me know if it works for you or if you need more info.

    Kind regards,
    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
  8. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 25 Jun 2010 Link to this post

    As always, thanks Tina for your responses.
    I will look at the solution you have provided and let you know.

    Thanks.
  9. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 06 Jul 2010 Link to this post

    Hi Tina,
    I know I took a long to reply back on this, as I had switched to doing something else. I have gone through the links for the FluidControl but am still struggling to figure out the best out of it.
    Now when I take a look at this project, I have a couple of questions for you:
    #1. When this project loads, it displays the "Small view" instead of "Normal View". Playing around with the values messed-up my other transitions.
    #2. I click on the "Mail" Tile to enlarge it. Works perfect. Next, I enlarge the "Contacts" view. Contacts gets enlarged and displays the Large View. Simultaneously, the Mail tile gets it small tile, but incorrectly displays the Large view, instead of the Small view. (This is not consistent, sometimes happens, if you keep toggling between the two states.)

    I hope you can replicate this in your project and provide some help on how to fix this.
    Let me know if you cannot replicate this, I can provide some screenshots.
    Thanks.
  10. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 12 Jul 2010 Link to this post

    Hello HDD,

    Please accept my apology for the delayed response.

    You said that your are still struggling with the RadFluidContentControl. Perhaps, I can further assist you if you can elaborate more on the requirements of your scenario. Then I will be able to provide you with a better suited approach for it.

    Also, in the last attached example (195895-tileviewandprism.zip) I couldn't reproduce the issues you described. Did you apply any changes in it? However, I will try to better explain the approach I used in the example.

    Here is the definition of the RadFluidContentControl in the ConentTemplate of each TileViewItem:
    <telerik:RadFluidContentControl ContentChangeMode="Manual" State="Normal">
        <telerik:RadFluidContentControl.SmallContent>
            <ContentPresenter Content="{Binding SmallView}" />
        </telerik:RadFluidContentControl.SmallContent>
        <telerik:RadFluidContentControl.Content>
            <ContentPresenter Content="{Binding NormalView}" />
        </telerik:RadFluidContentControl.Content>
        <telerik:RadFluidContentControl.LargeContent>
            <ContentPresenter Content="{Binding LargeView}" />
        </telerik:RadFluidContentControl.LargeContent>
    </telerik:RadFluidContentControl>
    The State property sets the default state of the RadFluidContentControl, in this case - the normal content should be displayed by default when the application starts.

    Also, the ContentChangeMode property is set to Manual thus telling the RadFluidContentControl to completely disregard any threshold properties. This means that the content of the control won't change unless some custom logic is defined  to control this behavior. In the example the TileStateChanged() event handler of the RadTileView is used to change the RadFluidContentControl state:
    private void RadTileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
    {
        RadTileViewItem item = e.Source as RadTileViewItem;
     
        if (item != null)
        {
            IList<RadFluidContentControl> mylist = item.ChildrenOfType<RadFluidContentControl>();
            if (mylist.Count > 0 && mylist[0] != null)
            {
                RadFluidContentControl contentControl = mylist[0];
                switch (item.TileState)
                {
                    case TileViewItemState.Maximized:
                        contentControl.State = FluidContentControlState.Large;
                        break;
                    case TileViewItemState.Minimized:
                        contentControl.State = FluidContentControlState.Small;
                        break;
                    case TileViewItemState.Restored:
                        contentControl.State = FluidContentControlState.Normal;
                        break;
                }
            }
        }
    }

    The TileStateChanged() event is raised when the state of an item is changed. Therefore the ChildrenOfType() method of the RadTileViewItem is used to find all children of type RadFluidContentControl of the TileViewItem which state is changing. Since the ContentTemplate of the TileViewItems defines one RadFluidContentControl in each item, the ChildrenOfType() method returns a list of one item - mylist[0], which holds the RadFluidContentControl in question. Then the RadFluidContentControl State is set correspondingly to the TileState value of the TileViewItem.

    However, if you prefer to use the thresholds properties of the RadTileView you can take a look at our demo here. Still, please keep in mind that you should be extra careful when setting the threshold properties - LargeToNormalThreshold, NormalToLargeThreshold, SmallToNormalThreshold and NormalToSmallThreshold.

    I hope this information will help you. Also, if you still experience difficulties you can open a support ticket and send us your project so that we can further investigate your issues.

    Regards,
    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
  11. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 22 Jul 2010 Link to this post

    Tina,
    Thanks for your reply. I guess, I am definitely not setting the Threshold values correctly and hence not getting to see the exact results.
    But using the Mode set to manual, I can see that this works like a charm. :)
    Thanks again and appreciate your help.
Back to Top
DevCraft banner