Setting height of TileViewItems

20 posts, 0 answers
  1. Danny Scheelings
    Danny Scheelings avatar
    69 posts
    Member since:
    Jan 2006

    Posted 01 Jul 2010 Link to this post

    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
  2. Vir
    Vir avatar
    10 posts
    Member since:
    Jun 2012

    Posted 01 Jul 2010 Link to this post

    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

  3. DevCraft banner
  4. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 06 Jul 2010 Link to this post

    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
  5. Danny Scheelings
    Danny Scheelings avatar
    69 posts
    Member since:
    Jan 2006

    Posted 06 Jul 2010 Link to this post

    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
  6. Vir
    Vir avatar
    10 posts
    Member since:
    Jun 2012
  7. Vir
    Vir avatar
    10 posts
    Member since:
    Jun 2012

    Posted 06 Jul 2010 Link to this post

    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
  8. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 09 Jul 2010 Link to this post

    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
  9. van Latum
    van Latum avatar
    1 posts
    Member since:
    Feb 2010

    Posted 09 Jul 2010 Link to this post

    Kiril,

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

    Thanks,
    Danny
  10. Vir
    Vir avatar
    10 posts
    Member since:
    Jun 2012

    Posted 12 Jul 2010 Link to this post

    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.
  11. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 15 Jul 2010 Link to this post

    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
  12. Vir
    Vir avatar
    10 posts
    Member since:
    Jun 2012

    Posted 15 Jul 2010 Link to this post

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



  13. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 19 Jul 2010 Link to this post

    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
  14. Vir
    Vir avatar
    10 posts
    Member since:
    Jun 2012

    Posted 19 Jul 2010 Link to this post

    Thanks... it work for me. :)

  15. DOCS
    DOCS avatar
    7 posts
    Member since:
    Aug 2010

    Posted 31 Oct 2010 Link to this post

    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?
  16. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 04 Nov 2010 Link to this post

    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
  17. prog1
    prog1 avatar
    61 posts
    Member since:
    Jul 2008

    Posted 19 Nov 2010 Link to this post

    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?
  18. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 22 Nov 2010 Link to this post

    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
  19. prog1
    prog1 avatar
    61 posts
    Member since:
    Jul 2008

    Posted 22 Nov 2010 Link to this post

    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.
  20. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 23 Nov 2010 Link to this post

    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
  21. prog1
    prog1 avatar
    61 posts
    Member since:
    Jul 2008

    Posted 23 Nov 2010 Link to this post

    Hi Zarko,

    thank you, that's exactly what I was looking for.
Back to Top
DevCraft banner