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

Setting height of TileViewItems

19 Answers 289 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Danny Scheelings
Top achievements
Rank 1
Danny Scheelings asked on 01 Jul 2010, 11:55 AM
Hi,

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

Sort by
0
Vir
Top achievements
Rank 1
answered on 01 Jul 2010, 01:39 PM
Hello,

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

0
Kiril Stanoev
Telerik team
answered on 06 Jul 2010, 08:05 AM
Hi guys,

@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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Danny Scheelings
Top achievements
Rank 1
answered on 06 Jul 2010, 09:16 AM

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
0
Vir
Top achievements
Rank 1
answered on 06 Jul 2010, 01:08 PM
0
Vir
Top achievements
Rank 1
answered on 06 Jul 2010, 01:08 PM
Hello,
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
0
Kiril Stanoev
Telerik team
answered on 09 Jul 2010, 08:54 AM
Hello guys,

@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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
van Latum
Top achievements
Rank 1
answered on 09 Jul 2010, 09:18 AM
Kiril,

Thanks for this workaround. It works for me!
I will vote for the feature request !!!

Thanks,
Danny
0
Vir
Top achievements
Rank 1
answered on 12 Jul 2010, 12:59 PM
Dear , Kiril Stanoev

               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.
0
Kiril Stanoev
Telerik team
answered on 15 Jul 2010, 09:25 AM
Hello Vir,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Vir
Top achievements
Rank 1
answered on 15 Jul 2010, 02:12 PM
Hi,

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 :)



0
Kiril Stanoev
Telerik team
answered on 19 Jul 2010, 09:45 AM
Hello Vir,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Vir
Top achievements
Rank 1
answered on 19 Jul 2010, 12:17 PM
Thanks... it work for me. :)

0
DOCS
Top achievements
Rank 1
answered on 01 Nov 2010, 04:53 AM
Can someone from Telerik please confirm if the latest release of the RadTileView control now "respects" the height/width of each inidividual RadTileViewItem?

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?
0
Zarko
Telerik team
answered on 04 Nov 2010, 09:32 AM
Hello Sandy,

 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,
Zarko
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
prog1
Top achievements
Rank 1
answered on 19 Nov 2010, 09:55 AM
I want to have the MinimizedColumnWidth to be set dynamically.
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?
0
Zarko
Telerik team
answered on 22 Nov 2010, 09:56 AM
Hi prog1,

 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,
Zarko
the Telerik team
Browse the videos here>> to help you get started with RadControls for Silverlight
0
prog1
Top achievements
Rank 1
answered on 22 Nov 2010, 11:00 AM
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.
0
Zarko
Telerik team
answered on 23 Nov 2010, 05:04 PM
Hello prog1,

 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,
Zarko
the Telerik team
Browse the videos here>> to help you get started with RadControls for Silverlight
0
prog1
Top achievements
Rank 1
answered on 23 Nov 2010, 05:30 PM
Hi Zarko,

thank you, that's exactly what I was looking for.
Tags
TileView
Asked by
Danny Scheelings
Top achievements
Rank 1
Answers by
Vir
Top achievements
Rank 1
Kiril Stanoev
Telerik team
Danny Scheelings
Top achievements
Rank 1
van Latum
Top achievements
Rank 1
DOCS
Top achievements
Rank 1
Zarko
Telerik team
prog1
Top achievements
Rank 1
Share this question
or