Thema aware styling with connectors

4 posts, 1 answers
  1. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 17 Jul 2013 Link to this post

    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
  2. Answer
    Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 19 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 19 Jul 2013 Link to this post

    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
  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 22 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top