I have a TileView control on my page which is set to 800px height and MaxColumns is set to 2. The TileViewItems are added programmatically and all needs to use a height of 200px. Setting the height property of the TileViewItem does not work; all items are using the 800px height of the TileView control automatically.
Is there a way to specify the height of a TileViewItem?
Thanks,
Danny
19 Answers, 1 is accepted
I also want to know how can we set RadFluidContentControl 's ..telerik:RadFluidContentControl.SmallContent -height & Width
any idea...
I want make my RadFluidContentControl.SmallContent Property content "square"
Hope i can answer this post as soon as possible
Thanks In Advance
@Danny
It depends how you add the TileViewItems. Let's assume that you are creating RadTileViewItem objects and you are adding them to RadTileView. You will have to set MinimizedHeight to each TileViewItem before adding it to the TileView.
for
(
int
i = 0; i < 5; i++)
{
RadTileViewItem item =
new
RadTileViewItem();
item.Header =
"Item "
+ i;
item.MinimizedHeight = 100;
this
.tileView1.Items.Add(item);
}
<
telerikNavigation:RadTileView
x:Name
=
"tileView1"
Width
=
"800"
Height
=
"800"
/>
If you are binding your TileView to a collection of objects, you will have to set an ItemContainerStyle:
<
telerikNavigation:RadTileView
x:Name
=
"tileView1"
Width
=
"800"
Height
=
"800"
>
<
telerikNavigation:RadTileView.ItemContainerStyle
>
<
Style
TargetType
=
"telerikNavigation:RadTileViewItem"
>
<
Setter
Property
=
"MinimizedHeight"
Value
=
"100"
/>
</
Style
>
</
telerikNavigation:RadTileView.ItemContainerStyle
>
</
telerikNavigation:RadTileView
>
this
.tileView1.ItemsSource = Enumerable.Range(0, 5);
The output from both approaches should be something like the one bellow:
@Vir
You can set size to the first panel in the SmallContent property of RadFluidContentControl:
<
telerik:RadFluidContentControl
>
<
telerik:RadFluidContentControl.SmallContent
>
<
Grid
Width
=
"200"
Height
=
"200"
>
<!--Put the rest of the small content herer-->
</
Grid
>
</
telerik:RadFluidContentControl.SmallContent
>
</
telerik:RadFluidContentControl
>
I'd suggest you have a look at RadFluidContentControl's help page for further information.
Let us know if you have additional questions or comments on the topics.
On a side note, I'd like to inform you that we've just released an online tool that allows you to reduce the size of your Silverlight applications. For more information, please visit http://blogs.telerik.com/blogs/posts/10-06-10/telerik_assembly_minifier.aspx
Greetings,
Kiril Stanoev
the Telerik team
Hi Kiril,
Thanks for your reply. This is not exactly what I meant. You are using the MinimizedHeight property but that is used for a TileViewItem in minimized state. I meant the normal state of the TileViewItems.
I have this code which is almost good, but the only thing missing is a vertical scrollbar in the TileView and properly aligning of the TileViewItems.
Please check the attached screenshot. All TileViewItems are now placed over each other.
<telerik:RadTileView Height="600" MaxColumns="2"> |
<telerik:RadTileViewItem MinHeight="200"> |
<TextBlock Text="Text !!" /> |
</telerik:RadTileViewItem> |
<telerik:RadTileViewItem MinHeight="200"> |
<TextBlock Text="Text !!" /> |
</telerik:RadTileViewItem> |
<telerik:RadTileViewItem MinHeight="200"> |
<TextBlock Text="Text !!" /> |
</telerik:RadTileViewItem> |
<telerik:RadTileViewItem MinHeight="200"> |
<TextBlock Text="Text !!" /> |
</telerik:RadTileViewItem> |
<telerik:RadTileViewItem MinHeight="200"> |
<TextBlock Text="Text !!" /> |
</telerik:RadTileViewItem> |
<telerik:RadTileViewItem MinHeight="200"> |
<TextBlock Text="Text !!" /> |
</telerik:RadTileViewItem> |
<telerik:RadTileViewItem MinHeight="200"> |
<TextBlock Text="Text !!" /> |
</telerik:RadTileViewItem> |
<telerik:RadTileViewItem MinHeight="200"> |
<TextBlock Text="Text !!" /> |
</telerik:RadTileViewItem> |
<telerik:RadTileViewItem MinHeight="200"> |
<TextBlock Text="Text !!" /> |
</telerik:RadTileViewItem> |
<telerik:RadTileViewItem MinHeight="200"> |
<TextBlock Text="Text !!" /> |
</telerik:RadTileViewItem> |
</telerik:RadTileView> |
Thanks,
Danny
Thanks for Reply, Your suggestion not work for me..i can't understand what i am doing wrong?
Please see my attachment for easy to understand..if it not works i am ready to send my demo application for test..
Thanks In Advance
@Vir
Could you please send us your project, but before that I'd like to ask you remove any irrelevant code. This way we will be able to assist you faster.
@Danny
Thank you for your clarification. Currently this scenario is not supported by RadTileView i.e. when RadTileView arranges its items it does not take their MinHeight/MinWidth properties into consideration. It just sets their Width/Height properties according to how much available space there is. This is a functionality that we will be working on during Q3 2010 which begins in couple of weeks. I'll add your feature request in our public issue tracking system under the name "TileView: Respect MinWidth/MinHeight when arranging tiles in restored state" and it will be available for tracking and voting tomorrow the latest.
Meanwhile, you will have to manually calculate the Height/Width of RadTileView and put it in a ScrollViewer. What I mean is the following. In the code you previously pasted, you have 10 TileViewItems and you want each of them to be at least 200px in height. Additionally you want them to be arranged in 2 columns. This means that you will have 5 rows. 5 * 200px is approx 1000px (not including the margins around the TileViewItems) for the TileView. Initially you set the TileView to be 600px. You will have to give these 600px to a ScrollViewer and set MinHeight of 1000px to the TileView. Please see the code bellow:
<
ScrollViewer
VerticalAlignment
=
"Center"
Height
=
"600"
VerticalScrollBarVisibility
=
"Auto"
>
<
telerikNavigation:RadTileView
MinHeight
=
"1000"
MaxColumns
=
"2"
>
<
telerikNavigation:RadTileViewItem
>
<
TextBlock
Text
=
"Text !!"
/>
</
telerikNavigation:RadTileViewItem
>
<
telerikNavigation:RadTileViewItem
>
<
TextBlock
Text
=
"Text !!"
/>
</
telerikNavigation:RadTileViewItem
>
<
telerikNavigation:RadTileViewItem
>
<
TextBlock
Text
=
"Text !!"
/>
</
telerikNavigation:RadTileViewItem
>
<
telerikNavigation:RadTileViewItem
>
<
TextBlock
Text
=
"Text !!"
/>
</
telerikNavigation:RadTileViewItem
>
<
telerikNavigation:RadTileViewItem
>
<
TextBlock
Text
=
"Text !!"
/>
</
telerikNavigation:RadTileViewItem
>
<
telerikNavigation:RadTileViewItem
>
<
TextBlock
Text
=
"Text !!"
/>
</
telerikNavigation:RadTileViewItem
>
<
telerikNavigation:RadTileViewItem
>
<
TextBlock
Text
=
"Text !!"
/>
</
telerikNavigation:RadTileViewItem
>
<
telerikNavigation:RadTileViewItem
>
<
TextBlock
Text
=
"Text !!"
/>
</
telerikNavigation:RadTileViewItem
>
<
telerikNavigation:RadTileViewItem
>
<
TextBlock
Text
=
"Text !!"
/>
</
telerikNavigation:RadTileViewItem
>
<
telerikNavigation:RadTileViewItem
>
<
TextBlock
Text
=
"Text !!"
/>
</
telerikNavigation:RadTileViewItem
>
</
telerikNavigation:RadTileView
>
</
ScrollViewer
>
Give it a try and let me know if this approach helps.
Regards,
Kiril Stanoev
the Telerik team
Thanks for this workaround. It works for me!
I will vote for the feature request !!!
Thanks,
Danny
Thanks for your Help, here is link for my demo application ,Please review my code & let me know.
Project file Here : http://www.megaupload.com/?d=E3TM0I3D
Thanks in Advance.
If I've understood you correctly, you have to set MinimizedHeight.
<
Controls:RadTileView
x:Name
=
"AlbumTileView"
MinimizedColumnWidth
=
"220"
MaximizeMode
=
"One"
IsItemsAnimationEnabled
=
"True"
MaxRows
=
"0"
MinimizedRowHeight
=
"10"
Grid.Row
=
"1"
>
<
Controls:RadTileView.ItemContainerStyle
>
<
Style
TargetType
=
"Controls:RadTileViewItem"
>
<
Setter
Property
=
"MinimizedHeight"
Value
=
"150"
/>
</
Style
>
</
Controls:RadTileView.ItemContainerStyle
>
<
Controls:RadTileView.ItemTemplate
>
<
DataTemplate
>
<
TextBlock
Text
=
"{Binding ContestName}"
Foreground
=
"Black"
FontSize
=
"12"
/>
</
DataTemplate
>
</
Controls:RadTileView.ItemTemplate
>
<
Controls:RadTileView.ContentTemplate
>
<
DataTemplate
>
<
telerik:RadFluidContentControl
/>
</
DataTemplate
>
</
Controls:RadTileView.ContentTemplate
>
</
Controls:RadTileView
>
Also, I modified your project so when the user clicks on the image in the SmallContent the TileViewItem maximizes. I achieved that by subscribing for the MouseLeftButtonDown event of the image and then maximizing its parent TileViewItem:
<
telerik:RadFluidContentControl.SmallContent
>
<
Image
Source
=
"{Binding ImageURL}"
Stretch
=
"Fill"
VerticalAlignment
=
"Stretch"
HorizontalAlignment
=
"Stretch"
MouseLeftButtonDown
=
"Image_MouseLeftButtonDown"
/>
</
telerik:RadFluidContentControl.SmallContent
>
private
void
Image_MouseLeftButtonDown(
object
sender, MouseButtonEventArgs e)
{
RadTileViewItem parent = (sender
as
Image).ParentOfType<RadTileViewItem>();
if
(parent !=
null
)
{
parent.TileState = TileViewItemState.Maximized;
}
}
Regards,
Kiril Stanoev
the Telerik team
Well, height work for me but its seems width have some issue, i can't make this Item little narrow..it's look so stretched.
<Style TargetType="Controls:RadTileViewItem">
<Setter Property="MinimizedHeight" Value="107" />
<Setter Property="MinimizedWidth" Value="[some value example :- 50]" /> <It should be work also-->
</Style>
Project is here :- http://www.megaupload.com/?d=2NC55YH7
Thanks :)
The MinimizedWidth property applies when the TileViewItems are minimized at the bottom or at the top. The MinimizedHeight property applies when the TileViewItems are minimized at the left or at the right. In your case you have to use the MinimizedColumnWidth property to control the width of the minimized items:
<
Controls:RadTileView
x:Name
=
"AlbumTileView"
MaximizeMode
=
"One"
IsItemsAnimationEnabled
=
"True"
MaxRows
=
"0"
Grid.Row
=
"1"
MinimizedColumnWidth
=
"107"
>
<
Controls:RadTileView.ItemContainerStyle
>
<
Style
TargetType
=
"Controls:RadTileViewItem"
>
<
Setter
Property
=
"MinimizedHeight"
Value
=
"107"
/>
<!--<Setter Property="MinimizedWidth" Value="50" />-->
<!-- <=========It should be work also-->
</
Style
>
</
Controls:RadTileView.ItemContainerStyle
>
.....
Give it a try and let me know if it works.
Greetings,
Kiril Stanoev
the Telerik team
Our solution has variable size RadTileViewItems when in Restored state so we desperately need this fixed.
Furthermore, will this new feature be available for Silverlight 3 ? or just Silverlight 4?
Hopefully we will implement this feature for the Q3 SP1, but it will be available only for Silverlight 4, because we will not support Silverlight 3 any more.
Best wishes,It should depent on the MinimizedColumnWidth to alsways have a quadratic minimzed item.
For Example:
The TileView height is 600px.
There are 3 minimized item.
Thand the MinimizedColumnWidth should be 200px, expecting every minimized item is 200px height -> TileView streched the items by dafault which is good for me.
If the users changes the window Size and the Tileview is nor 300 px height.
Than MinimizedColumnWidth should be 100px.
Any solution or suggestions for this Scenario?
The easiest solution is to handle the SizeChanged event of the TileVIew and depending of the new sizes change the MinimizedColumnWidth as you want. If you have further questions feel free to ask.
Kind regards,private
void
tile_SizeChanged(
object
sender, SizeChangedEventArgs e)
{
tile.MinimizedColumnWidth = tile.MinimizedRowHeight;
}
Thats what i tried, but with no success.
tile.MinimizedRowHeight is not the current row height.
It is always 75px. Don't know why.
The MinimizedRowHeight will be the height of the minimized items if you set Top or Bottom for your MinimizedItemsPosition(by default it's set to Right).
There are two ways to implement your scenario:
- If you want the minimized items to be with fixed size(e.g. 200x200) you should set their MinimizedHeight property to 200 and the TileView MinimizedColumnWidth property to 200 like this:
<
telerik:RadTileView
MinimizedColumnWidth
=
"200"
>
<
telerik:RadTileViewItem
MinimizedHeight
=
"200"
>1</
telerik:RadTileViewItem
>
<
telerik:RadTileViewItem
MinimizedHeight
=
"200"
>2</
telerik:RadTileViewItem
>
<
telerik:RadTileViewItem
MinimizedHeight
=
"200"
>3</
telerik:RadTileViewItem
>
<
telerik:RadTileViewItem
MinimizedHeight
=
"200"
>4</
telerik:RadTileViewItem
>
</
telerik:RadTileView
>
- If you want your items to dynamically resize depending on their count and the size of the TileView you should handle the TilesStateChanged and SizeChanged events of the TileView and manually set the MinimizedColumnWidth in them. For this scenario please examine the attached project.
If you have further questions feel free to ask. Sincerely yours,
thank you, that's exactly what I was looking for.