Content changing size on transistion

12 posts, 0 answers
  1. Jeff Kershner
    Jeff Kershner avatar
    62 posts
    Member since:
    Aug 2009

    Posted 07 Dec 2010 Link to this post

    I have a transition control inside a viewbox.  When the transition is about to happen, the content of the transition control changes size (slight distort).

    Any idea why?
  2. George
    Admin
    George avatar
    1332 posts

    Posted 10 Dec 2010 Link to this post

    Hello Jeff,

    We are not aware of such problem with RadTransitionControl. Could you please give us more information about your scenario? If you send us a sample project that reproduces the problem it would be very helpful.

    I am glad to assist you further.

    Regards,
    George
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. DevCraft banner
  4. Jeff Kershner
    Jeff Kershner avatar
    62 posts
    Member since:
    Aug 2009

    Posted 15 Dec 2010 Link to this post

    The problem I am having has to do with the fact that I am loading an external image and there is a delay in loading.

    I am still having this problem and awaiting some kind of resolution in this forum post:
    http://www.telerik.com/community/forums/silverlight/transition-control/events-with-transition-control.aspx
  5. George
    Admin
    George avatar
    1332 posts

    Posted 21 Dec 2010 Link to this post

    Hello Jeff,

    I would suggest you to load the image, before settings it to the TransitionControl. If this image comes from a RIA service, you could set the image to the RadTransitionControl when loading the data (from the service) is completed.

    I hope this helps.
     

    Best wishes,
    George
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  6. Jeff Kershner
    Jeff Kershner avatar
    62 posts
    Member since:
    Aug 2009

    Posted 22 Dec 2010 Link to this post

    The problem is that I am not able to figure out a way to do that with the ContentTemplate structure of the RadTransitionControl.  If you could show an example or just write generic steps on how to accomplish this, I would greatly appreciate it!
  7. George
    Admin
    George avatar
    1332 posts

    Posted 28 Dec 2010 Link to this post

    Hello Jeff,

    I would suggest you to:

    1. handle the Completed event handler of the LoadOperation.  
    2. In the handler, when you have the loaded image, you could set it for Content of the RadTransitionControl.

    I hope this helps.


    Best wishes,
    George
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  8. GEB
    GEB avatar
    228 posts
    Member since:
    Dec 2008

    Posted 05 Jan 2011 Link to this post

    I have had similar issues with the transition.  In my example, each transition is a grid.  The contents of each grid can cause each grid to be of a different height.  For example, assume I'm transitioning from Grid_A to Grid_B.  The contents of Grid_A effectively cause the grid to be 100 pixels high.  But, the contents of Grid_B cause it to be 500 pixels high.  When the transition occurs, Grid_A is momentarily "stretched" to be 500 pixels (to match the new grid), then transitioned.  The stretching only occurs during the transition itself.  There seems to be some "matching of heights" logic going on which causes the momentary distortion.

  9. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 11 Jan 2011 Link to this post

    Hello Jeff,

     As the transition is between a screenshot of the old state and the new state itself, they should be of the same size. In other case the image is either stretched or shrunk. The TransitionControl is designed to work this way.
    In order to overcome this limitation you may use the FluidResizePresenter control located in the Telerik.Windows.Controls.TransitionControl namespace of the Telerik.Windows.Controls assembly - it makes a fluid change of the size which will make the transition between different sizes to look better. What you need to do is to just wrap the RadTransitionControl with it like in the following example:

    <UserControl x:Class="SL_RadWindow.MainPage"
        xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls.TransitionControl;assembly=Telerik.Windows.Controls"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
        <Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Center" HorizontalAlignment="Center">
            <telerikControls:FluidResizePresenter Duration="00:00:00.500">
                <telerikControls:FluidResizePresenter.Easing>
                    <CircleEase />
                </telerikControls:FluidResizePresenter.Easing>
                <telerik:RadTransitionControl Content="{Binding}" Duration="00:00:00.500">
                    <telerik:RadTransitionControl.Easing>
                        <CircleEase />
                    </telerik:RadTransitionControl.Easing>
                    <telerik:RadTransitionControl.Transition>
                        <telerik:FadeTransition />
                    </telerik:RadTransitionControl.Transition>
                    <telerik:RadTransitionControl.ContentTemplate>
                        <DataTemplate>
                            <Grid Background="{Binding Color}">
                                <TextBlock Text="{Binding Text}" Foreground="White" FontWeight="Bold" FontSize="15" Margin="10" />
                            </Grid>
                        </DataTemplate>
                    </telerik:RadTransitionControl.ContentTemplate>
                </telerik:RadTransitionControl>
            </telerikControls:FluidResizePresenter>
        </Grid>
    </UserControl>

    If you have further questions don't hesitate to ask!

    Greetings,
    Miroslav Nedyalkov
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  10. Carlos Sesma
    Carlos Sesma avatar
    29 posts
    Member since:
    Dec 2008

    Posted 28 Jan 2011 Link to this post

    I have similar issue when using the included examples, online demos does not show this behavior.
    im using version  v.2010.1.218.1030
    I uploaded a youtube video showing this issue. please let me know how to fix it. or workaround it, 
    http://www.youtube.com/watch?v=VwjEDxLmXoI

    *the same resize issue is shown in any other animation(expand/collapse in treeview, menus etc) at random times.
    *video is unclassified (no tags, not shared).
    regards.
  11. George
    Admin
    George avatar
    1332 posts

    Posted 03 Feb 2011 Link to this post

    Hi Carlos,

    Thank you for reporting this problem. This happens when there is no set size of the content. We will fix our examples in our further releases. I am glad to update your telerik points.

    Best wishes,
    George
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  12. Mykhaylo
    Mykhaylo avatar
    3 posts
    Member since:
    Sep 2010

    Posted 25 Jan 2013 Link to this post

    Hello,

    I have discovered the same problem when using TransitionControl inside a viewbox. I attached xaml of the main page of a test project where this can be reproduced (there's nothing more than a Viewbox and a TransitionControl inside it bound to text property of a textbox, so when you type any text, it should draw transition effects). Note that sizes of all controls are given as fixed values, so that any autosize other than viewbox zoom is impossible. The red rectangle should remain the same, but it seems that the old view of the content template is dropped away from the viewbox and rendered in absolute measures.
    <UserControl
        x:Class="TransitionControlInsideViewbox.MainPage"
        d:DesignHeight="300"
        d:DesignWidth="400"
        mc:Ignorable="d">
        <Viewbox
            x:Name="LayoutRoot"
            Width="400"
            Height="250"
            Stretch="Uniform"
            StretchDirection="Both">
            <Grid
                Width="200"
                Height="125"
                Background="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="25" />
                    <RowDefinition Height="100" />
                </Grid.RowDefinitions>
                <TextBox
                    x:Name="TextBox"
                    Width="200"
                    Height="25" />
                <telerik:RadTransitionControl
                    Grid.Row="1"
                    Width="200"
                    Height="100"
                    Content="{Binding Text, ElementName=TextBox}">
                    <telerik:RadTransitionControl.Transition>
                        <telerik:FadeTransition />
                    </telerik:RadTransitionControl.Transition>
                    <telerik:RadTransitionControl.ContentTemplate>
                        <DataTemplate>
                            <Rectangle
                                Width="200"
                                Height="100"
                                Fill="Red" />
                        </DataTemplate>
                    </telerik:RadTransitionControl.ContentTemplate>
                </telerik:RadTransitionControl>
            </Grid>
        </Viewbox>
    </UserControl>
  13. George
    Admin
    George avatar
    1332 posts

    Posted 30 Jan 2013 Link to this post

    Hi Mykhaylo,

     
    Thank you for reporting us this problem with the TransitionControl. The issue is logged in our PITS and you can track its progress here - http://www.telerik.com/support/pits.aspx#/public/silverlight/14159. We will look into this issue in our further releases.

    I am glad to update your telerik points as well.

    Regards,
    George
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner