Several Issues with TileView Control

[Daniel Ruehle]

Hello telerik,

I am going to use RadTileView Control in my appliaction with XML-DataBinding.
But I have some problems:

1.) I have tried out to manage to current State of the control in the code-behind file. Here in forum I found out that I have to use following call ->
RadTileViewItem radTileItem = settingRadTileView.ItemContainerGenerator.ContainerFromItem(buissinesObject) as RadTileViewItem;

I do get a reference to each RaTileViewItem in the collection but do not get a reference to the RadFluidContentControl, if I do this call
RadFluidContentControl fluidControl = item.Content as RadFluidContentControl.
While debugging I see at quickwatch that the content of the RadTileViewItem is a XmlElement.

What should I do to get / wrap an XMLElement to RadFluidContentControl  ?

2.)  Another issue is, when I am setting the MinimizedHeight / MinimizedWidth - Property of each RadTileViewItem in the code -behind file e.g in the SizeChanged-Handler, I have always to click at the TileView - Control in order to update the current view then after loading TileViewItems allocate whole space the is available. Only after a e.g Click on TileView RadTileViewItems change height and width setted in the code-behind file.

How can achieve a refresh on TileViewControl in the code-behind file whithout cklicking / user interaction ?

3.) I am setting the MinimizedHeight / MinimizedWidth - Property of each Item in the code-behind file in SizeChanged-Handler depending on the ActualHeight of the grid, but if I am setting my desktop resolution to 800x600 pixel some minimized items disappear and I have only 7. I read that at the moment there is no scrollerView for minimized Items, does it mean that at the moment I can just show a few items ?

4.) Can just header be visible in in minimized state without any content?

5.) And at least, how can I change the size of the content e.g of the large content dynamically ? If I change the resolution of the desktop some visible area of the large content disappear, although the snaptodevicepixel is checked an the size of the border in the LargeContent is setted to auto ? Have I to change the width and heigt ot the content control itself dinamically ?

Thank you.

Here is my code:

    <Grid>
        <telerikNavigation:RadTileView x:Name="settingRadTileView"
                    MinimizedItemsPosition="Left"
                    ItemsSource="{Binding Source={StaticResource ModulItems}, XPath=Modul}"
                    MaximizeMode="One"
                    ItemContainerStyle="{StaticResource RadTileViewItemStyle}"
                    Background="{x:Null}"
                    SizeChanged="RadTileView_SizeChanged"
                    >
            <telerikNavigation:RadTileView.ItemTemplate>
                <DataTemplate>
                    <DockPanel Width="Auto" Height="Auto" LastChildFill="False">
                        <TextBlock Text="{Binding XPath=Name}"
                        HorizontalAlignment="Center"
                        Style="{DynamicResource TextBlockStyle}"
                        VerticalAlignment="Center" Height="Auto"/>
                    </DockPanel>
                </DataTemplate>
            </telerikNavigation:RadTileView.ItemTemplate>
            <telerikNavigation:RadTileView.ContentTemplate>
                <DataTemplate>
                    <telerik:RadFluidContentControl SmallToNormalThreshold="128 128" NormalToSmallThreshold="128 128"
                        NormalToLargeThreshold="600 600" LargeToNormalThreshold="600 600" State="Normal">
                        <telerik:RadFluidContentControl.SmallContent>
                            <Grid Width="64" Height="64">
                            </Grid>
                        </telerik:RadFluidContentControl.SmallContent>
                        <telerik:RadFluidContentControl.Content>
                            <Grid Width="128" Height="128">
                            </Grid>
                        </telerik:RadFluidContentControl.Content>
                        <telerik:RadFluidContentControl.LargeContent>
                            <Border Width="Auto" Height="Auto" BorderThickness="3" BorderBrush="Blue">
                                <StackPanel>
                                    <TextBlock Text="Large" Foreground="White"/>
                                </StackPanel>
                            </Border>
                        </telerik:RadFluidContentControl.LargeContent>
                    </telerik:RadFluidContentControl>
                </DataTemplate>
            </telerikNavigation:RadTileView.ContentTemplate>
</telerikNavigation:RadTileView>
    </Grid>

        private void RadTileView_SizeChanged(object sender, System.Windows.RoutedEventArgs e)
        {

            Grid parent = this.settingRadTileView.Parent as Grid;

            int itemsCount = settingRadTileView.Items.Count - 1;  // beacause one is alwasy maximized

            foreach (var item in settingRadTileView.Items)
            {
                if (item != null)
                {
                    // set the height of each item in order to show all items minimzed at the left.
                    RadTileViewItem radTileItem = settingRadTileView.ItemContainerGenerator.ContainerFromItem(item) as RadTileViewItem;
                    radTileItem.MinimizedHeight = settingRadTileView.ActualHeight / itemsCount;
                    radTileItem.MinimizedWidth = settingRadTileView.ActualHeight / itemsCount;
                }
            }
        }

[Daniel Ruehle]

Hello telerikTeam,

any Ideas/updates/feedback ?

Best Regards

Daniel

[Kiril Stanoev]

Hello Daniel,

1) You can use one of our extension methods called FindChildByType<T>. For further information how to use the method please take a look at the attached sample project (findfluidcontentcontrol.zip). Please be advised that when using this method you actually walk through the whole visual tree of the TileViewItem until the RadFluidContentControl is found. There is a performance penalty if the TileViewItem has a big visual tree.

2) You can do the following in the constructor of your MainWindow:

public MainWindow()
{
    InitializeComponent();

    Dispatcher.BeginInvoke(new Action(() =>
    {
        settingRadTileView.UpdateItemsSizeAndPosition();
    }), System.Windows.Threading.DispatcherPriority.ApplicationIdle);
}

3) We are working on implementing the scrollviewer functionality. I cannot bind to a specific release date, so please follow this PITS thread.

4) This feature request is also in our to-do list. Check this PITS item. A workaround is to set the height of the minimized items to such a number that the content is not visible.

5) Once you have a reference to the RadFluidContentControl, you can adjust the value of the LargeContent property.

Let me know if you have further questions or comments regarding this issue.

Greetings,
Kiril Stanoev
the Telerik team

[Daniel Ruehle]

Hello Kiril,

Thank you for your response.
About No.2 ) It doesn't work. If you add my code below and bind just only 2 items to radtile view in project you have attached you will see what I mean about that height of the minimized item.

        public MainWindow()
        {
            InitializeComponent();
            settingRadTileView.ItemsSource = Enumerable.Range(0, 2);

            Dispatcher.BeginInvoke(new Action(() =>
            {
                this.UpdateItemsSizeAndPosition();
            }), System.Windows.Threading.DispatcherPriority.ApplicationIdle);
        }

        private void UpdateItemsSizeAndPosition()
        {

            // set the height of each item in order to show minimized item at specific height and not takig whole height of the control

            foreach (var item in settingRadTileView.Items)
            {
                if (item != null)
                {
                    // set the height of each item in order to show all items minimzed at the left.
                    RadTileViewItem radTileItem = settingRadTileView.ItemContainerGenerator.ContainerFromItem(item) as RadTileViewItem;

                    if(radTileItem.TileState != TileViewItemState.Maximized)
                        radTileItem.MinimizedHeight = 128;
                }

            }

        }

If the TileView is Loaded it looks like (pleas see screenshot 1) and what I expect (please see screenshot 2)
The heigth is going to be ajusted after you doubleclick on the maximized item or you changes items. But not after control has been loaded. What I am doing wrong ?

Thank you

Best reagards,

Daniel

[Kiril Stanoev]

Hello Daniel,

Now I understand what you have in mind. The solution is simple. First you can remove your UpdateItemsSizeAndPosition method and leave the code-behind like this:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        settingRadTileView.ItemsSource = Enumerable.Range(0, 2);
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        RadTileViewItem maximizedItem = settingRadTileView.ItemContainerGenerator.ContainerFromItem(settingRadTileView.MaximizedItem) as RadTileViewItem;
        if (maximizedItem == null)
        {
            MessageBox.Show("You have to maximize an item first.");
            return;
        }
        RadFluidContentControl fluidContentControl = maximizedItem.FindChildByType<RadFluidContentControl>();
    }
}

Then, you have to add an ItemContainerStyle to RadTileView:

<telerikNavigation:RadTileView x:Name="settingRadTileView" MinimizedItemsPosition="Left"
        MaximizeMode="One">
    <telerikNavigation:RadTileView.ItemContainerStyle>
        <Style TargetType="telerikNavigation:RadTileViewItem">
            <Setter Property="MinimizedHeight" Value="128" />
        </Style>
    </telerikNavigation:RadTileView.ItemContainerStyle>
    <telerikNavigation:RadTileView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding }" HorizontalAlignment="Center"
                    VerticalAlignment="Center" Height="Auto" />
        </DataTemplate>
    </telerikNavigation:RadTileView.ItemTemplate>
    <telerikNavigation:RadTileView.ContentTemplate>
        <DataTemplate>
            <telerik:RadFluidContentControl SmallToNormalThreshold="128 128"
                    NormalToSmallThreshold="128 128" NormalToLargeThreshold="600 600"
                    LargeToNormalThreshold="600 600">
                <telerik:RadFluidContentControl.SmallContent>
                    <Grid Width="64" Height="64"></Grid>
                </telerik:RadFluidContentControl.SmallContent>
                <telerik:RadFluidContentControl.Content>
                    <Grid Width="128" Height="128"></Grid>
                </telerik:RadFluidContentControl.Content>
                <telerik:RadFluidContentControl.LargeContent>
                    <Border Width="Auto" Height="Auto" BorderThickness="3"
                            BorderBrush="Blue">
                        <StackPanel>
                            <TextBlock Text="Large" Foreground="White" />
                        </StackPanel>
                    </Border>
                </telerik:RadFluidContentControl.LargeContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>
    </telerikNavigation:RadTileView.ContentTemplate>
</telerikNavigation:RadTileView>

If you make these changes, the output should be:



Give it a try and let me know how it works.

Greetings,
Kiril Stanoev
the Telerik team

[Daniel Ruehle]

Hello Kiril,

perfect, it's working.

Thank you very much for your help.

Best regards,

Daniel