windows-phone-7windows-phone-toolkit

Toolkit expander header background change


I have to change the background of the tool kit expander header on click and I must revert to the original background color on expand. Visual state manager what i included in code is working fine for hyperlink button. What should I do to make it work.

<toolkit:ExpanderView x:Name="Header1" FontSize="22" Foreground="Black" Expanded="Header1_Expanded">
<toolkit:ExpanderView.Header>

    <Grid x:Name="GettinghereGrid" >
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

         <StackPanel Orientation="Horizontal" Background="#EBEBEB" x:Name="sp1">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="sp1">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Image Source="/Assets/Menu/getting-here.png" Margin="8,0,0,0"  HorizontalAlignment="Left" Stretch="None"/>
            <TextBlock Text="{Binding Path=LocalizedResources.menu_getting_here, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Center" Margin="10" FontSize="26" Foreground="Black" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
        </StackPanel>
        <Rectangle Height="2" Grid.Row="1" Fill="#D6D6D6D6" Width="500" />
    </Grid>

Thnx in advance


Solution

  • Use MouseEnter, MouseLeave events to ExpanderView.

    <toolkit:ExpanderView x:Name="Header3" FontSize="22" Foreground="Black" Expanded="Header3_Expanded" MouseEnter="Header_MouseEnter" MouseLeave="Header_MouseLeave">
    

    in the backend write the following code

        private void Header_MouseEnter(object sender, MouseEventArgs e)
        {
            SolidColorBrush sb = new SolidColorBrush();
            sb.Color = Color.FromArgb(170, 170, 170, 170);
            WhattodoGrid.Background = sb;
        }
        private void Header_MouseLeave(object sender, MouseEventArgs e)
        {
            SolidColorBrush sb = new SolidColorBrush();
            sb.Color = Color.FromArgb(0,0,0,0);
            WhattodoGrid.Background = sb;
        }