[Solved] Question about RadTileView

[Marina]

I have a few question about RadTileView control:

1.            I want to add scroll for minimized items (according to this post: http://blogs.telerik.com/blogs/posts/10-07-19/what_s_new_in_telerik_tileview_control_for_silverlight_wpf.aspx )

I added MinimizedHeight in RadTileViewItemStyle (see attached screenshot "MinimizedHeight.jpg") – but there are still no scroll, and Small Content is cut off in the bottom (see attached "sample.jpg")

2.            Is it possible to replace Minimize and Maximize icons (that switches between views) to different images?

3.            I want to add close icon to RadTileViewItem, but I cannot align it to the right. Is it possible to put  "x" icon before minimize\maximize icon? (red "x" on the "sample.jpg" screenshot)

4.            I get an error that "Content is set more than one time" (see attached "ContentError.jpg).

5.            How can we control the order of the items on the screen. We would like to let our users to arrange the items according to their preferences and we should be able to store the order of the items and place them in the right order next time the user login to our site. Can it be done?

This is the Xaml:

 

<UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
             x:Class="VoyantHealth.VoyantFlow.UI.Controls.ViewControl"
             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:vfui="clr-namespace:VoyantHealth.VoyantFlow.UI.Controls"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
             xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
             xmlns:telerikAnimation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
             xmlns:local="clr-namespace:VoyantHealth.VoyantFlow.UI.Controls"
             xmlns:localUC="clr-namespace:VoyantHealth.VoyantFlow.UI.ImagesXaml"
             d:DesignHeight="400"
             d:DesignWidth="400"
             mc:Ignorable="d">

    <UserControl.Resources>
        <local:LocationStatusValueConverter x:Key="locationStatusValueConverter" />
        <local:LocationStyleSelector x:Key="locationStyleSelector" />
        <local:AgentLockStatusImageConverter x:Key="agentLockStatusImageConverter" />
    </UserControl.Resources>
   
    <Grid x:Name="LayoutRoot"
          Background="White">
        <telerikNavigation:RadTileView Name="SiteView" ItemContainerStyleSelector="{StaticResource locationStyleSelector}">
            <telerikNavigation:RadTileView.ItemTemplate>
                <!--Header-->
                <DataTemplate>                  
                        <Grid Margin="3">
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                       
                        <!-- Locked-Unlocked icon -->
                        <ContentControl Grid.Column="0" Grid.Row="0" Margin="1,0,7,0" VerticalAlignment="Top" HorizontalAlignment="Left"
                                        Content="{Binding Converter={StaticResource agentLockStatusImageConverter}}" />

                        <StackPanel Grid.Row="0" Grid.Column="1" Orientation="Vertical">
                            <TextBlock Text="{Binding Path=Location.Name}" Style="{StaticResource HeaderTitle}" />
                            <TextBlock Text="Image Ready" Style="{StaticResource ItalicWhite}" />
                        </StackPanel>                      
                    </Grid>
                </DataTemplate>
            </telerikNavigation:RadTileView.ItemTemplate>
           
            <telerikNavigation:RadTileView.ContentTemplate>
                <DataTemplate>
                    <telerik:RadFluidContentControl telerikAnimation:AnimationManager.IsAnimationEnabled="True">
                                                    SmallToNormalThreshold="291, 132"
                                                    NormalToSmallThreshold="291, 132"
                                                    NormalToLargeThreshold="600, 600"
                                                    LargeToNormalThreshold="600, 600">
                        <!-- Small -->
                        <telerik:RadFluidContentControl.SmallContent>
                            <Grid DataContext="{Binding}">  
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition Height="25"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>

                                <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" BorderThickness="0">
                                    <vfui:PatientDetailsUC Grid.Row="0" Grid.Column="0" DataContext="{Binding}"></vfui:PatientDetailsUC>
                                </ScrollViewer>

                                <!--Footer Status-->
                                <Grid Grid.Row="1" Grid.Column="0" VerticalAlignment="Bottom">
                                    <Rectangle Style="{StaticResource RectangleBlue}"></Rectangle>
                                    <TextBlock Text="{Binding Path=Location.LocationStatus, Converter={StaticResource locationStatusValueConverter}, Mode=OneWay}"
                                                Margin="10,0,5,2"
                                                Style="{StaticResource White}"
                                                VerticalAlignment="Center"
                                                HorizontalAlignment="Left"></TextBlock>
                                </Grid>
                            </Grid>
                        </telerik:RadFluidContentControl.SmallContent>
                        <!-- Normal -->
                        <telerik:RadFluidContentControl.Content>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition Height="25"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>

                                <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" BorderThickness="0">
                                    <vfui:PatientDetailsUC Grid.Row="0" Grid.Column="0" DataContext="{Binding}"></vfui:PatientDetailsUC>
                                </ScrollViewer>

                                <!--Footer Status-->
                                <Grid Grid.Row="1" Grid.Column="0" VerticalAlignment="Bottom">
                                    <Rectangle Style="{StaticResource RectangleBlue}"></Rectangle>
                                    <TextBlock Text="{Binding Path=Location.LocationStatus, Converter={StaticResource locationStatusValueConverter}, Mode=OneWay}"
                                                Margin="10,0,5,2"
                                                Style="{StaticResource White}" VerticalAlignment="Center"
                                                HorizontalAlignment="Left"></TextBlock>
                                </Grid>
                            </Grid>
                        </telerik:RadFluidContentControl.Content>
                        <!-- Large -->
                        <telerik:RadFluidContentControl.LargeContent>
                            <Grid DataContext="{Binding}">
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition Height="25"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>

                                <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" BorderThickness="0">
                                    <vfui:PatientDetailsUC Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" DataContext="{Binding}"></vfui:PatientDetailsUC>
                                </ScrollViewer>

                                <!--Footer Status-->
                                <Grid Grid.Row="1" Grid.Column="0" VerticalAlignment="Bottom">
                                    <Rectangle Style="{StaticResource RectangleBlue}"></Rectangle>
                                    <TextBlock Text="{Binding Path=Location.LocationStatus, Converter={StaticResource locationStatusValueConverter}, Mode=OneWay}"
                                                Margin="10,0,5,2"
                                                Style="{StaticResource White}"
                                                VerticalAlignment="Center"
                                                HorizontalAlignment="Left"></TextBlock>
                                </Grid>                              
                            </Grid>
                        </telerik:RadFluidContentControl.LargeContent>
                    </telerik:RadFluidContentControl>
                </DataTemplate>
            </telerikNavigation:RadTileView.ContentTemplate>
        </telerikNavigation:RadTileView>
    </Grid>
</UserControl>

 

 

 

Thank you,

Marina

[Tina Stancheva]

Hello Marina,

Please accept my apology for the delayed response. I will get straight to your questions.

1. I couldn't reproduce this issue. Please take a look at the attached project and let me know if I am missing something.

2. Yes, it is possible to modify the Minimize/Maximize icons. In order to do so, you have to edit the ControlTemplate of the RadTileViewItem. Here you can find more information about editing RadControl's ControlTemplates in Blend.
Then you can modify the template of the MaximizeToggleButton element by changing the content of the Restore and Collapse Grid elements to fit your requirements. Also, please keep in mind that there are VisualStates that might also be affected by the changes you apply so you might need to modify them accordingly.

3. This can also be achieved by modifying the ControlTemplate of the RadTileViewItem. You can wrap the MaximizeToggleButton in a Grid and add a second column to that Grid and place the Close icon in it.

4. I noticed that you have closed the RadFluidContentControl before adding the threshold values which was causing the error:

<telerik:RadFluidContentControl telerikAnimation:AnimationManager.IsAnimationEnabled="True">
        SmallToNormalThreshold="291, 132"
        NormalToSmallThreshold="291, 132"
        NormalToLargeThreshold="600, 600"
        LargeToNormalThreshold="600, 600">

5. By design the RadTileView doesn't update its source collection when the tiles are reordered. However, you can handle the TileDragEnded() event to manually update the collection, for example like so:

private void SiteView_TileDragEnded(object sender, Telerik.Windows.Controls.TileViewDragEventArgs e)
{
    //dragged item
    MyViewModel item = (e.DraggedItem as RadTileViewItem).DataContext as MyViewModel;
    //drop position
    int index = (e.DraggedItem as RadTileViewItem).Position;

    var items = new ObservableCollection<MyViewModel>(this._tilesCollection);

    //remove the dragged item from the collection
    items.Remove(item);

    //insert the dragged item to the noew position
    items.Insert(index, item);

    //update the DataItems collection
    TilesCollection = items;
}

I prepared a sample project illustrating a possible approach towards your scenario. Please take a look at it and let me know if it helps or if you need more info.

All the best,
Tina Stancheva
the Telerik team

[Jonx]

Hello,
I would like just to hide the icon buttons so that I can use the tiles to simulate a groupbox.
Can this be done simply without having to redefine all the control templates?
Thank you,
John.

[Zarko]

Hello John,

 At the moment there is no other way to achieve this than to edit the template of the RadTileViewItems. Could you please examine the attached project and if you have further questions feel free to ask ?

Regards,

Zarko

the Telerik team

[Jonx]

There should be an icon list that provide easy access to the icon. So that we can add new ones or remove them.

But thanks for the sample. Works like a charm.

John.

[Zarko]

Hello John,

 Thank you for your suggestion, I've added it  in our PITS under the name"TileView: Add ToggleButtonStyle" and it will be ready for tracking and voting tomorrow the latest.  

Best wishes,

Zarko

the Telerik team

[Jonx]

Hello Zarlo,
What about doing it by code like that:

private void radTileView1_TilesStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            RadTileViewItem item = e.OriginalSource as RadTileViewItem;

            foreach (RadToggleButton btn in item.ChildrenOfType<RadToggleButton>())
            {
                btn.Visibility = System.Windows.Visibility.Collapsed;
            }
        }

I saw some samples here and there showing that code but this is not working for me.
I can see that the control is present in the controls tree but there is no way I can get my hand on it...

Any hints on how to find the button by code?

Thanks a lot for your help,
John.

[Zarko]

Hi John,
I guess that the by the time the TilesStateChanged event is called the RadTileViewItems still hasn't applied their templates and that's why you can't get the RadToggleButton. You can try to put this in a Dispatcher or you can try to handle the StatusChanged event of the ItemContainerGenerator and in it collapse the buttons.
Could you please examine the sample attached project and if you have more questions please feel free to ask.

Greetings,
Zarko
the Telerik team

[Jonx]

Hello,

The main problem was that I was only using a TileViewItem without a parent TileView.
Once I added a parent TileView I was able to use the Dispatcher method you suggested...

It works nicely, thank you very much, exactly what I wanted...

John.

<telerik:RadTileView x:Name="myTileView" MinimizedColumnWidth="250">
                <telerik:RadTileViewItem Header="Messages" TileState="Minimized" TileStateChanged="RadTileViewItem_TileStateChanged" Name="messages" >
...
                </telerik:RadTileViewItem>
            </telerik:RadTileView>

private void RadTileViewItem_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            RadTileViewItem item = e.OriginalSource as RadTileViewItem;

            this.Dispatcher.BeginInvoke(new Action(() =>
            {
                RadToggleButton btn = item.ChildrenOfType<RadToggleButton>().FirstOrDefault();
                if (btn != null)
                    btn.Visibility = System.Windows.Visibility.Collapsed;
            }));

        }