RadDiagramConnection texture

5 posts, 0 answers
  1. nicolas
    nicolas avatar
    27 posts
    Member since:
    Mar 2017

    Posted 24 Aug Link to this post

    Hi,

    I have a problem to define an animated texture to my RadDiagramConnection. If i define the texture inside style on my window, that's work but if i define texture in Resources, texture doesn't load.

    This is my files :

    Controls
    |_ Entity
    |   |_ Resources.xaml
    |_ View
    |    |_ Editor.xaml
    |_ img
        |_ water.gif

     

    This is my code who's working in Editor.xaml :

    <telerik:RadDiagram x:Name="diagram2" Grid.Column="1" Grid.Row="1">
        <controls1:UniqEntity x:Name="container01" Position="150,150" />
        <telerik:RadDiagramContainerShape x:Name="container02" Position="500,150" />
        <telerik:RadDiagramConnection x:Name="connection01" Source="{Binding ElementName=container01}" Target="{Binding ElementName=container02}" Loaded="Connection01_OnLoaded" StrokeThickness="20">
            <Setter Property="Stroke">
                <Setter.Value>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <Image gif:ImageBehavior.AnimatedSource="../img/water.gif" />
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Setter.Value>
            </Setter>
        </telerik:RadDiagramConnection>
    </telerik:RadDiagram>

     

    but if i define the style in Resources.xaml dictionnaries, the texture doesn't load :

        <Style x:Key="RadDiagramConnectionStyle" TargetType="telerik:RadDiagramConnection" />
        <Style BasedOn="{StaticResource RadDiagramConnectionStyle}" TargetType="telerik:RadDiagramConnection">
            <Setter Property="StrokeThickness" Value="10" />
            <Setter Property="Stroke">
                <Setter.Value>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <Image gif:ImageBehavior.AnimatedSource="../../img/water.gif" />
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Setter.Value>
    </Setter>
    ...

     

    Can you help me please ?

    Thanks !

    Nicolas

     

     

  2. nicolas
    nicolas avatar
    27 posts
    Member since:
    Mar 2017

    Posted 24 Aug in reply to nicolas Link to this post

    I can't edit the previous message so this is the correct files :

    /
    |_Controls
    |_ Entity
    |   |_ Resources.xaml
    |_ View
    |    |_ Editor.xaml
    |_ img
        |_ water.gif

  3. Dinko
    Admin
    Dinko avatar
    462 posts

    Posted 28 Aug Link to this post

    Hi nicolas,

    Thank you for your interest in RadDiagram control.

    Can you send me some more information how you have applied the style to the connection? Looking at the first code snippet where you have placed the Setter? Also if the referenced GIF is in the project or some other directory? It will be great if you can send me isolated project reproducing this behavior. This way I can directly investigate it on my side.

    Regards,
    Dinko
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  4. nicolas
    nicolas avatar
    27 posts
    Member since:
    Mar 2017

    Posted 02 Sep Link to this post

    Hi Dinko,

    Sorry to respond so late.

    This is an my code :

    <telerik:RadDiagram x:Name="diagram2" Grid.Column="1" Grid.Row="1">
                <telerik:RadDiagramContainerShape x:Name="container01" Position="10,10" Background="Red" />
     
                <telerik:RadDiagramContainerShape x:Name="container02" Position="350,10" />
                <telerik:RadDiagramConnection x:Name="connection01" Source="{Binding ElementName=container01}"
                                              Target="{Binding ElementName=container02}"
                                              StrokeThickness="20">
                    <telerik:RadDiagramConnection.Stroke>
                        <VisualBrush>
                            <VisualBrush.Visual>
                                <Image gif:ImageBehavior.AnimatedSource="water.gif"></Image>
                            </VisualBrush.Visual>
                        </VisualBrush>
                    </telerik:RadDiagramConnection.Stroke>
                </telerik:RadDiagramConnection>
                <telerik:RadDiagramContainerShape x:Name="container03" Position="10,300" Background="Blue" />
     
                <telerik:RadDiagramContainerShape x:Name="container04" Position="350,300" />
                <telerik:RadDiagramConnection x:Name="connection02" Source="{Binding ElementName=container03}"
                                              Target="{Binding ElementName=container04}"
                                              StrokeThickness="20">
                    <telerik:RadDiagramConnection.Style>
                        <Style TargetType="telerik:RadDiagramConnection">
                            <Setter Property="Stroke">
                                <Setter.Value>
                                    <VisualBrush>
                                        <VisualBrush.Visual>
                                            <Image gif:ImageBehavior.AnimatedSource="water.gif"></Image>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </telerik:RadDiagramConnection.Style>
                </telerik:RadDiagramConnection>
            </telerik:RadDiagram>

     

    The first example works but not the second :(

    Thanks for your help !

    Nicolas

  5. Dinko
    Admin
    Dinko avatar
    462 posts

    Posted 04 Sep Link to this post

    Hello Nicolas,

    Thank you for the provided code snippet.

    The reason why the Stroke property is not applied in Style is that in the template of the connection we are using TemplateBinding which has a bigger priority. That is why setting directly the VisualBrush to the Stroke property of the connection is working as expected.

    What you can do is to extract and edit the default template of the control. How you can extract the template, you can read in the Editing Control Templates help article in our documentation. In the extracted template you can navigate to a Path with x:Name="GeometryPath" and set its Stroke property.

    I have created a sample project using the provided code snippet to demonstrate the approach described above. Give it a try and let me know if it works for you.

    Regards,
    Dinko
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top