MVVM Implicit Style issue

4 posts, 1 answers
  1. Andrew
    Andrew avatar
    15 posts
    Member since:
    Apr 2013

    Posted 12 Sep 2014 Link to this post

    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
    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.
  2. Answer
    Martin Ivanov
    Martin Ivanov avatar
    1452 posts

    Posted 17 Sep 2014 Link to this post

    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.

        <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 TargetType="telerik:RadDiagramShape" BasedOn="{StaticResource RadDiagramShapeStyle}">
            <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />

    Please let me know if this helps.

    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  3. Andrew
    Andrew avatar
    15 posts
    Member since:
    Apr 2013

    Posted 06 Nov 2014 in reply to Martin Ivanov Link to this post

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

    My diagram looks like this

                    ConnectionStyle="{StaticResource ConnectionStyle}"
                    ShapeStyle="{StaticResource ShapeStyle}"
                    GraphSource="{Binding GraphSource, Mode=TwoWay}"
  4. Andrew
    Andrew avatar
    15 posts
    Member since:
    Apr 2013

    Posted 06 Nov 2014 Link to this post

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