tileview target

[Zuhair]

hello guys,

I want to have 6 items and one target with different order

please check the attached picture.

meaning i want the area with the black border to be the target.
when i maximize the red item it will be in the black border area and the orange and yellow items minimized.

however, i want to keep the blue,brown and purple items to be to the right of the screen all the time.

when i maximize  the blue item, the full content should be in the black border and the blue,brow and purple items will remain the same

any ideas...

[Tina Stancheva]

Hello Zuhair,

You can use two RadTileView instances to implement the described scenario. The first RadTileView will have 4 tiles - one maximized and three minimized items. The maximized item can contain a second RadTileView definition which will consist of 3 tiles.

I attached a sample solution where all RadTileView controls are declaratively defined in xaml as I wanted to demonstrated the basic idea of the suggested approach. However, if your solution requires a databinding approach, you can use the same logic to implement it.

Also, I am not sure how you'd like to align the items in the inner RadTileView, but I used an approach with different items sizing. This approach is further described in this blog post.

Kind regards,
Tina Stancheva
the Telerik team

[Zuhair]

Hello Tina,

thank you for your help. it was a very helpful.

now I have three tiles and I want to be able when i maximize one of them the other two visibility will be hidden.
when i minimize or restore the maximized tile the other two tiles should be visible.

i tried the simple code below, but for some reasons it does not work.


here is the xaml:
<telerik:RadTileViewItem  Background="Lavender" TileState="Maximized" x:Name="main" TileStateChanged="main_TileStateChanged">
                
                <telerik:RadTileView ColumnsCount="2" ColumnWidth="Auto"
                        telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
                        telerik:TileViewPanel.IsRowsShrinkEnabled="True"
                        telerik:TileViewPanel.IsSizeBoundToPosition="True"
                        IsItemsSizeInPercentages="True" MinimizedColumnWidth="135" >
                    <telerik:RadTileViewItem Header="Tile A" Background="LightBlue" RestoredWidth="50" x:Name="a1" TileState="Restored" TileStateChanged="a1_TileStateChanged"  />
                    <telerik:RadTileViewItem Header="Tile B" Background="Black" RestoredWidth="50" x:Name="b1" TileState="Restored" TileStateChanged="b1_TileStateChanged" />
                    <telerik:RadTileViewItem Header="Tile C" Background="Pink" RestoredWidth="100" x:Name="c1" TileState="Restored" TileStateChanged="c1_TileStateChanged" />
                </telerik:RadTileView>
                
                
            </telerik:RadTileViewItem>


and here is the c#:

  public void a1_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
 if(a1.TileState.ToString()=="Maximized"){

            
            c1.Visibility = System.Windows.Visibility.Hidden;
            b1.Visibility = System.Windows.Visibility.Hidden;
            
            }

            if (a1.TileState.ToString() == "Restored")
            {
                
                c1.Visibility = System.Windows.Visibility.Visible;
                b1.Visibility = System.Windows.Visibility.Visible;
            }
           
}
your help is very much appreciated

regards
zuhair

[Pavel R. Pavlov]

Hi Zuhair,

Please accept my apology for the delayed response.

In your case, you use the auto resizing logic of the RadTileView control and the better approach is to change the Opacity and the MinimizedColumnWidth properties. Please take a look at the attached project and let me know if it works for you.

Regards,
Pavel R. Pavlov
the Telerik team

[Zuhair]

Thank you so much.

it's running perfectly now.

have a great day and thanks for your help