This is a migrated thread and some comments may be shown as answers.
Setting the SelectionRectangleStyle
7 Answers 93 Views
This is a migrated thread and some comments may be shown as answers.
The Cowboy
Top achievements
Rank 1
The Cowboy asked on 19 Apr 2012, 03:16 PM
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}" />          
    


7 Answers, 1 is accepted

Sort by
0
Miro Miroslavov
Telerik team
answered on 19 Apr 2012, 03:43 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
The Cowboy
Top achievements
Rank 1
answered on 19 Apr 2012, 05:48 PM

 

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?

0
Eric
Top achievements
Rank 1
answered on 19 Apr 2012, 08:24 PM
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.
0
Accepted
Miro Miroslavov
Telerik team
answered on 20 Apr 2012, 02:28 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
The Cowboy
Top achievements
Rank 1
answered on 20 Apr 2012, 03:56 PM
Excellent thanks!
0
B1SHQP
Top achievements
Rank 2
answered on 23 May 2012, 05:57 AM
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
0
Miro Miroslavov
Telerik team
answered on 24 May 2012, 11:54 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Asked by
The Cowboy
Top achievements
Rank 1
Answers by
Miro Miroslavov
Telerik team
The Cowboy
Top achievements
Rank 1
Eric
Top achievements
Rank 1
B1SHQP
Top achievements
Rank 2
Share this question
or