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

Content changing size on transistion

11 Answers 148 Views
TransitionControl
This is a migrated thread and some comments may be shown as answers.
Jeff Kershner
Top achievements
Rank 1
Jeff Kershner asked on 08 Dec 2010, 05:04 AM
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?

11 Answers, 1 is accepted

Sort by
0
George
Telerik team
answered on 10 Dec 2010, 11:12 AM
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
0
Jeff Kershner
Top achievements
Rank 1
answered on 15 Dec 2010, 04:34 PM
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
0
George
Telerik team
answered on 21 Dec 2010, 04:39 PM
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
0
Jeff Kershner
Top achievements
Rank 1
answered on 22 Dec 2010, 05:17 PM
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!
0
George
Telerik team
answered on 28 Dec 2010, 12:37 PM
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
0
GEB
Top achievements
Rank 1
answered on 05 Jan 2011, 07:46 PM
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.

0
Miroslav Nedyalkov
Telerik team
answered on 11 Jan 2011, 10:44 AM
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>>
0
Carlos Sesma
Top achievements
Rank 1
answered on 28 Jan 2011, 07:57 PM
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.
0
George
Telerik team
answered on 03 Feb 2011, 10:15 AM
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>>
0
Mykhaylo
Top achievements
Rank 1
answered on 25 Jan 2013, 11:13 AM
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>
0
George
Telerik team
answered on 30 Jan 2013, 04:24 PM
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.

Tags
TransitionControl
Asked by
Jeff Kershner
Top achievements
Rank 1
Answers by
George
Telerik team
Jeff Kershner
Top achievements
Rank 1
GEB
Top achievements
Rank 1
Miroslav Nedyalkov
Telerik team
Carlos Sesma
Top achievements
Rank 1
Mykhaylo
Top achievements
Rank 1
Share this question
or