Setting the SelectionRectangleStyle

8 posts, 1 answers
  1. The Cowboy
    The Cowboy avatar
    19 posts
    Member since:
    Mar 2010

    Posted 19 Apr 2012 Link to this post

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


  2. Miro Miroslavov
    Admin
    Miro Miroslavov avatar
    588 posts

    Posted 19 Apr 2012 Link to this post

    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 >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. The Cowboy
    The Cowboy avatar
    19 posts
    Member since:
    Mar 2010

    Posted 19 Apr 2012 Link to this post

     

    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?

  5. Eric
    Eric avatar
    21 posts
    Member since:
    Mar 2012

    Posted 19 Apr 2012 Link to this post

    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.
  6. Answer
    Miro Miroslavov
    Admin
    Miro Miroslavov avatar
    588 posts

    Posted 20 Apr 2012 Link to this post

    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 >>

  7. The Cowboy
    The Cowboy avatar
    19 posts
    Member since:
    Mar 2010

    Posted 20 Apr 2012 Link to this post

    Excellent thanks!
  8. B1SHQP
    B1SHQP avatar
    11 posts
    Member since:
    Mar 2011

    Posted 23 May 2012 Link to this post

    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
  9. Miro Miroslavov
    Admin
    Miro Miroslavov avatar
    588 posts

    Posted 24 May 2012 Link to this post

    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 >>

Back to Top
UI for WPF is Visual Studio 2017 Ready