TileViewItem graphical garbage on size change

7 posts, 0 answers
  1. Robert
    Robert avatar
    6 posts
    Member since:
    May 2011

    Posted 26 Sep 2011 Link to this post

    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

  2. Robert
    Robert avatar
    6 posts
    Member since:
    May 2011

    Posted 26 Sep 2011 Link to this post

    Update:

    It only happens when the item is "growing".

    /Robert
  3. DevCraft banner
  4. Robert
    Robert avatar
    6 posts
    Member since:
    May 2011

    Posted 26 Sep 2011 Link to this post

    Solution found!

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

    MinimizedRowHeight="44"

    /Robert

  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 29 Sep 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Duane
    Duane avatar
    5 posts
    Member since:
    Apr 2011

    Posted 04 Oct 2011 Link to this post

    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.
  7. Robert
    Robert avatar
    6 posts
    Member since:
    May 2011

    Posted 07 Oct 2011 Link to this post

    Here is an example of the problem:

    <UserControl x:Class="RadControlsSilverlightApp3.MainPage"
            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
  8. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 07 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner