Minimizing TileView

[Naren]

I have TileView with 4 TileViewItems as shown in attached Initial.jpg.
Each TileViewItem shows ListBox as in Image.
Whenever I maximize any TileViewItem it shows Corresponding ListBox Items as Square shpes(One Square for each ListBoxItem) as shown in attached OnMiximizingTile1.jpg image.

Suppose now i maximize another TileViewItem then remaining TileViewItems shows ListBox as in initial.jpg......

But when i minimize that Maximized TileViewItem  then that TileViewItem shows Square images inside it instead of showing ListBox......while remining shows ListBox..................

How can i solve this so that If i minimize a TileViewItem then it will show ListBox and not Squares......
It should show squares only  in maximized state.....


Note : I am generating TileView and its contents in code behind .

Thanks in advance.

[Kiril Stanoev]

Hello Naren,

Are you using FluidContentControl? If this is the case, I believe this article will help you. If this doesn't help, could you please share more details on the scenario you are trying to achieve. I'd be glad to further assist you.

All the best,
Kiril Stanoev
the Telerik team

[Naren]

Hi  Kiril Stanoev ,
   To know my problem can you please create a silverlight Project and paste following code in code behind file and then after running application you will come to know my problem.

List<string> strList = new List<string>();

            RadTileView enterpriseView = new RadTileView();

            for (int i = 0; i < 4;i++ )
            {
                RadTileViewItem modelTypeItem = new RadTileViewItem();
                modelTypeItem.Header = "Tile " + i;
                RadFluidContentControl contentControl = new RadFluidContentControl();

                ScrollViewer objscroll = new ScrollViewer();
                StackPanel panel = new StackPanel();
                panel.Orientation = Orientation.Vertical;
                    SolidColorBrush panelBackground = new SolidColorBrush();
                    panelBackground.Color = Color.FromArgb(255, 200, 239, 241);
                    panel.Background = panelBackground;
                for (int index = 0; index < 3; index++)
                {
                    TextBlock txtBlk = new TextBlock();
                    txtBlk.Text = "Large Content TextBlock : " + (index + 1);
                    strList.Add(txtBlk.Text);
                    panel.Children.Add(txtBlk);
                }
                objscroll.HorizontalScrollBarVisibility = System.Windows.Controls.ScrollBarVisibility.Auto;
                objscroll.VerticalScrollBarVisibility = System.Windows.Controls.ScrollBarVisibility.Auto;
                objscroll.Content = panel;
                contentControl.LargeContent = objscroll;

                ScrollViewer objScrollNormal = new ScrollViewer();
                System.Windows.Controls.ListBox listbox = new System.Windows.Controls.ListBox();
                StackPanel stkNormal = new StackPanel();
                stkNormal.Orientation = Orientation.Vertical;
                for (int index = 0; index < 3; index++)
                {
                    System.Windows.Controls.ListBoxItem item = new System.Windows.Controls.ListBoxItem();
                    item.Content = strList[index];
                    listbox.Items.Add(item);
                }
                stkNormal.Children.Add(listbox);
                objScrollNormal.HorizontalScrollBarVisibility = System.Windows.Controls.ScrollBarVisibility.Auto;
                objScrollNormal.VerticalScrollBarVisibility = System.Windows.Controls.ScrollBarVisibility.Auto;
                objScrollNormal.Content = stkNormal;
                contentControl.Content = objScrollNormal;

                contentControl.SmallToNormalThreshold = new Size(400, 400);
                contentControl.NormalToSmallThreshold = new Size(400,400);
                contentControl.NormalToLargeThreshold = new Size(600, 600);
                contentControl.LargeToNormalThreshold = new Size(600, 600);

                modelTypeItem.Content = contentControl;
                enterpriseView.Items.Add(modelTypeItem);

            }
            LayoutRoot.Children.Add(enterpriseView);

Follow Following steps after running application to get my question :
1. Maximize any of the TileViewItem
2. Then minimize that Item......
Here after minimizing TileViewItem I did not get the screen as it was after loading.........The minimized TileViewItem did not show ListBox ......
Thanks in advance.

[Kiril Stanoev]

Hi Naren,

I've modified your code so that it uses the tips shown in help article I gave you. Here it is:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        List<string> strList = new List<string>();

        RadTileView enterpriseView = new RadTileView();

        enterpriseView.TileStateChanged += new System.EventHandler<Telerik.Windows.RadRoutedEventArgs>(EnterpriseView_TileStateChanged);

        for (int i = 0; i < 4; i++)
        {
            RadTileViewItem modelTypeItem = new RadTileViewItem();
            modelTypeItem.Header = "Tile " + i;
            RadFluidContentControl contentControl = new RadFluidContentControl();

            // LARGE CONTENT
            ScrollViewer objscrollLarge = new ScrollViewer();
            StackPanel panel = new StackPanel();
            panel.Orientation = Orientation.Vertical;
            SolidColorBrush panelBackground = new SolidColorBrush();
            panelBackground.Color = Color.FromArgb(255, 200, 239, 241);
            panel.Background = panelBackground;
            for (int index = 0; index < 3; index++)
            {
                TextBlock txtBlk = new TextBlock();
                txtBlk.Text = "Large Content TextBlock : " + (index + 1);
                strList.Add(txtBlk.Text);
                panel.Children.Add(txtBlk);
            }
            objscrollLarge.HorizontalScrollBarVisibility = System.Windows.Controls.ScrollBarVisibility.Auto;
            objscrollLarge.VerticalScrollBarVisibility = System.Windows.Controls.ScrollBarVisibility.Auto;
            objscrollLarge.Content = panel;
            contentControl.LargeContent = objscrollLarge;

            // NORMAL CONTENT
            ScrollViewer objScrollNormal = new ScrollViewer();
            System.Windows.Controls.ListBox listbox = new System.Windows.Controls.ListBox();
            StackPanel stkNormal = new StackPanel();
            stkNormal.Orientation = Orientation.Vertical;
            for (int index = 0; index < 3; index++)
            {
                System.Windows.Controls.ListBoxItem item = new System.Windows.Controls.ListBoxItem();
                item.Content = strList[index];
                listbox.Items.Add(item);
            }
            stkNormal.Children.Add(listbox);
            objScrollNormal.HorizontalScrollBarVisibility = System.Windows.Controls.ScrollBarVisibility.Auto;
            objScrollNormal.VerticalScrollBarVisibility = System.Windows.Controls.ScrollBarVisibility.Auto;
            objScrollNormal.Content = stkNormal;
            contentControl.Content = objScrollNormal;

            // SMALL CONTENT
            ScrollViewer objScrollSmall = new ScrollViewer();
            System.Windows.Controls.ListBox listboxSmall = new System.Windows.Controls.ListBox();
            StackPanel stkSmall = new StackPanel();
            stkSmall.Orientation = Orientation.Vertical;
            for (int index = 0; index < 3; index++)
            {
                System.Windows.Controls.ListBoxItem item = new System.Windows.Controls.ListBoxItem();
                item.Content = strList[index];
                listboxSmall.Items.Add(item);
            }
            stkSmall.Children.Add(listboxSmall);
            objScrollSmall.HorizontalScrollBarVisibility = System.Windows.Controls.ScrollBarVisibility.Auto;
            objScrollSmall.VerticalScrollBarVisibility = System.Windows.Controls.ScrollBarVisibility.Auto;
            objScrollSmall.Content = stkSmall;
            contentControl.SmallContent = objScrollSmall;

            // We need to set the ContentChangeMode to Manual so we can use the logic in EnterpriseView_TileStateChanged
            contentControl.ContentChangeMode = ContentChangeMode.Manual;

            modelTypeItem.Content = contentControl;
            enterpriseView.Items.Add(modelTypeItem);
        }
        LayoutRoot.Children.Add(enterpriseView);
    }

    private void EnterpriseView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
    {
        RadTileViewItem item = e.OriginalSource as RadTileViewItem;
        RadFluidContentControl fluidContentControl = item.Content as RadFluidContentControl;
        switch (item.TileState)
        {
            case TileViewItemState.Maximized:
                fluidContentControl.State = FluidContentControlState.Large;
                break;
            case TileViewItemState.Minimized:
                fluidContentControl.State = FluidContentControlState.Small;
                break;
            case TileViewItemState.Restored:
                fluidContentControl.State = FluidContentControlState.Normal;
                break;
            default:
                break;
        }
    }
}

Give it a try and let me know how it suits you.

Best wishes,
Kiril Stanoev
the Telerik team

[Naren]

Thank you Kiril Stanoev it worked.