Thema aware styling with connectors

[ManniAT]

Hi,

I want to style a diagram shape so I use VS2012 which generates me the following style.

<Style x:Key="RadDiagramShapeStyle1" TargetType="{x:Type telerik:RadDiagramShape}">

    <Setter Property="Foreground" Value="#FF333333"/>

    <Setter Property="Background">

        <Setter.Value>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="#FFFFB356" Offset="1"/>

                <GradientStop Color="#FFFFDEDE"/>

                <GradientStop Color="#FFFF5D00" Offset="0.5"/>

            </LinearGradientBrush>

        </Setter.Value>

    </Setter>

    <Setter Property="BorderBrush" Value="#FFB84600"/>

    <Setter Property="FontSize" Value="11"/>

    <Setter Property="ZIndex" Value="2"/>

    <Setter Property="BorderThickness" Value="0"/>

    <Setter Property="StrokeThickness" Value="1"/>

    <Setter Property="Padding" Value="4"/>

    <Setter Property="StrokeDashArray" Value="1 0"/>

    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

    <Setter Property="HorizontalContentAlignment" Value="Center"/>

    <Setter Property="VerticalContentAlignment" Value="Center"/>

    <Setter Property="Geometry" Value="M0,0L60,0 60,40 0,40z"/>

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type telerik:RadDiagramShape}">

                <Grid>

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="MouseStates">

                            <VisualState x:Name="Normal"/>

                            <VisualState x:Name="MouseOver"/>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="ActiveConectionStates">

                            <VisualState x:Name="NormalActiveConnectionState"/>

                            <VisualState x:Name="ActiveConnectionInsideShape">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ActiveSelectedBorder">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">

                            <VisualState x:Name="ConnectorsAdornerCollapsed"/>

                            <VisualState x:Name="ConnectorsAdornerVisible">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ConnectorsControl">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="SelectionStates">

                            <VisualState x:Name="Selected"/>

                            <VisualState x:Name="SelectedInGroup">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectedBorder">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Unselected"/>

                            <VisualState x:Name="SelectedAsGroup"/>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="EditMode">

                            <VisualState x:Name="NormalMode"/>

                            <VisualState x:Name="NormalEditMode">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalContent">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Collapsed</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditContent">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="TextBoxEditMode">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalContent">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Collapsed</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditTextBox">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                    <Grid>

                        <Path x:Name="Geometry" Data="{TemplateBinding Geometry}" Fill="{TemplateBinding Background}" Opacity="{TemplateBinding Opacity}" Stretch="Fill" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding StrokeThickness}" StrokeDashArray="{TemplateBinding StrokeDashArray}"/>

                        <Border x:Name="SelectedBorder" BorderBrush="#FFADD6FF" BorderThickness="1" Visibility="Collapsed"/>

                        <Border x:Name="ActiveSelectedBorder" BorderBrush="#7FC92931" BorderThickness="2" Visibility="Collapsed"/>

                        <ContentPresenter x:Name="NormalContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" telerik:DiagramBehaviors.TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                        <Primitives:ConnectorsControl x:Name="ConnectorsControl" ItemContainerStyle="{TemplateBinding ConnectorStyle}" Visibility="Collapsed"/>

                    </Grid>

                    <Grid x:Name="PART_RotationalPart">

                        <ContentPresenter x:Name="EditContent" ContentTemplate="{TemplateBinding EditTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                        <TextBox x:Name="EditTextBox" AcceptsReturn="True" Visibility="Collapsed">

                            <TextBox.Style>

                                <Style TargetType="{x:Type TextBox}">

                                    <Setter Property="TextWrapping" Value="Wrap"/>

                                    <Setter Property="TextAlignment" Value="Center"/>

                                    <Setter Property="FontSize" Value="11"/>

                                    <Setter Property="FontFamily" Value="Segoe UI"/>

                                    <Setter Property="Foreground" Value="Black"/>

                                    <Setter Property="HorizontalAlignment" Value="Stretch"/>

                                    <Setter Property="VerticalAlignment" Value="Center"/>

                                    <Setter Property="Margin" Value="5"/>

                                    <Setter Property="Padding" Value="2"/>

                                    <Setter Property="Template">

                                        <Setter.Value>

                                            <ControlTemplate TargetType="{x:Type TextBox}">

                                                <Grid x:Name="RootElement">

                                                    <Rectangle Fill="White" Stroke="#FF767676" StrokeDashArray="3 3" UseLayoutRounding="True"/>

                                                    <ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" Background="Transparent" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">

                                                        <telerik:StyleManager.Theme>

                                                            <telerik:Office_BlackTheme/>

                                                        </telerik:StyleManager.Theme>

                                                    </ScrollViewer>

                                                </Grid>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                </Style>

                            </TextBox.Style>

                        </TextBox>

                    </Grid>

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

This style works "somehow" but when I use it on a diagramshape and select the shape at runtime I no longer have the "connectors adorner".

Furthermore (I think this is a more common problem) I'm no longer theme aware.
I set my theme at runtime - "unstyled" controls change their appearance - but styled ones do not.

The primary problem is that I want to change some behaviour and need to style the control - without loosing the connector adorner.

Manfred

[Zarko]

Hello Manfred,
The problem is that for some reason the VS 2012 looses the ItemsSource binding of the ConnectorsControl, so the fix is easy - you just have to add this line:

<Primitives:ConnectorsControl x:Name="ConnectorsControl"
                     ItemsSource="{TemplateBinding Connectors}"
                     ItemContainerStyle="{TemplateBinding ConnectorStyle}"
                     Visibility="Collapsed" />

As for the themes - once you set a custom style our styleManager stops working for this control by design. If you're going to use a specific theme you could try to set it firs and then extract the RadDiagramShape's style - this way the extracted style should be from this theme.
I hope I was able to help you and if you have further questions please feel free to ask.

Regards,
Zarko
Telerik

[ManniAT]

Hi Zarko,

first of all thank you for the fast answer - connector problem solved.

But this is also bad news on the other side.
I love your theming - but there are very often little things to do like in the current case add a rectangle and a VSM state to get visual feedback for DnD.
So either I want to use your themes - no way to adapt any control template.
Or I need to change some templates - then (dynamic) theming is gone.

This is especially a problem with "big themes" which I like to use on certain device, where I use a different theme on others.

Thank you
Manfred

[Zarko]

Hello Manfred,
A possible workaround this problem will be to use our implicit styles but use the XAML files directly, not the themes dlls. This way you'll be able to change the default styles and still have dynamic themes. The downside is that you'll have to manually add your custom changes every time you want to use newer XAML files and that you'll have to add a couple of XAML files to your projects.
In the attached project I've added a button with custom mouse over state (the RadButton style is around line 1652 for officeBlack and 1715 for Windows8) so could you please take a look and if you have more questions feel free to ask.

Regards,
Zarko
Telerik