Have Two Errors using dynamically sized Tile View Control

3 posts, 0 answers
  1. Michael
    Michael avatar
    8 posts
    Member since:
    Apr 2011

    Posted 12 Apr 2011 Link to this post

    I've been working with the TIleView control and have no more than bound the control to a data source and have run into not one but two un-handled exceptions being caused by the control.

    The first of which is when I switch Item Sources from a populated one to an empty one.  I receive the following error:

    Value cannot be infinite or NaN.
    Parameter name: System.Windows.CustomDependencyProperty

    The second error I receive when I try and maximize an item inside of a Tile Control when there is only one item in the data source.  

    UIElement.Arrange(finalRect) cannot be called with Infinite or NaN values in finalRect. 

    Both Errors can be stopped by adding MaxHeight property to the TileView control, but that causes the control to be malformed and of course not take up all available space.

    I have created a test project that shows both of these behaviors in action, if needed. Since I can't attach the project zip I have included some of the code below.

    XAML:

    <UserControl x:Class="SilverlightApplication2.SilverlightControl1"
        xmlns:tileview="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
        <UserControl.Resources>
            <DataTemplate x:Key="CountryHeaderTemplate">
                <TextBlock Text="{Binding Name}" />
            </DataTemplate>
            <tileview:TileToFluideStateConverter x:Key="tileConverter" />
            <Style TargetType="TextBlock" x:Key="TextStyle">
                <Setter Property="FontSize" Value="12" />
                <Setter Property="FontFamily" Value="Verdana" />
            </Style>
            <Style TargetType="TextBlock" x:Key="TitleTextStyle" BasedOn="{StaticResource TextStyle}">
                <Setter Property="FontWeight" Value="Bold" />
            </Style>
            <DataTemplate x:Key="CountryTemplate">
                <telerik:RadFluidContentControl ContentChangeMode="Manual" TransitionDuration="0:0:.5"
                        State="{Binding State, Converter={StaticResource tileConverter}}">
                    <telerik:RadFluidContentControl.SmallContent>
                        <Image Source="{Binding SmallFlag}" Stretch="None" />
                    </telerik:RadFluidContentControl.SmallContent>
                    <telerik:RadFluidContentControl.Content>
                        <Image Source="{Binding SmallFlag}" Stretch="None" />
                    </telerik:RadFluidContentControl.Content>
                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid MaxHeight="400">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
     
                            <Image Source="../Images/TileView/Flags/map.png" Grid.ColumnSpan="2" Grid.RowSpan="2" />
                            <Image Source="{Binding LargeFlag}" Grid.Column="1" Margin="10" />
                            <telerik:RadWrapPanel Margin="20">
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Political System:" Style="{StaticResource TitleTextStyle}" />
                                    <TextBlock Text="{Binding PoliticalSystem}" Style="{StaticResource TextStyle}" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Capital City:" Style="{StaticResource TitleTextStyle}" />
                                    <TextBlock Text="{Binding CapitalCity}" Style="{StaticResource TextStyle}" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Total Area:" Style="{StaticResource TitleTextStyle}" />
                                    <TextBlock Text="{Binding TotalArea}" Style="{StaticResource TextStyle}" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Population:" Style="{StaticResource TitleTextStyle}" />
                                    <TextBlock Text="{Binding Population}" Style="{StaticResource TextStyle}" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Currency:" Style="{StaticResource TitleTextStyle}" />
                                    <TextBlock Text="{Binding Currency}" Style="{StaticResource TextStyle}" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Official Language:" Style="{StaticResource TitleTextStyle}" />
                                    <TextBlock Text="{Binding OfficialLanguage}" Style="{StaticResource TextStyle}" />
                                </StackPanel>
                            </telerik:RadWrapPanel>
                            <TextBlock FontSize="11" TextWrapping="Wrap" Text="{Binding Description}" Grid.Row="1"
                                    Grid.ColumnSpan="2" Margin="20" />
                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </DataTemplate>
     
            <Style TargetType="telerik:RadTileView">
                <Setter Property="PreservePositionWhenMaximized" Value="True" />
                <Setter Property="telerik:TileViewPanel.IsVirtualized" Value="True" />
                <Setter Property="IsAutoScrollingEnabled" Value="True" />
                <Setter Property="TileStateChangeTrigger" Value="SingleClick" />
                <Setter Property="MinimizedColumnWidth" Value="180" />
                <Setter Property="MinimizedRowHeight" Value="155" />
                <Setter Property="RowHeight" Value="155" />
                <Setter Property="ColumnWidth" Value="180" />
                <Setter Property="ColumnsCount" Value="5" />
                <Setter Property="ContentTemplate" Value="{StaticResource CountryTemplate}" />
                <Setter Property="ItemTemplate" Value="{StaticResource CountryHeaderTemplate}" />
            </Style>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="10" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="10" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="Modify" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="0" />
            <Grid Grid.Row="2" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="75" />
                    <ColumnDefinition Width="4" />
                    <ColumnDefinition Width="150" />
                    <ColumnDefinition Width="4" />
                    <ColumnDefinition Width="150" />
                    <ColumnDefinition Width="4" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="4" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="40" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="Date:" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Center" />
                <Button x:Name="ResetControl" Grid.Row="0" Grid.Column="4" Content="Cause Error" Click="ResetControl_Click" />
                <TextBlock Grid.Row="2" Grid.Column="0" Text="Notes:" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Center" />
                <TextBox Grid.Row="2" Grid.RowSpan="2" Grid.Column="2" Grid.ColumnSpan="10" Height="55" x:Name="ScheduleNotes" Text="{Binding notes_txt}" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" TextWrapping="Wrap" HorizontalAlignment="Stretch" />
            </Grid>
            <Border Grid.Row="4" Grid.Column="0" CornerRadius="5" BorderBrush="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Transparent">
                    <StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                        <TextBlock x:Name="ContentBox" Text="Content" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="25" />
                        <telerik:RadTileView Name="tileView1" ItemsSource="{Binding ProductionRunParts}" TileStateChanged="tileView1_TileStateChanged"
                            TileStateChangeTrigger="{Binding ElementName=StateChangeOption, Path=SelectedItem}"
                            MaximizeMode="{Binding ElementName=MaximizeModeOption, Path=SelectedItem}"
                            IsItemDraggingEnabled="{Binding ElementName=IsItemDraggingEnabledOption, Path=IsChecked}"
                            PreservePositionWhenMaximized="{Binding ElementName=PreservePositionWhenMaximizedOption, Path=IsChecked}">
                        </telerik:RadTileView>
                    </StackPanel>
                </ScrollViewer>
            </Border>
        </Grid>
    </UserControl>


    Code Behind:
    using System;
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Controls;
    using Telerik.Windows;
     
    namespace SilverlightApplication2
    {
        public partial class SilverlightControl1 : UserControl
        {
            public SilverlightControl1()
            {
                InitializeComponent();
     
                //tileView1.MaxHeight = 400; //This Prevents BOTH Errors, but causes control to be Malformed.
     
                tileView1.ItemsSource = new List<String> { "Test" }; //This Errors on Maximize.
                //tileView1.ItemsSource = new List<String> { "Test1", "Test2", "Test3", "Test4", "Test5" }; //This Works Fine.
            }
     
            private void tileView1_TileStateChanged(object sender, RadRoutedEventArgs e)
            {
            }
     
            private void ResetControl_Click(object sender, RoutedEventArgs e)
            {
                tileView1.ItemsSource = new List<String>(); //This Errors Here, but if you set the Inital Datasource to Empty or null it's fine?
            }
        }
    }

    I am currently working with the latest version of the trial controls (downloaded less than a week ago) have only been working with the TileView control (the specific control we are interested in) today.  I find it very concerning that it's so easy to cause two un-handled exceptions with so little time.  I'm hoping it is just something i'm missing, but several searches have not yet revealed anything.
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 13 Apr 2011 Link to this post

    Hi Michael,

     Thank you for the bug report. There are some issues with the RadTileView when you try to measure it with infinity(when it's inside a StackPanel or a ScrollViewer) and we advise you to use this only when it's really necessary. We looked into the two scenarios that you provided and I hope that the fixes for them will be available with the SP1 (latter this week or next week the latest).
    I've attached your project with some small changes (removed the ScrollViewer - the RadTileView has a build-in one and changed the StackPanel with a Grid) so could you please examine it and see if this behavior is what your're looking for.
    I've also updated your telerik account and if you have further questions feel free to ask.  

    Greetings,
    Zarko
    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. Michael
    Michael avatar
    8 posts
    Member since:
    Apr 2011

    Posted 13 Apr 2011 Link to this post

    Thank you,

    That resolved my issues.
Back to Top