Telerik Forums
UI for WPF Forum
1 answer
72 views

I've been working with the yWorks for WPF technology for a few years now and have a chance to compare it to the Telerik WPF Diagramming framework and API sets; in my mind, these are complex and advanced UI frameworks. However, getting started is a long learning curve in many areas of geometry, some trigonometric calculations, systems programming, and some advanced animations work.  We are working to create the following technologies using the Diagramming frameworks:

  • OWL 2 DSL Logic and Visualization facilities
  • DSL Composition Editor and Visualization facilities
  • Microsoft Graph Engine TSL Editor
  • Real-time Workflow CMN and DMN Materializer and Interactive Visualization Facilities

I've been using yWorks - a fantastic technology and product, but expensive; it would be great if there was a better set of samples and tutorials around the dynamic use of the Diagramming APIs set for runtime capabilities. I think I've seen what guidance Telerik has made available to date; are there some additional resources available and what type of "professional services" might be available.

Tavi

1 answer
49 views

Hi,

This used to work:

<telerik:RadTransitionControl
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            Margin="10,0,0,0"
            Content="{Binding EventContent}">
            <telerik:RadTransitionControl.Transition>
                <telerikTransitions:RollTransition IsRollOut="True" IsTopToBottom="False" />
            </telerik:RadTransitionControl.Transition>
        </telerik:RadTransitionControl>

with 2022 update the control no longer shows *anything*

For testing, I hardcoded the Content:

        <telerik:RadTransitionControl
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            Margin="10,0,0,0">
            <TextBlock Foreground="Aqua" FontSize="44">This is a test</TextBlock>
            <telerik:RadTransitionControl.Transition>
                <telerikTransitions:RollTransition IsRollOut="True" IsTopToBottom="False" />
            </telerik:RadTransitionControl.Transition>
        </telerik:RadTransitionControl>

This showed the textbox while in Design mode, but when the app ran, nothing was displayed

 

Vladimir Stoyanov
Telerik team
 answered on 16 Feb 2022
1 answer
121 views

Hi, I have the following code and I want to have an animation to enable and disable any "radpane "in the related "radpanegroup".

For example, when I put a "radpane" in pin mode, its width increases by 3 seconds, or another example is that the border color changes.
My solution is to use: 

<telerik:RadDocking>

        ...

...

...

<telerik:RadDocking.FlyoutBehavior>
                <local:AnimatedFlyoutBehavior/>
            </telerik:RadDocking.FlyoutBehavior>

</telerik:RadDocking>

 

I used the IFlyoutBehavior interface and as a result the following functions were implemented:

  void IFlyoutBehavior.OnMouseEnter (IFlyoutHost host, RadPane targetPane)
        {

        }

        void IFlyoutBehavior.OnPaneActivated (IFlyoutHost host, RadPane targetPane)
{
        }

        void IFlyoutBehavior.OnMouseLeave (IFlyoutHost host)
        {

        }

        void IFlyoutBehavior.OnOpeningTimerTimeout (IFlyoutHost host)
        {


        }

        void IFlyoutBehavior.OnClosingTimerTimeout (IFlyoutHost host)
        {

        }

        void IFlyoutBehavior.OnPaneDeactivated (IFlyoutHost host, RadPane targetPane)
        {
            var selectedPane = host.SelectedPane;

            if (selectedPane! = null &&! selectedPane.IsActive && host.CurrentState == FlyoutState.Opened)
            {
                host.StartCloseAnimation ();
            }
        }

        void IFlyoutBehavior.OnPaneMouseLeftButtonDown (IFlyoutHost host, RadPane targetPane)
        {
            if (host.CurrentState! = FlyoutState.Opened)
            {
                host.StartOpenAnimation ();
            }
            else
            {
                host.StartCloseAnimation ();

            }
        }

    }

I could not use enough of this interface. Is there a better way to customize animation in radpane or to develop it that way?

 

 

                     
Dilyan Traykov
Telerik team
 answered on 15 Dec 2021
1 answer
69 views

Hello,

In my WPF application I want to integrate a page indicator, like everybody knows from mobile devices, to browse/slide through e.g. some images or pages/controls and the dots at the bottom indicating the current position.

I saw that Telerik provides something like that for Xamarin (SlideView: https://docs.telerik.com/devtools/xamarin/controls/slideview/slideview-overview). 

Is there something similar for WPF I just don't see? Or any suggestion how I can realize this easily (e.g. with bit of restyling of another control)? Or maybe is it possible to host Xamarin control in WPF?

 

Thanks

Martin Ivanov
Telerik team
 answered on 09 Nov 2021
4 answers
412 views

After reading the documentation on the RadTransitionControl, I'm no closer to understanding how it works.  You have some sample code but it is out of context and/or partial.  I'm trying to perform a simple task of fading in/out two images.

Any hints?  I don't need to load and entire project or solution ... just a relevant code snippet would do.

Cheers, Rob.

Vladimir Stoyanov
Telerik team
 answered on 29 Jan 2021
1 answer
41 views

Hi All
I would like to prevent the transition control from showing any transition/animation under certain conditions. For example, the content is bound to an enum field, for certain enum values I dont want it to transition.
I have tried using IValueConverter     

public class DispatchContentTransitionConverter : IValueConverter
    {
        public TransitionProvider TransitionForward { get; set; }
        public TransitionProvider TransitionBackward { get; set; }
        public TransitionProvider NoTransition { get; set; }
 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null) return NoTransition;
            KeyValuePair<int, string> OSDispatchStatus = (KeyValuePair<int, string>)value;
            if (OSDispatchStatus.Key == SettingsConsts.OS_DispatchStatus_ReadytoBookCollection)
            {
                return TransitionForward;
            }
            else
            {
                return NoTransition;
            }
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

 

But for this option I cannot set a "No Transition" transition

Second option tried: Setting Duration of the transition on TransitionStatusChanged, but this option only applies to the "Next" transition called not the current

private void MainTransControl_TransitionStatusChanged(object sender, Telerik.Windows.Controls.TransitionControl.TransitionStatusChangedEventArgs e)
       {
           OrderDispatchModel VM = DataContext as OrderDispatchModel;
           if (VM != null )
           {
               if (VM.OSDispatchStatus.Key == SettingsConsts.OS_DispatchStatus_ReadytoBookCollection)
               {
                   this.MainTransControl.Duration = new TimeSpan(0, 0, 1);
               }
               else
               {
                   this.MainTransControl.Duration = new TimeSpan(0, 0, 0);
               }
           }
           else
           {
               this.MainTransControl.Duration = new TimeSpan(0, 0, 0);
           }
       }

 

Anyone have any ideas of how to implement this?

 

Vladimir Stoyanov
Telerik team
 answered on 14 Nov 2019
1 answer
104 views

Hi,

I'm trying to replace the ContentPresenter in a Frame with the TransitionControl as described here:

http://docs.telerik.com/devtools/wpf/controls/radtransitioncontrol/features/radtransition-integration-with-content-controls

If I follow this example, no content is displayed.

I also tried using TransitionPresenter, which is better in that the content does show up, but there are no transition animations?

I have successfully used a TransitionControl stand-alone, but I'm hoping to use the navigation features of Frame along with transition animations.

What am I doing wrong?

<Frame x:Name="NavFrame" NavigationUIVisibility="Visible" Margin="0,50,0,0">
    <Frame.Template>
        <ControlTemplate TargetType="{x:Type Frame}">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                <teleriktp:TransitionPresenter CurrentContent="{TemplateBinding Content}" Duration="0:0:3">
                    <teleriktp:TransitionPresenter.Transition>
                        <telerikTransitions:WaveTransition />
                    </teleriktp:TransitionPresenter.Transition>
                </teleriktp:TransitionPresenter>
            </Border>
        </ControlTemplate>
    </Frame.Template>
</Frame>
Martin Ivanov
Telerik team
 answered on 23 Aug 2017
3 answers
189 views

Hi Team,

 

I need to use some transition effects for RadTabControl when the tab selection is changed.I have used the below code in RadTabControl style, but it is not working as expected. Please share any ideas to use transition control in RadTabControl?

<ControlTemplate x:Key="TabControlTemplate" TargetType="telerikNavigation:RadTabControl">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Disabled"/>
                <VisualState x:Name="Normal"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="DropDownDisplayStates">
                <VisualState x:Name="DropDownButtonCollapsed"/>
                <VisualState x:Name="DropDownButtonVisible">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="PlacementStates">
                <VisualState x:Name="Left">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <RotateTransform Angle="-90"/>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="AdditionalContentTransform" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Dock>Left</Dock>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Dock>Left</Dock>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0 1 1 1</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Right">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <RotateTransform Angle="90"/>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>1 1 0 1</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Top"/>
                <VisualState x:Name="Bottom">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>1 1 1 0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <RotateTransform Angle="180"/>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AdditionalContentTransform" Storyboard.TargetProperty="LayoutTransform">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <RotateTransform Angle="180"/>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="AdditionalContentTransform" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Dock>Left</Dock>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Dock>Left</Dock>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <telerik:RadDockPanel LastChildFill="True">
            <telerikPrimitives:LayoutTransformControl x:Name="HeaderDockedElement" SnapsToDevicePixels="True" telerik:RadDockPanel.Dock="Top">
                <Grid SnapsToDevicePixels="True">
                    <Border x:Name="HeaderBackground" SnapsToDevicePixels="True" Background="{TemplateBinding HeaderBackground}" Visibility="{TemplateBinding BackgroundVisibility}"/>
                    <telerik:RadDockPanel Panel.ZIndex="10"
                                          SnapsToDevicePixels="True">
                        <telerikPrimitives:LayoutTransformControl x:Name="AdditionalContentTransform" Margin="0 4 0 2" telerik1:RadDockPanel.Dock="Right">
                            <ContentPresenter x:Name="AdditionalContentElement" Content="{TemplateBinding AdditionalContent}"/>
                        </telerikPrimitives:LayoutTransformControl>
                        <ToggleButton x:Name="DropDownButtonElement"
                                      Visibility="Collapsed"
                                      telerik1:RadDockPanel.Dock="Right"
                                      Style="{TemplateBinding DropDownButtonStyle}"
                                      ClickMode="Press"
                                      IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                            <telerikNavigation:RadContextMenu.ContextMenu>
                                <telerikTabControl:DropDownMenu x:Name="DropDownMenuElement"
                                                                StaysOpen="False"
                                                                Placement="Bottom"
                                                                Style="{TemplateBinding DropDownStyle}"
                                                                ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}"
                                                                ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}"
                                                                DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}"/>
                            </telerikNavigation:RadContextMenu.ContextMenu>
                        </ToggleButton>
                        <RepeatButton x:Name="LeftScrollButtonElement" Margin="4 4 2 2"/>
                        <RepeatButton x:Name="RightScrollButtonElement" telerik:RadDockPanel.Dock="Right" RenderTransformOrigin="0.5 0.5" Margin="2 4 0 2">
                            <RepeatButton.RenderTransform>
                                <ScaleTransform ScaleX="-1"/>
                            </RepeatButton.RenderTransform>
                        </RepeatButton>
                        <Grid>
                            <ScrollViewer x:Name="ScrollViewerElement"
                                          VerticalScrollBarVisibility="Disabled"
                                          BorderThickness="0"
                                          IsTabStop="False"
                                          HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Grid>
                    </telerik:RadDockPanel>
                </Grid>
            </telerikPrimitives:LayoutTransformControl>
            <Border x:Name="ContentBorder"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Mode=TwoWay}"
                    Background="{TemplateBinding Background}"
                    Padding="{TemplateBinding Padding}">
 
                <Grid>
                    <telerik:RadTransitionControl x:Name="ContentElement"
                                                  Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved,Converter={StaticResource InvertBoolToVisConverter}}"
                                      ContentTemplate="{TemplateBinding SelectedContentTemplate}"
                                      ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}">
                        <telerik:RadTransitionControl.Transition>
                            <telerikTransitions:FadeTransition />
                        </telerik:RadTransitionControl.Transition>
                    </telerik:RadTransitionControl>
                    <Grid x:Name="ContentElementsPanel"
                          Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BoolToVisConverter}}"/>
                </Grid>
            </Border>
        </telerik:RadDockPanel>
    </Grid>
</ControlTemplate>

 

 

Regards,

Antony

Antony
Top achievements
Rank 1
 answered on 23 Mar 2017
1 answer
76 views

I have a listBox related with RadTransitionControl , when i change selected item of the listBox , i want to change all the content in the RadTransitionControl 

(Inject an other userControl)

Kalin
Telerik team
 answered on 08 Sep 2016
1 answer
77 views

Hello,

 

is it possible to do just a horizontal slide (no zoom) of some Images like on this homepage 

http://www.volkswagen-motorsport.com/index.php?id=321 

Best,

Steffen

 

Yana
Telerik team
 answered on 01 Sep 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?