Making highlight arround a raddiagramshape when mouse is over.

[Davoud]

Hi.

I set an style with to change stroke thickness of a shape but I want something like aureole or corona(not corona virus). I attached an image to see what I want.

My style that I set Is

<Style TargetType="telerik:RadDiagramShape">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="StrokeThickness" Value="5"></Setter>
        </Trigger>
    </Style.Triggers>
</Style>

 

[Davoud]

There is no answer.

I solved it by change ContentTemplate.

<Style TargetType="classes:EulerShape">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Path x:Name="CoronaPath"
                          Stretch="Fill"
                          Margin="-11"
                          Data="{Binding RelativeSource={RelativeSource AncestorType=classes:EulerShape},Path=Geometry}"
                          Stroke="{Binding RelativeSource={RelativeSource AncestorType=classes:EulerShape},Path=CoronaBrush}"
                          StrokeThickness="7"
                          Fill="Transparent"
                          Opacity="0.4"
                          Visibility="Hidden"/>
                </Grid>

                <DataTemplate.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Value="True" Binding="{Binding RelativeSource={RelativeSource AncestorType=classes:EulerShape},Path=Corona}"/>
                        </MultiDataTrigger.Conditions>
                        <Setter TargetName="CoronaPath" Property="Visibility" Value="Visible"/>
                    </MultiDataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Corona" Value="True"/>
        </Trigger>
    </Style.Triggers>
</Style>

 

that EulerShape is derived from RadDiagramShape.

this is a good solution but It has a problem.

after dropped a shape from radtoolbox into diagram. corona is not around shape but after resize the shape, corona is exactly around the shape. you can see this in image below.

In "A" half of corona is in the shape and other half is out. but after resize all of corona is out of the shape and exactly around.("B")

 

[Vicky]

Hi Davoud,

Thank you for the provided resources - they were of great help.

Customizing the RadDiagramShape's default style and template is the most recommended approach for achieving the desired result. Extracting the default template of the shape and upgrading it with one more Path element seems like the most suitable solution for your scenario.

I have therefore prepared a sample project, demonstrating the above suggested approach. It also uses the ThemeHelper class in order to provide ability for easy customization of the glow color.

The project uses the NoXaml version of the dlls. You can find it attached to my reply.
Please, give it a try and let me know if it helps.

Regards,
Vicky
Progress Telerik

[Davoud]

Thank you Vicky.

Your solution is very useful. ThemeHelper is very powerful for my project (I did not know about this). I am trying to use some pieces of your code to make better my code.