[Solved] TileViewItem graphical garbage on size change

[Robert]

Hi,

We have a tileview with some tileviewitems on them.
When going from minimized to maximized or any other state.
I have tested several different hardwares with the same effect.
The property IsAnimationOptimized makes no difference.

I use RadControls for silverlight Q2 2011 (version 11.2.712.0)
this is the effect:

http://i52.tinypic.com/1znpu2s.jpg

some of the xaml:

<telerik:RadBusyIndicator DisplayAfter="0" DataContext="{StaticResource ViewModel}" IsBusy="{Binding IsBusy}" IsIndeterminate="True"  x:Name="busyIndicator" BusyContent="Loading Data ...">
        <Grid x:Name="LayoutRoot" DataContext="{StaticResource ViewModel}">
            <telerik:RadTileView x:Name="tileView" MinimizedItemsPosition="Right" SelectionMode="Single" IsItemDraggingEnabled="False" PreservePositionWhenMaximized="True" MinimizedColumnWidth="200" MinimizedRowHeight="44" TileStateChangeTrigger="SingleClick" VerticalAlignment="Stretch" VerticalContentAlignment="Center" IsAnimationOptimized="True" IsAutoScrollingEnabled="True">
                <telerik:RadTileViewItem Header="Alarm Details" x:Name="AlarmDetailsTile">
                    <telerik:RadFluidContentControl State="{Binding TileState, ElementName=AlarmDetailsTile, Converter={StaticResource tileConverter}}" ContentChangeMode="Manual">
                        <telerik:RadFluidContentControl.Content>
                            <c:PropertyList>
                                <c:PropertyItem Header="Alarm Id" Content="{Binding Alarm.Id}" />
                                <c:PropertyItem Header="Status" Content="{Binding Alarm.Status}" />
                                <c:PropertyItem Header="Created" Content="{Binding Alarm.MeasurementDate}" />
                                <c:PropertyItem Header="Responsible" Content="{Binding Alarm.ABBContact.FullName}" />
                                <c:PropertyItem Header="Customer" Content="{Binding Alarm.Customer.Name}"/>
                            </c:PropertyList>
                        </telerik:RadFluidContentControl.Content>
                        <telerik:RadFluidContentControl.LargeContent>
                            <views:SingleSelectAlarmView x:Name="Details"/>
                        </telerik:RadFluidContentControl.LargeContent>
                    </telerik:RadFluidContentControl>
                </telerik:RadTileViewItem>

[...] then it continues with some more tileview items.

any ideas?

/Robert

[Robert]

Update:

It only happens when the item is "growing".

/Robert

[Robert]

Solution found!

there is a bug in RadTileView (I guess).
Setting this property on the control causes drawing issues when maximizing:

MinimizedRowHeight="44"

/Robert

[Petar Mladenov]

Hello Robert,

 We are glad that you have resolved your issue. However, we will need your cooperation since we are not aware of such existing problem in the RadTileView. Is it possible for you to send us a runnable sample demonstrating this behavior, so that we could investigate it better ? This will be highly appreciated. Thank you for your time.

Regards,
Petar Mladenov
the Telerik team

[Duane]

This thread helped me solve my RadTileView problem.

Here's the code that doesn't work right after upgrading from "free" version to premium:  (It had been working before then)

<telerik:RadTileView x:Name="RadTileView1" MaxColumns="2">
    <telerik:RadTileViewItem Header="Executive Summary">
        <my:ExectutiveSummaryView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </telerik:RadTileViewItem>
</telerik:RadTileView>

Here's the code that fixed the problem:

<telerik:RadTileView x:Name="RadTileView1" MaxColumns="2" MinimizedColumnWidth="160" >
    <telerik:RadTileViewItem Header="Executive Summary">
        <my:ExectutiveSummaryView />
    </telerik:RadTileViewItem>
</telerik:RadTileView>

I had been using the "Free" version of the RadTileView and it worked great.  But when we upgraded to the premium version, the resizing of the "minimized" controls went bonkers.  By adding MinimizedColumnWidth="160", the problem was solved.

[Robert]

Here is an example of the problem:

<UserControl x:Class="RadControlsSilverlightApp3.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="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:tileview="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <UserControl.Resources>
        <tileview:TileToFluideStateConverter x:Key="tileConverter" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <telerik:RadTileView x:Name="tileView" MinimizedItemsPosition="Right" MinimizedRowHeight="44" SelectionMode="Single" IsItemDraggingEnabled="False" PreservePositionWhenMaximized="True" MinimizedColumnWidth="200" TileStateChangeTrigger="SingleClick" VerticalAlignment="Stretch" VerticalContentAlignment="Center" IsAnimationOptimized="True" IsAutoScrollingEnabled="True">
            <telerik:RadTileViewItem Header="Tile1" x:Name="Tile1">
                <telerik:RadFluidContentControl State="{Binding TileState, ElementName=Tile1, Converter={StaticResource tileConverter}}" ContentChangeMode="Manual">
                    <telerik:RadFluidContentControl.Content>
                        <Grid>
                            <TextBox AcceptsReturn="True" Background="Bisque" Text="Resize me!" FontSize="28"/>
                        </Grid>
                    </telerik:RadFluidContentControl.Content>
                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid>
                            <TextBox AcceptsReturn="True" Background="Bisque" Text="Resize me!" FontSize="28"/>
                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </telerik:RadTileViewItem>
            <telerik:RadTileViewItem Header="Tile2" x:Name="Tile2">
                <telerik:RadFluidContentControl State="{Binding TileState, ElementName=Tile2, Converter={StaticResource tileConverter}}" ContentChangeMode="Manual">
                    <telerik:RadFluidContentControl.Content>
                        <Grid>
                            <TextBox AcceptsReturn="True" Background="Coral" Text="Resize me!" FontSize="28"/>
                        </Grid>
                    </telerik:RadFluidContentControl.Content>
                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid>
                            <TextBox AcceptsReturn="True" Background="Coral" Text="Resize me!" FontSize="28"/>
                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </telerik:RadTileViewItem>
        </telerik:RadTileView>
    </Grid>
</UserControl>

Best Regards,
Robert

[Petar Mladenov]

Hello Robert,

 We managed to reproduce your issue. It appears because the Content of the MInimized RadTileViewItem is missing in this scenario and the FluidContentControl cannot animate empty element. You can workaround this by setting the Transition of the FluidContentControl to null when maximizing or restoring a minimized item:

private void tileView_PreviewTileStateChanged(object sender, PreviewTileStateChangedEventArgs e)
      {
          var container = e.OriginalSource as RadTileViewItem;
          if (container != null)
          {
              var fluid = container.ChildrenOfType<RadFluidContentControl>().FirstOrDefault();
              if (fluid != null)
              {
                  if (e.TileState == TileViewItemState.Minimized)
                  {
                      fluid.Transition = null;
                  }
                  else
                  {
                      fluid.ClearValue(RadFluidContentControl.TransitionProperty);
                  }
              }
          }
      }

Greetings,
Petar Mladenov
the Telerik team