background color change in stackpanel

Question

I have stack panel in hyperlink button on button click i have to change stack panel background

              <HyperlinkButton Name="WhereToStayButton" Margin="0,0,0,0"  Grid.Row="5"  Click="WhereToStayButton_Click">
            <HyperlinkButton.Template>

                <ControlTemplate TargetType="HyperlinkButton">
                    <StackPanel Orientation="Horizontal"   Background="#EBEBEB"     x:Name="sp1">
                        <Image Source="/Assets/Menu/wheretostay.png"   Stretch="None"/>
                        <TextBlock Text="{Binding Path=LocalizedResources.menu_where_stay, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="Black" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
                    </StackPanel>
                </ControlTemplate>
            </HyperlinkButton.Template>
        </HyperlinkButton>

score 7 · Answer 1 · answered Feb 25 '14 at 05:51

7

Try this

use this name space using System.Windows.Media; and in button click event write this

private void WhereToStayButton_Click(object sender, RoutedEventArgs e)
{
   stackpanelname.Background = new SolidColorBrush(Colors.Red);
}

answered Feb 25 '14 at 05:51

Rashad Valliyengal

3,132
1
25
39

Unable to get stackpanel name in back end as it iss present in template – Arun.P Feb 25 '14 at 05:54
check this answer how to access control within template http://stackoverflow.com/questions/19379946/how-to-access-a-control-within-data-template-from-code-behind – Rashad Valliyengal Feb 25 '14 at 06:00
Worked for me :) – Naveen Kumar V Apr 20 '18 at 09:56

Rohit Vats · Accepted Answer · 2014-02-25T06:58:49.377

You can do that by applying Storyboard on Click event trigger:

<ControlTemplate TargetType="HyperlinkButton">
   <StackPanel Orientation="Horizontal"  Background="#EBEBEB" x:Name="sp1">
      <Image Source="/Assets/Menu/wheretostay.png"  Stretch="None"/>
      <TextBlock />
   </StackPanel>
   <ControlTemplate.Triggers>
     <EventTrigger RoutedEvent="ButtonBase.Click">
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation To="Green" Storyboard.TargetName="sp1" 
                            Storyboard.TargetProperty="Background.Color"/>
          </Storyboard>
        </BeginStoryboard>
     </EventTrigger>
   </ControlTemplate.Triggers>
 </ControlTemplate>

For Windows Phone 7, use Visual State:

<ControlTemplate TargetType="HyperlinkButton">
   <ControlTemplate.Resources>
     <SolidColorBrush x:Key="PhoneBackgrounBrush" Color="Green"/>
   </ControlTemplate.Resources>
   <StackPanel Orientation="Horizontal" x:Name="sp1">
      <VisualStateManager.VisualStateGroups>
         <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="MouseOver"/>
            <VisualState x:Name="Pressed">
               <Storyboard>
                 <ObjectAnimationUsingKeyFrames
                         Storyboard.TargetProperty="Background"
                         Storyboard.TargetName="sp1">
                    <DiscreteObjectKeyFrame KeyTime="0"
                            Value="{StaticResource PhoneBackgrounBrush}"/>
                 </ObjectAnimationUsingKeyFrames>
               </Storyboard>
            </VisualState>
         </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
       <Image Source="/Assets/Menu/wheretostay.png" Stretch="None"/>
       <TextBlock />
   </StackPanel>
 </ControlTemplate>

This is windows phone 8 the error is: In "the attachable property Triggers is not recognized or not accessible" plz help me — Arun.P, Feb 25 '14 at 05:44
You can use `VisualStates` in Windows Phone 7 like described [here](http://stackoverflow.com/a/8117589/632337). Create Pressed Visual state. — Rohit Vats, Feb 25 '14 at 05:46
I have updated the answer for Windows Phone 7. Have a look at it. — Rohit Vats, Feb 25 '14 at 06:41
Good it works i have to change to original background color when button click is completed. — Arun.P, Feb 25 '14 at 06:56
In case you want to revert back to original value. Simply add two more Visual States for `Normal` and `MouseOver`. I have updated in answer. — Rohit Vats, Feb 25 '14 at 06:59

score 0 · Answer 3 · answered Feb 25 '14 at 06:22

As Rohit said, Make use of Visual states to achive your requirement..,

<ControlTemplate TargetType="HyperlinkButton">
    <StackPanel Orientation="Horizontal"  Background="#EBEBEB" x:Name="sp1">
          <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver"/>
                <VisualState x:Name="Pressed">
                     <Storyboard>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="sp1">
                        <EasingColorKeyFrame KeyTime="0" Value="#FFE91818"/>
                                    </ColorAnimationUsingKeyFrames>
                     </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
       <Image Source="/Assets/Menu/wheretostay.png"  Stretch="None"/>
       <TextBlock />
   </StackPanel>
</ControlTemplate>

background color change in stackpanel

3 Answers3