MVVM Implicit Style issue

[Andrew]

Using implicit styles with the xaml-sdk\Diagram\MVVM sample leads to strange behavior.

Specifically, nodes are not rendered with labels matching their content; instead the labels are type names (e.g. MVVM.Brand).

Edge labels are unchanged.

To reproduce:
1. File -> New Project
2. Choose Telerik Silverlight Application (e.g. TelerikSilverlightApp1)
3. Accept defaults (e.g. Host the Silverlight Application in a new web site)
4. Project configuration, check "Use Implicit Styles", check "Diagrams" and "Diagram.Extensions" in Telerik.Windows.Controls
5. Next, Next, Finish (default is ExpressionDark theme)
6. Delete MainPage.xaml and cs
7. Add existing item(s) from xaml-sdk\Diagram\MVVM
-Brand
-CarGraphSource
-Link
-MainPage.xaml/cs
-Model
8. Change App.xaml.cs to "this.RootVisual = new MVVM.MainPage();"
9. Run

To fix the behavior, follow the above steps but *do not use implicit styles*.

Implicit styles seem to fail regardless of whether "Copy xaml files to project" or "Add references to theme assemblies" is chosen.

[Martin Ivanov]

Hello Andrew,

The reported behavior  is caused by the fact that when you use the implicit styling mechanism and you have a custom Style you need to base this custom style on the default one for the specific control. Otherwise, the controls with the custom styles won't be rendered.

In order to resolve this you can base the styles for RadDiagramContainerShape and RadDiagramShape on their default styles.

<telerik:RadDiagram.ContainerShapeStyle>
    <Style TargetType="telerik:RadDiagramContainerShape" BasedOn="{StaticResource RadDiagramContainerShapeStyle}">
        <Setter Property="IsCollapsible" Value="True" />
        <Setter Property="ItemsSource" Value="{Binding Children}" />
        <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
        <Setter Property="ContentTemplate" Value="{StaticResource contentTemplate}" />
        <Setter Property="EditTemplate" Value="{StaticResource editTemplate}" />
    </Style>
</telerik:RadDiagram.ContainerShapeStyle>
<telerik:RadDiagram.ShapeStyle>
    <Style TargetType="telerik:RadDiagramShape" BasedOn="{StaticResource RadDiagramShapeStyle}">
        <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
    </Style>
</telerik:RadDiagram.ShapeStyle>

Please let me know if this helps.

Regards,
Martin
Telerik

 

 

[Andrew]

Thanks for that suggestion. I've used my workaround for ages but now would like to sort this out.

In UserControl.Resources on a Silverlight page, I have
         

<Style x:Key="ConnectionStyle" TargetType="telerik:RadDiagramConnection"  BasedOn="{StaticResource RadDiagramConnectionStyle}">

                <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
                <Setter Property="TargetCapType" Value="Arrow1Filled" />
                <Setter Property="StrokeThickness" Value="2" />
                <Setter Property="ContentTemplate" Value="{StaticResource contentTemplateConnection}"/>
                <Setter Property="EditTemplate" Value="{StaticResource editTemplate}"/>
            </Style>
            <Style x:Key="ShapeStyle" TargetType="telerik:RadDiagramShape" BasedOn="{StaticResource RadDiagramShapeStyle}">
                <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
                <Setter Property="Geometry" Value="{telerik:CommonShape ShapeType=EllipseShape}" />
                <Setter Property="Width" Value="100" />
                <Setter Property="Height" Value="40" />
                <Setter Property="ContentTemplate" Value="{StaticResource contentTemplate}"/>
                <Setter Property="EditTemplate" Value="{StaticResource editTemplate}"/>
            </Style>

My diagram looks like this

            <telerik:RadDiagram
                x:Name="diagram"
                ConnectionStyle="{StaticResource ConnectionStyle}"
                ShapeStyle="{StaticResource ShapeStyle}"
                GraphSource="{Binding GraphSource, Mode=TwoWay}"
                IsSnapToGridEnabled="False"
                IsSnapToItemsEnabled="True"
                IsPanEnabled="True"
                IsZoomEnabled="True"
                Margin="10,0,10,0"
                >
            </telerik:RadDiagram>

[Andrew]

Ok, got it working. Issue was that I had some <Style> in App.xaml that seemed to be interfering.