TransitionControl in a ViewBox strange behavior

3 posts, 0 answers
  1. Brian Pratt
    Brian Pratt avatar
    28 posts
    Member since:
    Apr 2010

    Posted 10 Mar 2014 Link to this post

    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. Brian Pratt
    Brian Pratt avatar
    28 posts
    Member since:
    Apr 2010

    Posted 12 Mar 2014 Link to this post


    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>


  3. UI for WPF is Visual Studio 2017 Ready
  4. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 13 Mar 2014 Link to this post

    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.

     
Back to Top