Layout creation in tile view

6 posts, 0 answers
  1. PIyush
    PIyush  avatar
    3 posts
    Member since:
    Jun 2009

    Posted 26 Jul 2012 Link to this post

    Hi,

    I am creating layout using  tile view, which would be having two rows, first row would contain 5 tiles of equal width and second row would be containing only one tile occupying 100% width of tile view, i want this tile to be non draggable(Position would be fixed).
    Could you please help me in creating this layout?

    Thanks and Regards
    Sanjay Singh



  2. PIyush
    PIyush  avatar
    3 posts
    Member since:
    Jun 2009

    Posted 26 Jul 2012 Link to this post

    Hi ,

    I tried with following xaml, set the IsItemsSizeInPercentages="True" and specified the restored width of each tile to 20% as there are five tiles in first row and in second row there is only one tile with restored width 100%. "actual layout.png" is generated with following xaml. But i want it to be like "expected layout.png" which is attached with this post.
     

    <UserControl x:Class="Tilelook.MainPage"
        mc:Ignorable="d"
        xmlns:local ="clr-namespace:Tilelook"
        xmlns:tileview="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"         
        d:DesignHeight="300" d:DesignWidth="400">
        <UserControl.Resources>
            <Style x:Key="TileViewItemHeaderStyle1" TargetType="tileview:TileViewItemHeader">
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="FontSize" Value="14" />
                <Setter Property="FontFamily" Value="Segoe UI" />
                <Setter Property="Background" Value="#ffd520" />
            </Style>
            <Style TargetType="telerik:RadTileViewItem">
                <Setter Property="Padding" Value="3" />
                <Setter Property="BorderBrush" Value="Blue" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="HeaderStyle" Value="{StaticResource TileViewItemHeaderStyle1}" />
            </Style>
        </UserControl.Resources>
      
        <Grid x:Name="LayoutRoot"  Background="White">                
            <telerik:RadTileView x:Name="ParentTileView"   IsItemsSizeInPercentages="True" PreservePositionWhenMaximized="True" MinimizedRowHeight="Auto"  ColumnWidth="Auto" RowHeight="Auto"   telerik:TileViewPanel.IsSizeBoundToPosition="True"  telerik:TileViewPanel.IsRowsShrinkEnabled="True"    telerik:TileViewPanel.IsColumnsShrinkEnabled="True"   MinimizedColumnWidth="150">
                <telerik:RadTileViewItem  Header="GaugeKPI" RestoredHeight="50" RestoredWidth="20">              
                        <local:GaugeControl />                
                </telerik:RadTileViewItem>
                <telerik:RadTileViewItem   Header="TrendKPI" RestoredHeight="50" RestoredWidth="20"  >
                    <local:GaugeControl />
                </telerik:RadTileViewItem>
                <telerik:RadTileViewItem  Header="GaugeKPI" RestoredHeight="50" RestoredWidth="20" >
                    <local:GaugeControl />
                </telerik:RadTileViewItem>
                <telerik:RadTileViewItem   Header="TrendKPI" RestoredHeight="50" RestoredWidth="20"  >
                    <local:GaugeControl />
                </telerik:RadTileViewItem>
                <telerik:RadTileViewItem  Header="TrendKPI" RestoredHeight="50" RestoredWidth="20" >
                    <local:GaugeControl />
                </telerik:RadTileViewItem>          
                <telerik:RadTileViewItem  Header="Grid" RestoredHeight="50" RestoredWidth="100" >
                    <local:GaugeControl />
                </telerik:RadTileViewItem>
            </telerik:RadTileView>
        </Grid>
    </UserControl>

    I need this layout on urgent basis. Any help would be highly appreciated.


    Thanks and Regards
    Sanjay Singh
  3. DevCraft banner
  4. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 27 Jul 2012 Link to this post

    Hello Trilok,
    Could you please try to set the ColumnsCount property of the RadTileView to 5? This should fix the layout issue, as for the not pinned item - you should handle the PreviewTilePositionChanged and PreviewTileDragStarted events with something like this:
    private void ParentTileView_PreviewTilePositionChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
    {
        if (e.OriginalSource.Equals(this.pinnedItem))
            e.Handled = true;
    }
     
    private void ParentTileView_PreviewTileDragStarted(object sender, TileViewDragEventArgs e)
    {
        if (e.DraggedItem.Equals(this.pinnedItem))
            e.Handled = true;
    }
    If you have more questions please feel free to ask.

    All the best,
    Zarko
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. FENWICK
    FENWICK avatar
    30 posts
    Member since:
    Jul 2010

    Posted 23 Aug 2012 Link to this post

    Hi,

    I have the same problem but i need three rows. So the proposed solution isn't good for me.

    <tlk:RadTileView x:Name="_tile" DragMode="Swap" tlk:TileViewPanel.IsSizeBoundToPosition="True" RowHeight="Auto"  ColumnWidth="Auto" ColumnsCount="5"
                      PreservePositionWhenMaximized="true"
                      tlk:TileViewPanel.IsColumnsShrinkEnabled="True" tlk:TileViewPanel.IsRowsShrinkEnabled="True"
                      IsItemsSizeInPercentages="True"
                      >
       <!--1 row -->
       <tlk:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
       <tlk:RadTileViewItem RestoredHeight="20" RestoredWidth="20"/>
       <tlk:RadTileViewItem RestoredHeight="20" RestoredWidth="20"/>
       <tlk:RadTileViewItem RestoredHeight="20" RestoredWidth="20"/>
       <tlk:RadTileViewItem RestoredHeight="20" RestoredWidth="20"/>
       <!-- 2 row -->
       <tlk:RadTileViewItem RestoredHeight="50" RestoredWidth="50"/>
       <tlk:RadTileViewItem RestoredHeight="50" RestoredWidth="50"/>
     <!-- 3 row -->
       <tlk:RadTileViewItem RestoredHeight="30" RestoredWidth="100"/>
     </tlk:RadTileView>


    Why the max column when you don't specify columnscount is 3 ?
    What is the solution for my issue ?


    Thanks,
  6. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 27 Aug 2012 Link to this post

    Hello,
    The problem is that the RadTileView was not designed to allow different number of items on each row. This means that you'll have to place 3 "invisible" (they are too small to be seen) items after the 2 larger items on your second row, so that there are 5 items in it as in the first row.
    Could you please try this XAML:
    <telerik:RadTileView x:Name="_tile"
                   ColumnsCount="5"
                   ColumnWidth="Auto"
                   DragMode="Swap"
                   IsItemsSizeInPercentages="True"
                   PreservePositionWhenMaximized="true"
                   RowHeight="Auto"
                   MinimizedColumnWidth="200"
                   telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
                   telerik:TileViewPanel.IsRowsShrinkEnabled="True"
                   telerik:TileViewPanel.IsSizeBoundToPosition="True">
        <!--  1 row  -->
        <telerik:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
        <telerik:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
        <telerik:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
        <telerik:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
        <telerik:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
        <!--  2 row  -->
        <telerik:RadTileViewItem RestoredHeight="50" RestoredWidth="49.8" />
        <telerik:RadTileViewItem RestoredHeight="50" RestoredWidth="49.8" />
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="50" RestoredWidth="0.1" MinimizedHeight="1" />
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="50" RestoredWidth="0.1" MinimizedHeight="1" />
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="50" RestoredWidth="0.1" MinimizedHeight="1" />
        <!--  3 row  -->
        <telerik:RadTileViewItem RestoredHeight="30" RestoredWidth="100" />
    </telerik:RadTileView>
    If you have further questions please feel free to ask.

    Regards,
    Zarko
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. FENWICK
    FENWICK avatar
    30 posts
    Member since:
    Jul 2010

    Posted 27 Aug 2012 Link to this post

    Thanks for your reply.

    Your hack works. I put 0.001 to "RestoredWidth " for hidden tiles because 0.1 is visible to the eye.

    Thanks
Back to Top
DevCraft banner