[Solved] After upgrading to the Q3 09 silverlight libraries changing selected rows background color stopped working

[Scott Lavender]

After upgrading to Q3 09 silverlight libraries the background color being used to show one or more rows as selected stopped working. The xaml for the custom gridview that use to work is below. When a row in the grid was selected, the VisualStateManager is using a storyboard to change the row color to red. Any idea why this no longer works with the new GridView?

 

<P></P>
<P>&nbsp;</P>
<controls:ChildWindow
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:telerik="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
           xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
           xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
           xmlns:xrx="clr-namespace:Xerox.Genesis.Silverlight.Business;assembly=Xerox.Genesis.Silverlight"
           xmlns:localCtrl="clr-namespace:Xerox_Genesis_XeroxSimpleContentSpace.Controls"
           x:Class="Xerox_Genesis_XeroxSimpleContentSpace.Controls.ContentShareToChildWindow"
           Title="ContentShareToChildWindow"
           Width="630" Height="600">

    <Grid x:Name="LayoutRoot" Margin="2" Background="White">
        <!--<Grid.Resources>
            <ControlTemplate x:Key="cellTemplate" TargetType="telerikGridView:GridViewCell">
                <CheckBox IsChecked="{Binding Path=HasOrders, Mode=TwoWay}"
                          HorizontalAlignment="Center" VerticalAlignment="Center" />
            </ControlTemplate>
            <Style x:Key="booleanCellStyle">
                <Setter Property="telerikGridView:GridViewCell.Template" Value="{StaticResource cellTemplate}" />
            </Style>
        </Grid.Resources>-->

        <Grid.Resources>
            <!-- Text Box Styles for Comment Field input -->
            <Style x:Key="TextBoxCommentStyle" TargetType="TextBox">
                <Setter Property="TextWrapping" Value="Wrap"/>
                <Setter Property="FontFamily" Value="Tahoma"/>
                <Setter Property="Foreground" Value="#FFE4CBCB"/>
                <Setter Property="Margin" Value="25,0"/>
            </Style>

            <!-- Style for Message Text-->
            <Style x:Key="TextBlockMessageStyle" TargetType="TextBlock">
                <Setter Property="TextWrapping" Value="Wrap"/>
                <Setter Property="Foreground" Value="#FF121316"/>
                <Setter Property="FontSize" Value="10.667"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="FontFamily" Value="Tahoma"/>
            </Style>

            <Style x:Key="LabelMessageStyle" TargetType="dataInput:Label">
                <Setter Property="Foreground" Value="#FF121316"/>
                <Setter Property="FontSize" Value="10.667"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="FontFamily" Value="Tahoma"/>
            </Style>

            <Style x:Key="customButtonStyle" TargetType="Button">
                <Setter Property="Padding" Value="0"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
             </Style>

             <Style x:Key="AddUserButton" TargetType="Button">
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
                            <GradientStop Color="#fab821"  Offset="0" />
                            <GradientStop Color="#e67600" Offset="1.0" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid x:Name="RootGrid" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="RootText" Storyboard.TargetProperty="TextDecorations">
                                                    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Underline"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="RootText" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <SolidColorBrush Color="#274e7d"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border Cursor="Hand" Background="{TemplateBinding Background}"  Width="Auto" Height="20" CornerRadius="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                    <StackPanel Orientation="Horizontal">
                                        <Image Source="../Images/Icons/add_enabled.png" HorizontalAlignment="Left"  Stretch="None"/>
                                        <TextBlock x:Name="RootText" Text="Add" Foreground="Black" HorizontalAlignment="Left" FontWeight="Bold" VerticalAlignment="Center" Margin="2,0,10,0"></TextBlock>
                                    </StackPanel>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <LinearGradientBrush x:Key="Office_BlackPictureFrame" EndPoint="0.491356224416577,0.974451988955925"
                                 StartPoint ="0.777113682471078,-0.027352265088688">
                <GradientStop Color="#FF7D7D7D" Offset="0.032501"/>
                <GradientStop Color="#FF4D4D4D" Offset="0.036112000000000033"/>
                <GradientStop Color="#FF656565" Offset="0.065002"/>
                <GradientStop Color="#FF454545" Offset="0.068613000000000035"/>
                <GradientStop Color="#FF353535" Offset="0.72841"/>
                <GradientStop Color="#FF050505" Offset="0.987361"/>
                <GradientStop Color="#FF9F9F9F" Offset="0.54500001668930054"/>
                <GradientStop Color="#FF454545" Offset="0.381"/>
                <GradientStop Color="#FF1C1C1C" Offset="0.66"/>
            </LinearGradientBrush>

            <LinearGradientBrush x:Key="Office_BlackRowBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF343639" Offset="1"/>
                <GradientStop Color="#FF373737" Offset="0"/>
                <GradientStop Color="#FF3A3B3D" Offset="0.15"/>
                <GradientStop Color="#FF121212" Offset="0.15"/>
            </LinearGradientBrush>

            <xrx:ByteArrayToImageConverter x:Key="byteArrayToImageConverter" />
            <localCtrl:VisibilityConverter x:Key="VisibilityConverter1"/>

            <ControlTemplate x:Key="ImageCellTemplate" TargetType="telerik:GridViewCell">
                <!--<Image Stretch="Fill" Margin="0,0,0,0" Source="{Binding Bytes, Converter={StaticResource byteArrayToImageConverter}}"/>-->
                <!-- This works if image file is part of the solution -->
                <!-- Original when not part of the grid Image Source="{Binding UserPhotoUri}"/-->
                <Grid>
                    <Image Stretch="Fill" Margin="0,0,0,0" Name="x_placeHolder" Source="{Binding UserPhotoUri}"/>
                    <Image Stretch="Fill" Margin="0,0,0,0" Name="x_actualImg" Source="{Binding UsersPhotoImage}"/>
                </Grid>
            </ControlTemplate>

            <ControlTemplate x:Key="MyCustomRowTemplate" TargetType="telerik:GridViewRow">
                <Border x:Name="rowsContainer" Background="White" Padding="4,4,4,4">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="Unselected" GeneratedDuration="00:00:00"/>
                                <VisualTransition From="Selected" GeneratedDuration="00:00:00" To="Unselected"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                        <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFCD2727"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unselected"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Border Background="{Binding RowColor}" x:Name="selectedRow"
                        BorderThickness="1" BorderBrush="#FF000000">

                        <Grid x:Name="grid" Margin="7,1,7,1" d:LayoutOverrides="Width" Background="Transparent" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50" />

                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="47"/>
                                <ColumnDefinition Width="269"/>
                                <ColumnDefinition Width="137" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>

                            <Border BorderThickness="1,1,1,1" CornerRadius="6,6,6,6" Margin="0,4,3,4" d:LayoutOverrides="GridBox">
                                <Border.BorderBrush>
                                    <LinearGradientBrush EndPoint="0.933220924036204,0.903735795235198" StartPoint="0.0687608619440813,0.315483972696259">
                                        <GradientStop Color="#FFDEDEDE" Offset="1"/>
                                        <GradientStop Color="#FFFFFFFF" Offset="0.35294289873343759"/>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Border BorderThickness="4,4,4,4" CornerRadius="2,2,2,2" BorderBrush="{StaticResource Office_BlackPictureFrame}">
                                    <Border Margin="-1,-1,-1,-1" Width="Auto" BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="2,2,2,2">
                                        <Border BorderThickness="1,1,1,1" CornerRadius="1,1,1,1" Background="#FFFFFFFF">
                                            <Border.BorderBrush>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="#FF2F2F2F" Offset="1"/>
                                                    <GradientStop Color="#FF515151" Offset="0.008"/>
                                                </LinearGradientBrush>
                                            </Border.BorderBrush>
                                            <!--This works if image file is part of the solution -->
                                            <!--telerik:GridViewCell Value="{Binding UserPhotoUri}" Template="{StaticResource ImageCellTemplate}" /-->
                                            <!--telerik:GridViewCell Value="{Binding Bytes}" Template="{StaticResource ImageCellTemplate}"/-->
                                            <Grid>
                                                <telerik:GridViewCell x:Name="x_usersPlaceHolderImg" Value="{Binding UserPhotoUri}"
                                                                      Template="{StaticResource ImageCellTemplate}"
                                                                      Visibility="{Binding IsPlaceHolderPhotoAvail, Converter={StaticResource VisibilityConverter1}}"/>
                                                <telerik:GridViewCell x:Name="x_usersActualImg" Value="{Binding UsersPhotoImage}"
                                                                      Template="{StaticResource ImageCellTemplate}"
                                                                      Visibility="{Binding IsUsersPhotoAvail, Converter={StaticResource VisibilityConverter1}}"/>
                                            </Grid>

                                        </Border>
                                    </Border>
                                </Border>
                            </Border>

                            <telerik:GridViewCell BorderThickness="0" Grid.Column="1" Grid.Row="0"
                                    FontWeight="Bold"
                                    Foreground="Black" Value="{Binding EmailAddress}" Margin="2,10,6,0"
                                    VerticalAlignment="Top" HorizontalAlignment="Right">
                                <telerik:GridViewCell.Template>
                                    <ControlTemplate>
                                        <TextBlock TextWrapping="Wrap" Width="350"
                                            Text="{Binding EmailAddress}" />

                                    </ControlTemplate>
                                </telerik:GridViewCell.Template>
                            </telerik:GridViewCell>

                            <telerik:GridViewCell BorderThickness="0" Grid.Column="1" Grid.Row="0"
                                    Foreground="Black" Value="{Binding UserName}" Margin="2,30,6,0"
                                    VerticalAlignment="Top" HorizontalAlignment="Right">
                                <telerik:GridViewCell.Template>
                                    <ControlTemplate>
                                        <TextBlock TextWrapping="Wrap" Width="350"
                                            Text="{Binding UserName}" />
                                    </ControlTemplate>
                                </telerik:GridViewCell.Template>
                            </telerik:GridViewCell>

                            <telerik:GridViewCell BorderThickness="0" Grid.Column="2" Grid.Row="0"
                                                  Value="{Binding PermissionRoles}"
                                                  VerticalAlignment="Center">
                                <telerik:GridViewCell.Template>
                                    <ControlTemplate>
                                        <ComboBox ItemsSource="{Binding PermissionRoles, Mode=TwoWay}"
                                                  SelectedIndex="{Binding PermissionChoice, Mode=TwoWay}"/>

                                    </ControlTemplate>
                                </telerik:GridViewCell.Template>
                            </telerik:GridViewCell>

                            <telerik:GridViewCell BorderThickness="0" Grid.Column="3" Grid.Row="0"
                                                  Margin="33,15,36,13"
                                                  HorizontalAlignment="Center">
                                <telerik:GridViewCell.Template>
                                    <ControlTemplate>
                                        <Button x:Name="myButton"
                                                Width="24"
                                                Height="24"
                                                Style="{StaticResource customButtonStyle}"
                                                Click="DeleteShareToUser_Button_Click">
                                            <Image Source="../Images/Icons/Delete_enabled.png" Stretch="None"/>
                                        </Button>
                                    </ControlTemplate>
                                </telerik:GridViewCell.Template>
                            </telerik:GridViewCell>
                        </Grid>
                    </Border>
                </Border>
            </ControlTemplate>
            <Style x:Key="rowStyle" TargetType="telerik:GridViewRow">
                <Setter Property="Template" Value="{StaticResource MyCustomRowTemplate}"/>
            </Style>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="0.02*" />
            <RowDefinition Height="0.02*" />
            <RowDefinition Height="0.02*" />
            <RowDefinition Height="0.02*" />
            <RowDefinition Height="0.240*" />
            <RowDefinition Height="0.01*" />
            <RowDefinition Height="0.03*" />
            <RowDefinition Height="0.01*" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <Grid x:Name="x_headerGrid"
              Grid.Row="0"
              Background="#FFDFE1E5">
            <TextBlock x:Name="x_headerTextBlock"
                       VerticalAlignment="Center"
                       Margin="10,0,0,0"
                       FontSize="14.667"
                       FontWeight="Bold"
                       Text="PlaceHolder"
                       TextWrapping="NoWrap"/>
        </Grid>

        <CheckBox x:Name="x_shareAnonymouslyCheckBox"
                  Grid.Row="1"
                  HorizontalAlignment="Left"
                  Content="Share Asset Anonymously"
                  d:LayoutOverrides="Height, GridBox"
                  Margin="0,0,0,4"
                  TabIndex="0"
                  Visibility="Collapsed"
                  Click="x_shareAnonymouslyCheckBox_Click"/>
        <StackPanel x:Name="x_emailSP"
                    Grid.Row="2"
                    Orientation="Horizontal"
                    HorizontalAlignment="Left">
            <TextBlock x:Name="x_emailInputLabel"
                       Style="{StaticResource TextBlockMessageStyle}"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Bottom"
                       Text="Enter an E-Mail Address  "
                       Margin="15,0,0,6"/>
            <TextBox x:Name="x_emailInputTextBox"
                     Text="{Binding Path=EmailAddress, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True}"
                     TextWrapping="Wrap"
                     Grid.Column="1"
                     IsEnabled="False"
                     TabIndex="1"
                     Width="300"
                     KeyUp="x_emailInputTextBox_KeyUp"/>
            <Button x:Name="x_addUserButton"
                    HorizontalAlignment="Right"
                    IsEnabled="False"
                    Style="{StaticResource AddUserButton}"
                    Margin="20,0,0,0"
                    Click="AddUserButton_Click"/>
        </StackPanel>

        <TextBlock x:Name="x_gridLabel"
                   Text="Share with"
                   Grid.Row="4"
                   Margin="15,0,0,0"
                   Style="{StaticResource TextBlockMessageStyle}"/>

        <TextBox x:Name="x_commentTextBox"
                 Grid.Row="7"
                 HorizontalContentAlignment="Stretch"
                 AcceptsReturn="False"
                 MaxLength="400"
                 Style="{StaticResource TextBoxCommentStyle}"
                 IsHitTestVisible="True"
                 KeyUp="x_commentTextBox_KeyUp"
                 KeyDown="x_commentTextBox_KeyDown"
                 MouseLeftButtonDown="x_commentTextBox_MouseLeftButtonDown"
                 MouseLeftButtonUp="x_commentTextBox_MouseLeftButtonUp"
                 GotFocus="x_commentTextBox_GotFocus"
                 LostFocus="x_commentTextBox_LostFocus"
                 d:LayoutOverrides="VerticalAlignment, Width">
        </TextBox>

        <Grid x:Name="x_buttonsGrid"
              Grid.Row="9"
              Background="#FFDFE1E5">
        <StackPanel x:Name="x_OkCancelButtonSP"
                    Grid.Row="6"
                    Orientation="Horizontal"
                    HorizontalAlignment="Center"
                    Visibility="Visible">
        <Button x:Name="x_OKButton"
                Content="OK"
                Click="OKButton_Click"
                Width="75"
                Height="23"
                HorizontalAlignment="Center"
                Margin="0,0,10,0"
                IsEnabled="False"
                TabIndex="2"
                d:LayoutOverrides="Height, GridBox" />
        <Button x:Name="x_CancelButton"
                Content="Cancel"
                Click="CancelButton_Click"
                Width="75"
                Height="23"
                HorizontalAlignment="Center"
                TabIndex="3"
                d:LayoutOverrides="Height, GridBox" />
            </StackPanel>
        </Grid>

        <Border Grid.Row="5" CornerRadius="5" BorderThickness="1" Background="#FFD4D6D9" Padding="2" Margin="15,0">

        <telerikGridView:RadGridView x:Name="x_radGridViewShareToUsers"
                                     ItemsSource="{Binding ShareToUsers}"
                                     ColumnsWidthMode="Fill"
                                     Grid.Row="5"
                                     AutoGenerateColumns="False"
                                     HorizontalAlignment="Left"
                                     RowIndicatorVisibility="Collapsed"
                                     GridLinesVisibility="None"
                                     Margin="0,0,0,0"
                                     Background="White"
                                     IsFilteringAllowed="False"
                                     ShowColumnHeaders="False"
                                     VerticalGridlinesVisibility="Collapsed"
                                     ShowGroupPanel="False"
                                     CanUserReorderColumns="False"
                                     CanUserFreezeColumns="False"
                                     VerticalGridlinesBrush="Transparent"
                                     RowStyle="{StaticResource rowStyle}"
                                     UseAlternateRowStyle="False"
                                     MultipleSelect="True"
                                     TabIndex="4">

            <telerikGridView:RadGridView.Columns>
                <telerikGridView:GridViewDataColumn UniqueName="UserPhoto" IsSortable="False"  />
                <telerikGridView:GridViewDataColumn UniqueName="UserEmailandId" IsSortable="False"  />
                <telerikGridView:GridViewDataColumn UniqueName="Role" IsSortable="False" />
                <telerikGridView:GridViewDataColumn UniqueName="RemoveButton" IsSortable="False" />
            </telerikGridView:RadGridView.Columns>
        </telerikGridView:RadGridView>
        </Border>
    </Grid>
</controls:ChildWindow>

 

 

 

[Kalin Milanov]

Hi Scott,

As there is some serious templating going on in the GridViewRow it is difficult to debug it without a sample. However after some digging in the XAML I can suggest you to replace your VisualStateManager with the one below.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal"/>
        <VisualState x:Name="MouseOver" />
        <VisualState x:Name="Selected">
            <Storyboard>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFCD2727"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="SelectionStates">
        <VisualState x:Name="Unselected"/>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

If the problem persists please send me a sample which I can debug so I can provide you with help you need to resolve this issue.

Regards,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Scott Lavender]

I tried replacing the VisualStatemanager section with the xaml you provided. Unfortunately that didn't resolve the problem. I will try to put together a smaller standalone solution that will reproduce the problem.