TransitionControl in a ViewBox strange behavior

[Brian Pratt]

When you place a transition control in a ViewBox (specifically with the Fade transition, but mostly on all of them), it does a strange scaling.  The text starts out tiny, then goes large, then fades.  In other examples I have done, it starts out almost 2x as large as it should and then fades normally.  Is there a way to stop if from doing this?

See the below code example:

 

<Window x:Class="WpfApplication20.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <telerik:FadeTransition x:Key="fadeTransition" />

    </Window.Resources>

    <Grid>

        <Viewbox>

            <telerik:RadTransitionControl x:Name="tran" Transition="{StaticResource fadeTransition}" Content="{Binding Text}">

                <telerik:RadTransitionControl.ContentTemplate>

                    <DataTemplate>

                        <TextBlock Text="{Binding}"></TextBlock>

                    </DataTemplate>

                </telerik:RadTransitionControl.ContentTemplate>

            </telerik:RadTransitionControl>

        </Viewbox>

    </Grid>

</Window>

    public partial class MainWindow : Window , INotifyPropertyChanged
    {
        DispatcherTimer _timer = null;
        public MainWindow()
        {
            InitializeComponent();
            _timer = new DispatcherTimer();
            _timer.Interval = TimeSpan.FromSeconds(1);
            _timer.Tick += _timer_Tick;
            this.DataContext = this;
            _timer.Start();
        }

        int count = 0;
        private string _text = "0";
        public string Text
        {
            get
            {
                return _text;
            }
            set
            {
                if (_text != value)
                {
                    _text = value;
                    this.NotifyOfPropertyChange("Text");
                }
            }
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyOfPropertyChange(string prop)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(prop));
            }
        }
        #endregion

        void _timer_Tick(object sender, EventArgs e)
        {
            count++;
            Text = count.ToString();
        }
}

[Brian Pratt]

This is continued from this thread, where you asked me to recreate the problem with your sample project.

http://www.telerik.com/forums/fadetransition-zooms

I cannot attach a project zip file.  The only change I made to your project was to wrap the TransitionControl in a Viewbox.  Once that was done, the strange transition behavior is seen:

<Window x:Class="TransitionControlTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Grid Margin="0,53,0,0">
        <Button Content="Change" Click="Button_Click" VerticalAlignment="Top" Margin="-3,-45,3,0"/>
<!-- ##################################### -->
<!-- THIS IS THE ONLY CODE I ADDED:  THE VIEWBOX -->
<!-- ##################################### -->
        <Viewbox Stretch="Uniform">
        <telerik:RadTransitionControl x:Name="TransitionControl"
                                Duration="0:0:1">
            <telerik:RadTransitionControl.Transition>
                <telerik:FadeTransition />
            </telerik:RadTransitionControl.Transition>
            <telerik:RadTransitionControl.ContentTemplate>
                <DataTemplate
                    >
                    <Grid>
                        <Rectangle

                            Fill="{Binding RectFill}" />
                        <TextBlock
                                Margin="4"
                                Foreground="White"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="{Binding Number}"
                                FontSize="30" />

                    </Grid>
                </DataTemplate>
            </telerik:RadTransitionControl.ContentTemplate>
        </telerik:RadTransitionControl>
        </Viewbox>
    </Grid>
</Window>

[Vladi]

Hello,

We are aware of this issue with the controls transition animations when placing the RadTransitionControl inside a ViewBox.

The described issue is logged in our feedback portal where you can track its status. You can find it here.

Regards,
Vladi
Telerik