RenderSize in RadTileView

[Aleksey]

Hellow, i have RadTileView controll, which property itemsource bind to my observable collection CommonAssets.My collection has several elements, when I start to delete all items except one, RenderSize in the control does not change as long as I do not re-add a new element to the collection. 
Help me please.


 <UserControl.Resources>

        <DataTemplate x:Key="MeasureItem" >
            <Grid Background="{StaticResource MainWindowBorderBrush}" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="240"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <CheckBox Grid.Column="0" Grid.RowSpan="6" VerticalAlignment="Center" Background="{StaticResource LightGrayBrush}" Cursor="Hand" IsChecked="{Binding Selected,Mode=TwoWay}"/>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="Название" Style="{StaticResource White18TextStyle}" />
                <Label Grid.Row="0" Grid.Column="2" Content="{Binding Name}" Style="{StaticResource EditableLabelStyle}" FontSize="16" MinWidth="50" 
                       Foreground="{StaticResource LightGrayBrush}" Margin="0,-5,0,0" />
                <TextBlock Grid.Row="1" Grid.Column="1" Text="Итоговая доза" Style="{StaticResource White18TextStyle}" Margin="0,20,0,0"/>
                <telerik:RadComboBox Grid.Row="1" Grid.Column="2"  Style="{DynamicResource TransparentComboboxStyle}" ItemsSource="{Binding FinalDoseAssetNames}" Margin="0,20,0,0"
                                     SelectedValue="{Binding SelectFinalDozeAssetName}" />
                <TextBlock Grid.Row="2" Grid.Column="1" Style="{StaticResource White18TextStyle}" Text="Значения для уровней" Margin="0,20,0,0"/>
                <PM:DataRangeSliderCtrl  Grid.Row="3" Grid.Column="1" Margin="0,20,0,20" />
                <PM:KnobSliderCtrl x:Name="KnobSlider" Grid.Row="2" Grid.RowSpan="2"  Grid.Column="2" Margin="0,50,0,0" DataContext="{Binding KnobSliderDataContext}" Opacity="0.5"
                                   vM:BaseViewModel.StatusTips="Выберите единицы измерения для радиационного фона"/>
            </Grid>
            <DataTemplate.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard Storyboard="{StaticResource ActivateKnobSlider}" />
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard Storyboard="{StaticResource DiactivateKnobSlider}"/>
                    </EventTrigger.Actions>
                </EventTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </UserControl.Resources>
    <Grid Margin="-6,-30,0,0" >
        <Grid.RowDefinitions>
            <RowDefinition Height="35"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <toolbars:EditPanel  Grid.Row="0" DataContext="{Binding EditPanel}" HorizontalAlignment="Center" VerticalAlignment="Bottom" VerticalContentAlignment="Bottom" Foreground="{StaticResource MainWindowBorderBrush}"/>
        <telerik:RadTileView x:Name="TileView" Grid.Row="1" ItemsSource="{Binding CommonAssets}" Style="{StaticResource HiddenTitleGrayStyle}" BorderBrush="Transparent" 
                             MinimizedColumnWidth="480" MinimizedRowHeight="325" RowHeight="325" MaxWidth="1500" ColumnsCount="3" MaximizeMode="Zero"
                             ContentTemplate="{StaticResource MeasureItem}" HeaderStyle="{StaticResource GrayTileViewItemStarStyle}" ItemContainerStyle="{StaticResource ReordableItemStyle}"
                             PreviewTilePositionChanged="{bindExtension:EventBinding PreviewTilePositionChanged}" >
            <telerik:RadTileView.Resources>
                <DataTemplate DataType="{x:Type pMe:ProtectiveMeasuresAssetVM}"/>
            </telerik:RadTileView.Resources>
            <i:Interaction.Behaviors>
                <behaviors:RadTilesDragDropBehavior/>
            </i:Interaction.Behaviors>
        </telerik:RadTileView>
    </Grid>

[Aleksey]

  <Style x:Key="HiddenTitleGrayStyle" TargetType="{x:Type telerik:RadTileView}">
        <Setter Property="IsAutoScrollingEnabled" Value="False"/>
        <Setter Property="AllowDrop" Value="True"/>
        <Setter Property="telerik:DragDropManager.AllowDrag" Value="True"/>
    </Style>

    
    <Style x:Key="ReordableItemStyle" TargetType="telerik:RadTileViewItem">
        <Setter Property="Position" Value="{Binding Position, Mode=TwoWay,Converter={converters:TilePositionConverter}}" />
        <Setter Property="TileState" Value="Restored" />
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="AllowDrop" Value="True"/>
    </Style>
    <!--TileViewItemHeader-->
    <Style x:Key="GrayTileViewItemStarStyle" TargetType="Telerik_Windows_Controls_TileView:TileViewItemHeader">
        <Setter Property="Background" Value="{DynamicResource MainWindowBorderBrush}" />
        <Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey=MainBrush}" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Telerik_Windows_Controls_TileView:TileViewItemHeader">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Border Padding="10 0 7 0" Background="{TemplateBinding Background}">
                            <Grid MinHeight="28">
                                <Border x:Name="GripBarElement"
Background="Transparent">
                                    <ContentPresenter x:Name="HeaderElement"
 ContentTemplate="{TemplateBinding ContentTemplate}"
 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"/>
                                </Border>

                                <CheckBox  Style="{DynamicResource StarCheckStyle}"  Width="15" Height="15"  HorizontalAlignment="Right"/>
                            </Grid>
                        </Border>
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

[Martin Ivanov]

Hello Aleksey,

I am not sure that I fully understand your requirement but my guess is that you are asking why the RenderSize of the RadTileViewItems is not changed when you remove certain number of items from the tileview. If so, this is caused by the fact that the ColumnCount property of the control is set (in your case to 3). This will force the RadTileView to allocate space for as much items as the value of the ColumnCount property is set to. For example if the ColumnCount is set to 3 and each item has width of 200px the width of the tile view will be around 3x200px even if you have only one item in it. 

If you want your items to fit in the tileview you can change the ColumnCount property after removing your items. You can do something like this:

// On remove items

if (this.radTileView.ItemsSource.Count < this.radTileView.ColumnsCount)
{
    this.radTileView.ColumnsCount = this.radTileView.ItemsSource.Count;
}

You can also take a look at the Rows and Columns help article.

Please let me know if I am missing something. In that case, can you send me an isolated project which demonstrates the reported behavior and a drawing with the expected result. This will help me in understanding your scenario better and assist you further.

Regards,
Martin
Telerik

 

 

[Aleksey]

No, it did not help.  I can not attach my isolated project because i have error "The selected file(s) cannot be attached because it may exceed the maximum attachment size (2 MB) or is from not allowed type (allowed: .gif, .jpg, .jpeg, .png)." How i can send my project?

[Aleksey]

This is DemoProj. I add several items in my RadTileView and ScroolBar becomes Visible, than i remove all except one item, but scroolBar still Visible, why?
https://dl.dropboxusercontent.com/u/2610931/TileViewTest.7z

[Martin Ivanov]

Hello Aleksey,

Thank you for the provided project.

I can confirm that this is a bug in the RadTileView. I logged it in our feedback portal where you can track its status. I also updated your Telerik points as a small compensation for any inconvenience caused.

As a workaround you can change the RowHeight property of the tileview. This will remove the scrollbar.

this.tileView.RowHeight = new GridLength(this.tileView.RowHeight.Value + 1);
this.tileView.RowHeight = new GridLength(this.tileView.RowHeight.Value - 1);

In your scenario where you execute a Command when the button is clicked and you don't have direct access to the tileview, you can define a RowHeight property in your view model that you can bind to the RowHeight of the tileview and change its value when the Command is executed.

public ICommand Remove { get
{
    return mRemove ?? (mRemove = new RelayCommand(o =>
    {
        while (CommonAssets.Count > 1)
        {
            CommonAssets.Remove(CommonAssets[0]);
        }

        this.RowHeight += 1;
        this.RowHeight -= 1;
    }));
} }

In addition I updated the provided project.

Regards,
Martin
Telerik