How to change RadDiagramShape background color with VisualStateManager in xaml

[Nurzed]

Hi Telerik team'

I want to change Background/Border color of RadDiagramShape when it selected. And I have tried VisualStateManager in the xaml coding but not works VisualState Events (MouseOver, Selected ...).

How to solve it? Please help me.

<DataTemplate x:Key="ClassTemplate">

    <Grid x:Name="Root">

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="CommonStates">

                <VisualState x:Name="Normal"/>

                <VisualState x:Name="MouseOver">

                    <Storyboard>

                        <ColorAnimation Duration="0" To="#FFF0FFE4" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                        <ColorAnimation Duration="0" To="#FFA5CA91" Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="Pressed">

                    <Storyboard>

                        <ColorAnimation Duration="0" To="#FFF0FFE4" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                        <ColorAnimation Duration="0" To="#FFA5CA91" Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="Disabled" />

            </VisualStateGroup>

            <VisualStateGroup x:Name="FocusStates">

                <VisualStateGroup.Transitions>

                    <VisualTransition GeneratedDuration="0" />

                </VisualStateGroup.Transitions>

                <VisualState x:Name="Unfocused">

                    <Storyboard>

                        <ColorAnimation Duration="0" To="#FFF0FFE4" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                        <ColorAnimation Duration="0" To="#FFA5CA91" Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="Focused">

                    <Storyboard>

                        <ColorAnimation Duration="0" To="#FFF0FFE4" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                        <ColorAnimation Duration="0" To="#FFA5CA91" Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                    </Storyboard>

                </VisualState>

            </VisualStateGroup>

            <VisualStateGroup x:Name="SelectionStates">

                <VisualState x:Name="Unselected" />

                <VisualState x:Name="Selected">

                    <Storyboard>

                        <ColorAnimation Duration="0" To="#FFF0FFE4" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                        <ColorAnimation Duration="0" To="#FFA5CA91" Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="SelectedUnfocused">

                    <Storyboard>

                        <ColorAnimation Duration="0" To="#FFF0FFE4" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                        <ColorAnimation Duration="0" To="#FFA5CA91" Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ShapeBorder"/>

                    </Storyboard>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

        <Border BorderBrush="#FF87ACBE" BorderThickness="2" VerticalAlignment="Top" Grid.RowSpan="2"

            CornerRadius="5" Background="#FFF1FAFF" x:Name="ShapeBorder">

<!-- ... -->



        </Border>

    </Grid>

</DataTemplate>

[Pavel R. Pavlov]

Hello Nurzed,

I have answered a similar question in this forum thread. Please take a look at the attached project in that post and let me know if it works for you.

Regards,
Pavel R. Pavlov
the Telerik team