Question about RadTileView

9 posts, 0 answers
  1. Marina
    Marina avatar
    1 posts
    Member since:
    Sep 2010

    Posted 12 Sep 2010 Link to this post

    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

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 16 Sep 2010 Link to this post

    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
    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. Jonx
    Jonx avatar
    258 posts
    Member since:
    Jul 2012

    Posted 31 Oct 2010 Link to this post

    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.
  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 02 Nov 2010 Link to this post

    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
    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
  6. Jonx
    Jonx avatar
    258 posts
    Member since:
    Jul 2012

    Posted 02 Nov 2010 Link to this post

    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.
  7. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 04 Nov 2010 Link to this post

    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
    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
  8. Jonx
    Jonx avatar
    258 posts
    Member since:
    Jul 2012

    Posted 03 Oct 2011 Link to this post

    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.

  9. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 06 Oct 2011 Link to this post

    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

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

  10. Jonx
    Jonx avatar
    258 posts
    Member since:
    Jul 2012

    Posted 08 Oct 2011 Link to this post

    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;
                }));
     
            }
Back to Top
DevCraft banner