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:
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
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
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?
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
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.
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?
Hi,
I'm trying to replace the ContentPresenter in a Frame with the TransitionControl as described here:
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
>
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
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)
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