Minimizing TileView in UI for Silverlight

This is a migrated thread and some comments may be shown as answers.

Minimizing TileView

4 Answers 74 Views

TileView

This is a migrated thread and some comments may be shown as answers.

Naren asked on 22 Nov 2010, 11:48 AM

onmiximizingtile1.jpg

initial.jpg

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.

4 Answers, 1 is accepted

answered on 23 Nov 2010, 10:39 AM

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.

Accepted

answered on 23 Nov 2010, 01:40 PM

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

Browse the videos here>> to help you get started with RadControls for Silverlight