Questions on UI for WPF Forum

1 answer

132 views

Design and Implementation Guidance w.r.t. the WPF Telerik Drawing Frameworks and APIs

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

CardView

Diagram

Docking

answered on 17 Feb 2022

1 answer

90 views

WPF RadTransitionControl stopped working in 2022 release

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

TransitionControl

answered on 16 Feb 2022

1 answer

215 views

Set Animation for opening and closing a RadPan.

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?

answered on 15 Dec 2021

1 answer

134 views

SlideView for WPF

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

Carousel

Styling

TransitionControl

answered on 09 Nov 2021

4 answers

660 views

How to transition (Fade In/Out) two images?

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.

TransitionControl

answered on 29 Jan 2021

1 answer

98 views

No transition on certain conditions

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?

TransitionControl

answered on 14 Nov 2019

1 answer

152 views

TransitionControl (or TransitionPresenter?) in a Frame

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>

TransitionControl

answered on 23 Aug 2017

3 answers

274 views

How to use RadTransitionControl in RadTabControl

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

TransitionControl

answered on 23 Mar 2017

1 answer

137 views

How to change the content of a RadTransitionControl.ContentTemplate

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)

TransitionControl