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

TransitionControl in a ViewBox strange behavior

2 Answers 40 Views
TransitionControl
This is a migrated thread and some comments may be shown as answers.
Brian Pratt
Top achievements
Rank 1
Brian Pratt asked on 10 Mar 2014, 12:05 PM
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"
        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();
        }
}


2 Answers, 1 is accepted

Sort by
0
Brian Pratt
Top achievements
Rank 1
answered on 12 Mar 2014, 11:50 AM

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"
        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>


0
Vladi
Telerik team
answered on 13 Mar 2014, 08:37 AM
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
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
Tags
TransitionControl
Asked by
Brian Pratt
Top achievements
Rank 1
Answers by
Brian Pratt
Top achievements
Rank 1
Vladi
Telerik team
Share this question
or