Setting the SelectionRectangleStyle

[The Cowboy]

I have tried to set the SelectionRectangleStyle of the Diagram control without any luck.  Below is the code I am using. I can see it at design time, when I run the app and load a saved diagram it seems to ignore the style.  I am modifying one of the Telerik examples.

<UserControl.Resources>
    <Style x:Key="Style1" TargetType="{x:Type Rectangle}">
        <Setter Property="StrokeThickness" Value="12" />
        <Setter Property="StrokeDashArray" Value="3 3"/>
        <Setter Property="Stroke" Value="Red"/>
        <Setter Property="Fill" Value="Transparent"/>
    </Style>
</UserControl.Resources>

 <telerik:RadDiagram x:Name="diagram"  SelectionRectangleStyle="{DynamicResource Style1}" />

[Miro Miroslavov]

Hi Jonathan,

 I just tried the SelectionRectangleStyle exactly the way you describe it and it works as expected. Attached you can see a screenshot of your rect style. I also tried loading and saving diagrams and it still works.

Can you send us example project demonstrating the issue?

All the best,
Miro Miroslavov
the Telerik team

[The Cowboy]

 

My apologies; I was attempting to change the style when a shape is selected, this I now realize is not SelectionRectangleStyle.  That said I am still not sure how to style it… I assume it is an Adorner I have to style, but I am not having any luck.  Do you have a sample to illustrate this?

[Eric]

I'm curious about this too.

Edit: After doing some more research I found that the Template for the RadDiagram contains a ManipulationAdorner. Based on what I found you can modify its template or you can create another class that inherits from it and override the OnRender to draw what you would like. Hope that helps you out.

[Miro Miroslavov]

Hi,

 You should change the style of the Adorner called ManipulationAdorner. And since we now support Implicit themes you can just provide a style for it in your control resources and it will work.
Here is example xaml that you may paste and re-style.

<telerik:BooleanToVisibilityConverter x:Key="converter" />
<telerik:InvertedBooleanToVisibilityConverter x:Key="invertedBooleanToVisibilityConverter" />
<Style x:Key="ResizingRectangleStyle" TargetType="Rectangle">
    <Setter Property="Width" Value="17" />
    <Setter Property="Height" Value="17" />
    <Setter Property="Stroke" Value="Red" />
    <Setter Property="StrokeThickness" Value="1" />
    <Setter Property="IsHitTestVisible" Value="False" />
    <Setter Property="Visibility"
            Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsResizingEnabled, Converter={StaticResource converter}}" />
</Style>

<Style TargetType="primitives:ManipulationAdorner">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="primitives:ManipulationAdorner">
                <Grid
                        Visibility="{Binding Path=IsConnectionAdornerActive, Converter={StaticResource invertedBooleanToVisibilityConverter},RelativeSource={RelativeSource Mode=TemplatedParent}}">
                    <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"
                            StrokeDashArray="3 3" StrokeThickness="1" IsHitTestVisible="False" />
                    <Rectangle Style="{StaticResource ResizingRectangleStyle}" Margin="-3, -3, 0, 0"
                            VerticalAlignment="Top" HorizontalAlignment="Left" />
                    <Rectangle Style="{StaticResource ResizingRectangleStyle}" Margin="0, -3, -3, 0"
                            VerticalAlignment="Top" HorizontalAlignment="Right" />
                    <Rectangle Style="{StaticResource ResizingRectangleStyle}" Margin="-3, 0, 0, -3"
                            VerticalAlignment="Bottom" HorizontalAlignment="Left" />
                    <Rectangle Style="{StaticResource ResizingRectangleStyle}" Margin="0, 0, -3, -3"
                            VerticalAlignment="Bottom" HorizontalAlignment="Right" />
                    <Path x:Name="RotationPart"
                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsRotationEnabled, Converter={StaticResource converter}}"
                            Data="M6.5001225,0 C8.2179546,2.5669777E-09 9.7801466,0.66635782 10.942307,1.754685 L11.048175,1.8564497 L12.655668,0.54199237 L12.697001,6.4169922 L7.0000014,5.1666665 L8.6991777,3.7772398 L8.6816168,3.7628136 C8.0833397,3.2853861 7.3250594,3 6.5001225,3 C4.5670891,3 3.0000565,4.5670033 3.0000565,6.5 C3.0000565,8.4329967 4.5670891,10 6.5001225,10 C7.8290825,10 8.9850502,9.259346 9.5777493,8.1683083 L9.594327,8.1359396 L12.333,9.3708668 L12.289136,9.4591351 C11.212404,11.561266 9.0242834,13 6.5001225,13 C2.9102039,13 -7.4505806E-08,10.08985 0,6.5 C-7.4505806E-08,2.9101491 2.9102039,2.9336888E-09 6.5001225,0 z"
                            HorizontalAlignment="Center" VerticalAlignment="Top" Height="13"
                            Margin="0, -30, 0, 0" Stretch="Fill" Width="13"
                            Fill="Green" Stroke="Green" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Please let us know if you have any issues with it.

Greetings,
Miro Miroslavov
the Telerik team

[The Cowboy]

Excellent thanks!

[B1SHQP]

MIRO

is this how I would add a button to show a set of options for the selected shape?

out of interest can you add a picture of what the XAML for the adorner looks.

Thanks ANDREW

[Miro Miroslavov]

Hi Andrew,

 There is better approach here to set one attached property called AdditionalContent. This is going to be shown when a shape(s) is selected. You can then query the diagram.SelectedItems and decide what to do with the selected shapes. You can examine this behaviour in our sample projects part of the distributions. 

<telerik:RadDiagram>
    <primitives:ItemInformationAdorner.AdditionalContent>
        <!-- your buttons here ->
    </primitives:ItemInformationAdorner.AdditionalContent>
</telerik:RadDiagram>

You can also inherit from the RadDiagramShape class and change it's default style. So you can put your adorning buttons in the template and just show/hide when the shape is selected/deselected. 
Please let us know if you need any further assistance of help. 

Regards,
Miro Miroslavov
the Telerik team