How to: Show specific Views as RadFluidContentControl.Content and .LargeContent

[Kalle]

Hi!

I have a TileView and TileConfigView UserControls and I would like to show pre-designed TileView (TileView.xaml) as RadFluidContentControl.Content and pre-designed TileConfigView (TileConfigView.xaml) as RadFluidContentControl.LargeContent.

I Was able to bind TileView to .Content using {Binding TileContent} but for some reason the tile's size is not the same as the TileView UserControl's size. In addition I needed to make property to TileView's codebehind for it to work because I don't know how to get the view from the viewmodel:

// in TileView.xaml.cs
public TileView TileContent
{
    get { return this; }
}

But if I want to have different view for .LargeContent this seems like not the way to do it.

This is my contentTemplate for RadTileView (Width="Auto" and Height="Auto" didn't help with getting the tile's size match that of the actual view):

<DataTemplate x:Key="contentTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                            State="Normal"
                                            TransitionDuration="0:0:.5"
                                            DataContext="{Binding}">
                <telerik:RadFluidContentControl.Content>
                    <ContentControl Content="{Binding TileContent}"
                                    Width="Auto"
                                    Height="Auto"
                                    HorizontalContentAlignment="Center"
                                    />
                </telerik:RadFluidContentControl.Content>
                <telerik:RadFluidContentControl.LargeContent>
                    <ContentControl Content="{Binding ConfigContent}"
                     HorizontalAlignment="Stretch"
                     HorizontalContentAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     VerticalContentAlignment="Stretch" />
                </telerik:RadFluidContentControl.LargeContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>

Is there a proper way to do this so that I can have pre-designed TileView and TileConfigView per Tile and have those used as .Content and .LargeContent?

Br,

Kalle

[Pavel R. Pavlov]

Hi Kalle,

In your case you can set the RadFluidContentControl as content template of the RadTileView control. By doing this you will be able to bind its State property, using the RelativeSource binding in combination with a customized Converter, to the State property of the RadTileViewItems. You can implement the custom converter like this:

public class FluidContentStateConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        TileViewItemState tileState = (TileViewItemState)value;
        switch (tileState)
        {
            case TileViewItemState.Maximized:
                return FluidContentControlState.Large;
            case TileViewItemState.Minimized:
                return FluidContentControlState.Small;
            case TileViewItemState.Restored:
                return FluidContentControlState.Normal;
            default:
                return FluidContentControlState.Normal;
        }
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var fluidState = (FluidContentControlState)value;
        switch (fluidState)
        {
            case FluidContentControlState.Small:
                return TileViewItemState.Minimized;
            case FluidContentControlState.Normal:
                return TileViewItemState.Restored;
            case FluidContentControlState.Large:
                return TileViewItemState.Maximized;
            default:
                return TileViewItemState.Restored;
        }
    }
}

Please note that you have to set the ContentChangeMode property of the RadFluidContentControl to Manual in order to use the above converter. Also, I used UserControls to set the content in the different states so you will be able to define the desired look and functionality of your TileView and TileConfigView views.

For your convenience I implemented this approach in the attached project. Please take a look at it and let me know if it works for you.

All the best,
Pavel R. Pavlov
the Telerik team

[Kalle]

Hi Pavel!

This is almost what I was looking for. I my case I don't have local SmallContent, Content and LargeContent but instead I'd like to use those from each RadTileViewItem if that is possible. All RadTileViewItems are created from separate extensions and I need to be able to use each item's own SmallContent, Content and LargeContent.

Thanks a lot for an example btw, your customer support is indeed very good :)

Br,

Kalle

[Kalle]

Hello,

Here's some additional information about my scenario:

I'm using RadTileView as a PRISM region and I'm now loading TileView's from extensions to it successfully. I want to use each extension's pre-designed TileView.xaml as the .Content for RadFluidContentControl like it seems to do now by default.

In addition, I would like to be able to load each extensions pre-designed TileConfigView.xaml as .ContentLarge and possibly TileSmallContent.xaml as .SmallContent. 

So the problem is that they are not locally available in the client that loads the extensions.

Br,

Kalle

[Pavel R. Pavlov]

Hello Kalle,

Please accept our apology for the delayed response. In order to load the SmallContent, Content and LargeContent of the RadFluidContentControl from modules you can define the control in your Shell in a DataTemplate. Next, this DataTemplate can be set as the ContentTemplate of the RadTileView control. By doing so you will be able to create three ContentControls in the SmallContent, Content and LargeContent of the RadFluidContentControl and use them as regions. You can also bind the RegionName property to a property defined in a ViewModel defined in your modules. This way you can define unique RegionNames for each state of the RadFluidContentControl.

Furthermore, you will need to define one more DataTemplate (for the header of the ItemTemplate) and set it as ItemTemplate of the RadTileView control. In order to synchronize the State properties of the RadFluidContentControl and the RadTileViewItems you will have to use a converter and set the ContentChangeMode property of the RadFluidContentControl to Manual.

I prepared a sample solution and attached it below. Please take a look at it and let me know if it works for you.

Regards,
Pavel R. Pavlov
the Telerik team

[Kalle]

Hi Pavel!

Don't worry about the response time, I'm satisfied with any response I get :)
About the problem, Your attached solution looks nice and it's just what I was looking for but now I'm facing another problem and I'm wondering how it works on your example but not in my implementation.

It's about PRISM Region Manager, it seems that when I use DataTemplate like in your example I'm not getting those 3 new Regions registered at all to region manager. Region manager only has the TileRegion which is the RadTileView. In my opinion my project looks a lot like your example (I'm not using binding for those region names though) but one difference is that I needed to navigate to DashboardView (which has this TileView and DataTemplate for fluidcontentcontrol) using scoped region manager implementation I found on some forum.

<Grid Margin="0,0,0,-6">

    <Grid.Resources>

        <local:FluidContentStateConverter x:Key="fluidContentStateConverter" />

        <LinearGradientBrush x:Key="TabControl_BackgroundBrush_Base"
        StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#FF0479BA" Offset="0"/>
            <GradientStop Color="#FF0B6DA4" Offset="1"/>
        </LinearGradientBrush>

        <DataTemplate x:Key="contentTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                        State="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTileViewItem}, Path=TileState, Converter={StaticResource fluidContentStateConverter}}"
                                        TransitionDuration="0:0:.5">
                <telerik:RadFluidContentControl.SmallContent>
                    <ContentControl x:Name="TileSmallRegion" Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TileSmallRegion}" />
                </telerik:RadFluidContentControl.SmallContent>
                <telerik:RadFluidContentControl.Content>
                    <ContentControl x:Name="TileNormalRegion" Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TileNormalRegion}"/>
                </telerik:RadFluidContentControl.Content>
                <telerik:RadFluidContentControl.LargeContent>
                    <ContentControl x:Name="TileLargeRegion" Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TileLargeRegion}" />
                </telerik:RadFluidContentControl.LargeContent>

            </telerik:RadFluidContentControl>
        </DataTemplate>

        <DataTemplate x:Key="headerTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding ViewTitle, Mode=TwoWay}" HorizontalAlignment="Left"/>
                <telerik:RadButton Width="14"
                               Height="14"
                               Margin="0 0 0 0"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Content="X"
                               FontSize="10"
                               Foreground="Black"
                               Background="White"
                               Command="{Binding Path=DataContext.RemoveTileCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                               CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTileViewItem}}"
                               Padding="0"/>
            </StackPanel>
        </DataTemplate>

    </Grid.Resources>

    <telerik:RadTileView
        ContentTemplate="{StaticResource contentTemplate}"
        ItemTemplate="{StaticResource headerTemplate}"
        Background="Transparent"
        ColumnsCount="{Binding TileColumnCount}"
        RowsCount="{Binding TileRowCount}"
        x:Name="TileRegion"
        Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TileRegion}"
        MinimizedColumnWidth="Auto"
        MinimizedRowHeight="Auto"
        RowHeight="Auto"
        ColumnWidth="Auto"
        IsAutoScrollingEnabled="True"
        PreservePositionWhenMaximized="True"
        telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
        telerik:TileViewPanel.IsRowsShrinkEnabled="True"
        telerik:TileViewPanel.IsSizeBoundToPosition="True"
        TileDragEnded="TileRegion_TileDragEnded"
        >
        <telerik:RadTileView.ContextMenu>
            <ContextMenu>
                <MenuItem Header="Lisää tiili..." Command="{Binding TileListWindowCommand}" CommandParameter="">
                    <MenuItem.Icon>
                        <Image Source="../Images/House.png" Width="32" Height="32"/>
                    </MenuItem.Icon>
                </MenuItem>
            </ContextMenu>
        </telerik:RadTileView.ContextMenu>
    </telerik:RadTileView>
</Grid>

Not sure if that is the main reason because TileView gets registered as TileRegion nicely but all those new regions inside DataTemplate are not registered to this region manager :(

I will continue to try to spot any difference and the reason behind this but I also started to wonder if there's some workaround needed to get regions registered inside datatemplate because I've seen some threads about stuff like that (or is it fixed in PRISM 4.1):

http://blogs.southworks.net/dcherubini/2011/11/10/regions-inside-datatemplates-in-prism-v4-using-a-region-behavior/

Anyway thanks a lot for the example, although I should have thought about something like that myself :)

Br,

Kalle

[Pavel R. Pavlov]

Hi Kalle,

Unfortunately we can't reproduce your issue on our side and this is why the regions aren't properly registered in your case. And we're also not sure what indicated that the regions aren't properly added in the RegionManager in your solution. But if you can send over your solution, we can take a look at your and  try to find the cause for the issue.

On the other hand, please note that the DataTemplate (defined in the Shell) will be applied when the RadTileView.ItemsSource collection is filled and RadTileViewItems are available. Furthermore we use bindings to the RegionName property because this way we ensure that unique names are available for different regions. Have in mind that we inject different views into all regions.

Regards,
Pavel R. Pavlov
the Telerik team

[Kalle]

Hi again!

Actually I've managed to make some progress with this issue but I'm facing another problem. Now that I have these 3 regions for the fluid content control (Small, Normal, Large) I need to get all modules to have their own Small, Normal and Large content displayed in those regions per Tile if you understand what I mean.

For example, If I'm showing 3 different Tiles (RadTileViewItems) in my dashboard application I want each of those Tiles (which are based on modules) to have their own contents and if I'm using RegisterViewWithRegion() all of them have the same (the last one that registers itself). I'm guessing I should somehow Add/Remove views to/from these regions whenever tile state is changed or is there some other way to do this? 

This is how my contentTemplate for RadTileView is at the moment:

<DataTemplate x:Key="contentTemplate">
    <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                State="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTileViewItem}, Path=TileState, Converter={StaticResource fluidContentStateConverter}}"
                                TransitionDuration="0:0:.5">
        <telerik:RadFluidContentControl.SmallContent>
            <ContentControl x:Name="TileSmallRegion" Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TileSmallRegion}" />
        </telerik:RadFluidContentControl.SmallContent>
        <telerik:RadFluidContentControl.Content>
            <ContentControl x:Name="TileNormalRegion" Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TileNormalRegion}"/>
        </telerik:RadFluidContentControl.Content>
        <telerik:RadFluidContentControl.LargeContent>
            <ContentControl x:Name="TileLargeRegion" Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TileLargeRegion}" />
        </telerik:RadFluidContentControl.LargeContent>
    </telerik:RadFluidContentControl>
</DataTemplate>

Now I'm just registering views (as shown in your example) when module is initialized and it's not suitable in my case. Also if I register view in NormalRegion the tile is not fully shown where as without registering the view to normal region (when I'm not using Fluid content control at all) the tileview is shown as it is. Any ideas? I'm attaching a link to describe this issue.

How tiles look with FluidContentControl and RegisterViewWithRegion

How tiles look without Fluid Content Control and how I want them to look with fluid content control in normal state

EDIT: Maybe I would need to have those 3 regions to be created in scoped region manager somehow to be able to load views to them separately without replacing previous ones... Just wondering if and how that is possible.

Br,

Kalle

[Pavel R. Pavlov]

Hi Kalle,

As I see, you register 3 different regions in the RadFluidContentControl. Which is a good approach for showing only 3 different views. These views can be the different states (small, restored, large) of a RadTileViewItem. This is why, currently, you are able to visualize only the last registered module.

Also, from the pictures you provide I see that you have 6 RadTileViewItems (6 modules). Each RadTileViewItem has 3 different views, hence if you want to show each state (small, restored, large) of every RadTileViewItem, you will need 18 different regions. Because the RadFluidContentControl provide only 3 regions you can use bindings to extend the number of the regions. Please note that, in the previously attached project, we register each view (from a Module) with the same name on region as the bound property is set. Let me give you an example (from our project) to clarify my point.

In the Module1.cs file we register a region with a view like this:

this.regionManager.RegisterViewWithRegion("Module1SmallRegion", typeof(SmallView));

In the TileViewModel.cs (ViewModel of our Module) file we set the SmallRegionName property to the same region name:

this.SmallRegionName = "Module1SmallRegion";

And finally we bind the SmallRegionName property to the RegionName in our shell:

<telerik:RadFluidContentControl.SmallContent >
  <ContentControl prism:RegionManager.RegionName="{Binding SmallRegionName}" />
</telerik:RadFluidContentControl.SmallContent>

By doing the same for the other views (states) you actually extend the number of the regions. Please have in mind that, in the solution that we already provided, all the states of all RadTileViewItems are loaded from different Views defined in the Modules.

If you follow this approach the RadFluidContentControl will handle all 18 views out-of-the-box and you will not have to add or remove views from your regions, because each region will show only 1 view.

Kind regards,
Pavel R. Pavlov
the Telerik team

[Kalle]

Hi!

Thanks for the reply, now it is working better :) I should have realized to use binding with the views to achieve separate regions for each module.

In my scenario user can have multiple dashboards which each have these content controls and that is why I needed to also add ID parameter for each small, normal, large region names for the modules because same module can be loaded more than once to different dashboards and they still need to have their own regions.

Can you assist me with getting different tile states to show their views in correct size and help me with tile placement? I have uploaded couple of screenshots that hopefully help you understand my problem.

As I already mentioned in my previous post I can't seem to get Tile's Normal state to show tile's view in full. It only shows parts of it as you can see from screenshot below.

Tile's normal state size problem

In addition when I toggle Large state it seems to be ok but other tiles are not fully shown.

Other tiles not ok when one tile in Large state

Also when I toggle back to "normal" state after Large state the enlarged tile has invalid size (should be original normal state) and other tiles lose their views completely.

Restore after Large state shows invalid size and other tiles lose their view

Then when I toggle between large and normal states for different tiles I get tile arrangement like in next screenshot which is not ok.

Tile arrangement not ok after changing fluid content states for tiles

This is how my TileView's XAML is at the moment, can I get those tiles somehow use the size of their content?

    <DataTemplate x:Key="contentTemplate">
        <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                    State="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTileViewItem}, Path=TileState, Converter={StaticResource fluidContentStateConverter}}"
                                    TransitionDuration="0:0:.5"
                                    >
            <telerik:RadFluidContentControl.SmallContent>
                <ContentControl x:Name="TileSmallRegion" Prism:RegionManager.RegionName="{Binding DataContext.TileSmallRegionName}"/>
            </telerik:RadFluidContentControl.SmallContent>
            <telerik:RadFluidContentControl.Content>
                <ContentControl x:Name="TileNormalRegion" Prism:RegionManager.RegionName="{Binding DataContext.TileNormalRegionName}"/>
            </telerik:RadFluidContentControl.Content>
            <telerik:RadFluidContentControl.LargeContent>
                <ContentControl x:Name="TileLargeRegion" Prism:RegionManager.RegionName="{Binding DataContext.TileLargeRegionName}" />
            </telerik:RadFluidContentControl.LargeContent>
        </telerik:RadFluidContentControl>
    </DataTemplate>

    <Style x:Key="TileViewItemTemplate" TargetType="telerik:RadTileViewItem">
        <Setter Property="Position" Value="0"/>
    </Style>

    <DataTemplate x:Key="headerTemplate">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding DataContext.ViewTitle, Mode=TwoWay}" HorizontalAlignment="Left"/>
            <telerik:RadButton Width="14"
                           Height="14"
                           Margin="0 0 0 0"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           Content="X"
                           FontSize="10"
                           Foreground="Black"
                           Background="White"
                           Command="{Binding Path=DataContext.RemoveTileCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                           CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTileViewItem}}"
                           Padding="0"/>
        </StackPanel>
    </DataTemplate>

</Grid.Resources>

<telerik:RadTileView
    ContentTemplate="{StaticResource contentTemplate}"
    ItemTemplate="{StaticResource headerTemplate}"
    Background="Transparent"
    ColumnsCount="{Binding TileColumnCount}"
    RowsCount="{Binding TileRowCount}"
    x:Name="TileRegion"
    Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TileRegion}"
    MinimizedColumnWidth="Auto"
    MinimizedRowHeight="Auto"
    RowHeight="Auto"
    ColumnWidth="Auto"
    IsAutoScrollingEnabled="True"
    PreservePositionWhenMaximized="True"
    telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
    telerik:TileViewPanel.IsRowsShrinkEnabled="True"
    telerik:TileViewPanel.IsSizeBoundToPosition="False"
    TileDragEnded="TileRegion_TileDragEnded"
    >
    <telerik:RadTileView.ContextMenu>
        <ContextMenu>
            <MenuItem Header="Lisää tiili..." Command="{Binding TileListWindowCommand}" CommandParameter="">
                <MenuItem.Icon>
                    <Image Source="../Images/House.png" Width="32" Height="32"/>
                </MenuItem.Icon>
            </MenuItem>
        </ContextMenu>
    </telerik:RadTileView.ContextMenu>
</telerik:RadTileView>

In this XAML code there is also this TileViewItemTemplate
which is my attempt to control the position of tiles in TileView. If you have an example on how to change tileviewitem position in runtime I would also greatly appreciate that.

The idea is that user can change the placement of items in TileView and that position information is then saved to DB from which it can be loaded again when tiles are loaded...

Thanks for the help!

Br,

Kalle

[Pavel R. Pavlov]

Hello Kalle,

Regarding your requirement to save the position of each RadTileViewItem, you can use the RadTileViewItem.Position property and bind it to property from your view model. In order to do this you can create a Style targeting the RadTileViewItem. For further customization, you can use the CollectionChanged event of the Views from your RegionManager. You can take a look at the ShellView.xaml.cs file and see how we subscribe to it.

On the other hand, regarding the size of the RadTileViewItems please note that it is caused by the fact that some dimension properties are set to Auto. In order to overcome this issue, you will have to set fixed dimensions for each state. You can do this by setting the MinimizedRowHeight and MinimizedColumnWidth properties of the RadTileView control.

Please give this approach a try and let me know if you need further assistance.

Regards,
Pavel R. Pavlov
the Telerik team

[Kalle]

Hi Pavel!

I managed to get my TileView's tiles look better by setting RestoredWidth and RestoredHeight properties.

<Style x:Key="tileViewItemTemplate" TargetType="telerik:RadTileViewItem">
    <!-- Setter Property="Position" Value="{Binding Position, Mode=TwoWay}"/ -->
    <Setter Property="RestoredWidth" Value="220"/>
    <Setter Property="RestoredHeight" Value="270"/>
</Style>

(Still it would be better if tiles would have whatever width/height the content has automatically... is it possible?)

And the reason for those small/normal content views to disappear seems to be the fact that I registered same view for both small and normal regions. It causes problems at least when doing transitions to different tile states. So I wondered if I can hide small content when changing to Large state because I don't necessary need small content. I changed MinimizedColumnWidth and MinimizedRowHeight to 0 to accomplish this. Is there another way to "disable" small content when showing Large content state or is this ok?

Is there any way to make TileViewItems use the size of the View which is shown? Like if my Tile's view (UserControl) has been designed to be, for example, 200x200 in size I'd like TileItem to be 200x200 (+ space needed for tile's frame).

Another problem at the moment is that, for some reason, I still can't get Header for my tile view items using ItemTemplate like in your solution:

<DataTemplate x:Key="headerTemplate">

    <StackPanel Orientation="Horizontal">

        <TextBlock Text="{Binding TitleText, Mode=TwoWay}" HorizontalAlignment="Left"/>

        <telerik:RadButton Width="14"

                       Height="14"

                       Margin="0 0 0 0"

                       HorizontalAlignment="Center"

                       VerticalAlignment="Center"

                       Content="X"

                       FontSize="10"

                       Foreground="Black"

                       Background="White"

                       Command="{Binding Path=DataContext.RemoveTileCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"

                       CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTileViewItem}}"

                       Padding="0"

                       />

    </StackPanel>

</DataTemplate>


<telerik:RadTileView
    ContentTemplate="{StaticResource contentTemplate}"
    ItemTemplate="{StaticResource headerTemplate}"
    ItemContainerStyle="{StaticResource tileViewItemTemplate}"
    Background="Transparent"
    ColumnsCount="{Binding TileColumnCount}"
    RowsCount="{Binding TileRowCount}"
    x:Name="TileRegion"
    Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TileRegion}"
    IsAutoScrollingEnabled="True"
    PreservePositionWhenMaximized="True"
    telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
    telerik:TileViewPanel.IsRowsShrinkEnabled="True"
    telerik:TileViewPanel.IsSizeBoundToPosition="False"
    TileDragEnded="TileRegion_TileDragEnded"
    MouseLeftButtonUp="TileRegion_MouseLeftButtonUp"
    MouseDoubleClick="TileRegion_MouseDoubleClick"
    TilesStateChanged="TileRegion_TilesStateChanged"
    MinimizedColumnWidth="0"
    MinimizedRowHeight="0"
    TileStateChangeTrigger="None"
    DragMode="Swap"
    >
    <telerik:RadTileView.ContextMenu>
        <ContextMenu>
            <MenuItem Header="Lisää tiili..." Command="{Binding TileListWindowCommand}" CommandParameter="">
                <MenuItem.Icon>
                    <Image Source="../Images/House.png" Width="32" Height="32"/>
                </MenuItem.Icon>
            </MenuItem>
        </ContextMenu>
    </telerik:RadTileView.ContextMenu>
</telerik:RadTileView>

TitleText is a property in TileViewItem's ViewModel, like:

private string sTitleText;
public override string TitleText
{
    get { return sTitleText; }
    set { sTitleText = value; RaisePropertyChanged("TitleText"); }
}

Br,
Kalle

[Pavel R. Pavlov]

Hi Kalle,

Please note that the RadTileViewItem's content depends on the size properties (e.g. RestoredWidth, RestoredHeight ...), of the RadTileViewItem and RadTileView control - not the other way around. For more information about how the properties affect the behavior of the content you can refer to this online demonstration project.

Regarding your requirement to hide the items when they are in Minimized state the short answer is - Yes. It is OK to hide them using this approach. However, make sure that the value is not 0. It will be better to set it to 0.1 for example, because 0 may be inconvenient in some scenarios.

Regarding the header of your items - I tried, but I couldn't reproduce this behavior in our project. In order to debug the binding and see if the right object is available, you can apply a custom converter to your binding and see what object comes in the Convert() method. However, it will be best to send us your project so we can better understand your setup. Furthermore, we will be able to suggest a suitable implementation.

All the best,
Pavel R. Pavlov
the Telerik team