Expand tile graphical issue

[Stephen]

HI,

  We are using the Tile View to show the users of our system.  In order to edit details of a user; we expand a tile and have embedded some controls within it for the data input.

  Unfortunately we are having a strange issue when only a single tile is shown within the view.  When we expand that tile, it correctly expands to the width of the view, but the height does not change and the contents of the expanded tile are shown but clipped.  Creating a second tile in the view and expanding the same tile works correctly however.

  We are a little stuck at wondering what could be causing this, any ideas would be welcome.

Many thanks,
Steve

[Zarko]

Hi Stephen,
Could you please send us some code snippets on how you define the RadTileView or a project that reproduces this issue because I wasn't able to recreate ti?

Best wishes,
Zarko
the Telerik team

[Eduardo]

Hi Zarko, I work with Stephen on the same project.

I provide you some code snippets for testing if you can repeat the issue. The Tile View is within a HeaderedControl, we are not sure if that could be related..

<telerik:HeaderedContentControl Grid.Row="1" HorizontalContentAlignment="Center" VerticalContentAlignment="Top" Name="HeaderedControlUsers" Style="{StaticResource HeaderedContentControlListStyle}"
    Header="Users" BorderThickness="1,0,1,1">
    <Grid Height="Auto" >
        <telerik:RadTileView Name="RadTileViewUsers"
                                PreviewTilePositionChanged="RadTileViewUsers_PreviewTilePositionChanged"
                                ContentTemplate="{StaticResource ContentTemplate}"
                                ItemTemplate="{StaticResource ItemTemplate}"
                                TileStateChanged="RadTileViewUsers_TilesStateChanged"
                                MinimizedColumnWidth="150" MinimizedRowHeight="150"
                                RowHeight="120"
                                ColumnWidth="140"
                                IsDockingEnabled="True"
                                PreviewTileDragStarted="RadTileViewUsers_PreviewTileDragStarted"
                                ItemContainerStyle="{StaticResource draggableItemStyle}"
                                PreservePositionWhenMaximized="True" IsVirtualizing="True" IsSelectionEnabled="True" SelectionMode="Extended" />
        <telerik:RadGridView x:Name="RadGridViewUsers"
                    Margin="2"
                    RowIndicatorVisibility="Collapsed" IsReadOnly="True"
                    AutoGenerateColumns="False" CanUserFreezeColumns="False"
                    CanUserResizeColumns="False"
                    telerikDragDrop:RadDragAndDropManager.AllowDrag="True" ShowGroupPanel="False" SelectionMode="Extended">
            <telerik:RadGridView.Columns>
                <telerik:GridViewToggleRowDetailsColumn />
                <telerik:GridViewImageColumn Header="Photo" DataMemberBinding="{Binding Image}" ImageHeight="40" ImageWidth="40" />
                <telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}" />
                <telerik:GridViewDataColumn Header="Surname" DataMemberBinding="{Binding Surname}" />
                <telerik:GridViewDataColumn Header="Rank" DataMemberBinding="{Binding Rank}" />
                <telerik:GridViewDataColumn Header="Division" DataMemberBinding="{Binding Division}" />
                <telerik:GridViewDataColumn Header="Position" DataMemberBinding="{Binding Position}" Width="*" />
            </telerik:RadGridView.Columns>
            <telerik:RadGridView.RowDetailsTemplate>
                <DataTemplate>
                    <Grid Width="Auto" HorizontalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="120" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="135" />
                        </Grid.ColumnDefinitions>
                        <Border Grid.Column="0" Grid.RowSpan="6" Grid.Row="0"
                                    VerticalAlignment="Top" HorizontalAlignment="Stretch"
                                    Height="115" Width="115" Margin="15">
                            <Border Margin="0" BorderThickness="1,1,1,1" BorderBrush="Pink">

                                <Image  Source="{Binding Image}"
                                            HorizontalAlignment="Center" VerticalAlignment="Center"
                                            Height="96" Width="96">
                                    <Image.OpacityMask>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="0.935"/>
                                            <GradientStop Offset="1"/>
                                            <GradientStop Color="#00000000"/>
                                            <GradientStop Color="Black" Offset="0.113"/>
                                        </LinearGradientBrush>
                                    </Image.OpacityMask>
                                </Image>
                            </Border>
                        </Border>
                        <TextBlock Text="Name: " Margin="5,13,0,0" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="0" Grid.Column="1"  />
                        <TextBox Name="TBNameG" Text="{Binding Name}" Style="{StaticResource FontRadWrapPane}" Margin="5,10,0,0" Grid.Row="0" Grid.Column="2"  />
                        <TextBlock Text="Surname: " Margin="5,3,0,0" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="1" Grid.Column="1"  />
                        <TextBox Name="TBSurnameG" Text="{Binding Surname}" Margin="5,0,0,0" Grid.Row="1" Grid.Column="2" Style="{StaticResource FontRadWrapPane}" />
                        <TextBlock Text="Login: " Margin="5,3,0,0" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="2" Grid.Column="1"  />
                        <TextBox Name="TBLoginG" Text="{Binding Login}" Margin="5,0,0,0" Grid.Row="2" Grid.Column="2" Style="{StaticResource FontRadWrapPane}" />
                        <TextBlock Text="Password: " Margin="5,4,0,0" Grid.Row="3" Grid.Column="1"  Style="{StaticResource FontRadWrapPaneBold}"/>
                        <PasswordBox Name="PwdG" Password="{Binding Password}" Margin="5,0,0,0" Grid.Row="3" Grid.Column="2"  />
                        <TextBlock Text="Nation: " Margin="5,3,0,0" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="4" Grid.Column="1"  />
                        <TextBox Name="TBNationG" Text="{Binding Nation}" Margin="5,0,0,0" Grid.Row="4" Grid.Column="2" Style="{StaticResource FontRadWrapPane}"  />
                        <TextBlock Text="Phone: " Margin="5,3,0,0" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="5" Grid.Column="1"  />
                        <TextBox Name="TBPhoneG" Text="{Binding PhoneNumber}" Margin="5,0,0,0" Grid.Row="5" Grid.Column="2" Style="{StaticResource FontRadWrapPane}" />
                        <TextBlock Text="Fax: " Margin="5,3,0,10" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="6" Grid.Column="1"  />
                        <TextBox Name="TBFaxG" Text="{Binding FaxNumber}" Margin="5,0,0,10" Grid.Row="6" Grid.Column="2" Style="{StaticResource FontRadWrapPane}" />

                        <TextBlock Text="eMail: " Margin="10,13,0,0" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="0" Grid.Column="3"  />
                        <TextBox Name="TBeMailG" Text="{Binding eMail}" Margin="10,10,0,0" Grid.Row="0" Grid.Column="4" Style="{StaticResource FontRadWrapPane}"/>
                        <TextBlock Text="Mailing Address: " Margin="10,3,0,0" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="1" Grid.Column="3"  />
                        <TextBox Name="TBAddressG" Text="{Binding MailingAddress}" Margin="10,0,0,0" Grid.Row="1" Grid.Column="4" Style="{StaticResource FontRadWrapPane}"/>
                        <TextBlock Text="Rank: " Margin="10,3,0,0" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="2" Grid.Column="3"  />
                        <TextBox Name="TBRankG" Text="{Binding Rank}" Margin="10,0,0,0" Grid.Row="2" Grid.Column="4" Style="{StaticResource FontRadWrapPane}"/>
                        <TextBlock Text="Position: " Margin="10,3,0,0" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="3" Grid.Column="3"  />
                        <TextBox Name="TBPositionG" Text="{Binding Position}" Margin="10,0,0,0" Grid.Row="3" Grid.Column="4" Style="{StaticResource FontRadWrapPane}"/>
                        <TextBlock Text="Division: " Margin="10,3,0,0" Style="{StaticResource FontRadWrapPaneBold}" Grid.Row="4" Grid.Column="3"  />
                        <TextBox Name="TBDivisionG" Text="{Binding Division}" Margin="10,0,0,0" Grid.Row="4" Grid.Column="4" Style="{StaticResource FontRadWrapPane}"/>
                        <StackPanel Grid.Row="6" Grid.Column="4" Margin="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Button Name="ButtonResetUserGrid" Width="28" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Click="ButtonResetUserGrid_Click">
                                <Image Source="/NCOP%20Mgt;component/Images/nav_refresh_blue.png" Stretch="Fill"></Image>
                            </Button>
                            <Button Name="ButtonEditUserGrid" Width="28" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Click="ButtonEditUserGrid_Click">
                                <Image Source="/NCOP%20Mgt;component/Images/ok.png"></Image>
                            </Button>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </telerik:RadGridView.RowDetailsTemplate>
        </telerik:RadGridView>
    </Grid>
</telerik:HeaderedContentControl>

Moreover, we have a content template for this tile view that contains the embedded controls that Stephen mentioned:

<DataTemplate x:Key="ContentTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual" State="Normal">
                <telerik:RadFluidContentControl.SmallContent>
                    <Image Source="{Binding SmallImage}">
                        <ToolTipService.ToolTip>
                            <ToolTip>
                                <StackPanel>
                                    <StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Margin="0 0 0 5" Style="{StaticResource FontToolTipHeader}" Text="{Binding Name}" />
                                            <TextBlock Margin="2 0 0 5" Style="{StaticResource FontToolTipHeader}" Text="{Binding Surname}" />
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Style="{StaticResource FontToolTipBold}" Text="Login: " />
                                            <TextBlock Style="{StaticResource FontToolTipLight}" Text="{Binding Login}" />
                                        </StackPanel>
                                        <TextBlock Style="{StaticResource FontToolTipLight}" Margin="0 0 0 5" Text="{Binding eMail}" />
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Style="{StaticResource FontToolTipBold}" Text="Phone: " />
                                            <TextBlock Style="{StaticResource FontToolTipLight}" Margin="2 0 0 0" Text="{Binding PhoneNumber}" />
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Style="{StaticResource FontToolTipBold}" Text="Rank: " />
                                            <TextBlock Style="{StaticResource FontToolTipLight}" Margin="2 0 0 0" Text="{Binding Rank}" />
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Style="{StaticResource FontToolTipBold}" Text="Division: " />
                                            <TextBlock Style="{StaticResource FontToolTipLight}" Margin="2 0 0 0" Text="{Binding Division}" />
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Style="{StaticResource FontToolTipBold}" Text="Position: " />
                                            <TextBlock Style="{StaticResource FontToolTipLight}" Margin="2 0 0 0" Text="{Binding Position}" />
                                        </StackPanel>
                                    </StackPanel>
                                </StackPanel>
                            </ToolTip>
                        </ToolTipService.ToolTip>
                    </Image>
                </telerik:RadFluidContentControl.SmallContent>
                <telerik:RadFluidContentControl.Content>
                    <Image Source="{Binding Image}">
                        <ToolTipService.ToolTip>
                            <ToolTip>
                                <StackPanel>
                                    <StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Margin="0 0 0 5" Style="{StaticResource FontToolTipHeader}" Text="{Binding Name}" />
                                            <TextBlock Margin="2 0 0 5" Style="{StaticResource FontToolTipHeader}" Text="{Binding Surname}" />
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Style="{StaticResource FontToolTipBold}" Text="Login: " />
                                            <TextBlock Style="{StaticResource FontToolTipLight}" Text="{Binding Login}" />
                                        </StackPanel>
                                        <TextBlock Style="{StaticResource FontToolTipLight}" Margin="0 0 0 5" Text="{Binding eMail}" />
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Style="{StaticResource FontToolTipBold}" Text="Phone: " />
                                            <TextBlock Style="{StaticResource FontToolTipLight}" Margin="2 0 0 0" Text="{Binding PhoneNumber}" />
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Style="{StaticResource FontToolTipBold}" Text="Rank: " />
                                            <TextBlock Style="{StaticResource FontToolTipLight}" Margin="2 0 0 0" Text="{Binding Rank}" />
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Style="{StaticResource FontToolTipBold}" Text="Division: " />
                                            <TextBlock Style="{StaticResource FontToolTipLight}" Margin="2 0 0 0" Text="{Binding Division}" />
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Style="{StaticResource FontToolTipBold}" Text="Position: " />
                                            <TextBlock Style="{StaticResource FontToolTipLight}" Margin="2 0 0 0" Text="{Binding Position}" />
                                        </StackPanel>
                                    </StackPanel>
                                </StackPanel>
                            </ToolTip>
                        </ToolTipService.ToolTip>
                    </Image>
                </telerik:RadFluidContentControl.Content>
                <telerik:RadFluidContentControl.LargeContent>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="160" />
                        </Grid.ColumnDefinitions>
                        <StackPanel Margin="5" Grid.Column="0" Grid.Row="0">
                            <Border BorderThickness="1" BorderBrush="{StaticResource Pad_Header_Background}" CornerRadius="2">
                                <Grid Margin="2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="110" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="30" />
                                    </Grid.RowDefinitions>
                                    <TextBlock Grid.Row="0" Text="Name:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="0" Name="TBName" Text="{Binding Name}" Margin="3" TabIndex="0" Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}" />
                                    <TextBlock Grid.Row="1" Text="Surname:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="1" Name="TBSurname" Text="{Binding Surname}" Margin="3" TabIndex="1" Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}" />
                                    <TextBlock Grid.Row="2" Text="Login:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="2" Name="TBLogin" Text="{Binding Login}" Margin="3" TabIndex="2"  Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}" />
                                    <TextBlock Grid.Row="3" Text="Password:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <PasswordBox Grid.Row="3" Name="TBPwd" Password="{Binding Password}" Margin="3" TabIndex="3"  Grid.Column="1" VerticalAlignment="Bottom"/>
                                    <TextBlock Grid.Row="4" Text="Nation:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="4" Name="TBNation" Text="{Binding Nation}" Margin="3" TabIndex="4" Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}" />
                                    <TextBlock Grid.Row="5" Text="Phone Number:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="5" Name="TBPhone" Text="{Binding PhoneNumber}" Margin="3" TabIndex="5" Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}"/>
                                    <TextBlock Grid.Row="6" Text="Fax Number:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="6" Name="TBFax" Text="{Binding FaxNumber}" Margin="3" TabIndex="6"  Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}"/>
                                    <TextBlock Grid.Row="7" Text="Mailing Address:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="7" Name="TBAddress" Text="{Binding MailingAddress}" TabIndex="7" Margin="3"  Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}"/>
                                    <TextBlock Grid.Row="8" Text="e-Mail:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="8" Name="TBeMail" Text="{Binding eMail}" Margin="3" TabIndex="8"  Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}" />
                                    <TextBlock Grid.Row="9" Text="Division:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="9" Name="TBDivision" Text="{Binding Division}" Margin="3" TabIndex="9" Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}"/>
                                    <TextBlock Grid.Row="10" Text="Rank:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="10" Name="TBRank" Text="{Binding Rank}" Margin="3" TabIndex="10" Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}" />
                                    <TextBlock Grid.Row="11" Text="Position:" Margin="3" Style="{StaticResource FontRadWrapPaneBold}" Grid.Column="0" VerticalAlignment="Center"/>
                                    <TextBox Grid.Row="11" Name="TBPosition" Text="{Binding Position}" Margin="3" TabIndex="11"  Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource FontRadWrapPane}" />
                                    <StackPanel Orientation="Horizontal" Grid.Row="12" Grid.Column="1" HorizontalAlignment="Right">
                                        <Button Name="ButtonResetUser" Width="25" Background="Transparent" TabIndex="12" BorderBrush="Transparent" BorderThickness="0" Click="ButtonResetUser_Click">
                                            <Image Source="/NCOP%20Mgt;component/Images/nav_refresh_blue.png"></Image>
                                        </Button>
                                        <Button Name="ButtonEditUser" Width="25" Background="Transparent" TabIndex="13" BorderBrush="Transparent" BorderThickness="0" Click="ButtonEditUser_Click">
                                            <Image Source="/NCOP%20Mgt;component/Images/ok.png"></Image>
                                        </Button>
                                    </StackPanel>
                                </Grid>
                            </Border>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
                            <Border Name="BorderPhoto" CornerRadius="2" BorderThickness="1" BorderBrush="{StaticResource Pad_Header_Background}" Margin="3" Height="110" Width="110">
                                <Image Source="{Binding LargeImage}" VerticalAlignment="Top" />
                            </Border>
                            <Button Name="ButtonBrowsePhoto" Content="Browse Photo..." Click="ButtonBrowsePhoto_Click" Height="20" Width="100" TabIndex="12" />
                            <TextBlock FontSize="10" Text="Group" Margin="2" Visibility="{Binding Visible}" HorizontalAlignment="Center" />
                        </StackPanel>
                    </Grid>
                </telerik:RadFluidContentControl.LargeContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>

Thanks in advance Zarko.

[Zarko]

Hi Eduardo,
The problem is that you measure the RadTileViews height with infinity (because of the HeaderedContentControl). When you maximize an item and the RadTileView is measured with infinity it checks if there are any minimized items and if there are the sum of their heights becomes the maximized items height and if there aren't the maximized items height is set to 2000px (you can change this with the telerik:TileViewPanel.InfinityHeight attached property).
I can advise you to handle the TilesStateChanged event and change the RadTileView height when you have a maximized item. This the maximized items will always have the same height.
For further references could you please examine the attached project and if you have more questions feel free to ask.

Best wishes,
Zarko
the Telerik team

[Eduardo]

Exactly Zarko, the reason of the problem was what you wrote. I have played with the sizes and MaximizedItem and works as I desired now.

Thank you very much.