RadDiagramConnection texture

[nicolasf]

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

 

 

[nicolasf]

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

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

[Dinko | Tech Support Engineer]

Hi ,

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

[nicolasf]

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

[Dinko | Tech Support Engineer]

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 "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