This is a migrated thread and some comments may be shown as answers.

Making highlight arround a raddiagramshape when mouse is over.

3 Answers 60 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Davoud
Top achievements
Rank 1
Davoud asked on 05 Apr 2020, 05:16 PM

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>

 

3 Answers, 1 is accepted

Sort by
0
Davoud
Top achievements
Rank 1
answered on 07 Apr 2020, 02:38 PM

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

 

0
Accepted
Vicky
Telerik team
answered on 08 Apr 2020, 02:08 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Davoud
Top achievements
Rank 1
answered on 08 Apr 2020, 03:14 PM

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.

 

Tags
Diagram
Asked by
Davoud
Top achievements
Rank 1
Answers by
Davoud
Top achievements
Rank 1
Vicky
Telerik team
Share this question
or