How to Temporarily Highlight the Background of a Button when Selected

Question

I have several buttons layed out horizontally on my page, and as a user selects one I would like the background to become a certain color and remain that way until another button is pressed. I have a Style that I created to highlight the background of the button, but I'm not sure how to keep the background highlighted until another button is pressed. I have applid the ButtonStyle2 to all of the buttons.

MainPage.xaml

<Style x:Key="ButtonStyle2" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="Padding" Value="10,5,10,6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

          ...

<ListBoxItem toolkit:TiltEffect.IsTiltEnabled="True" Width="72">
                <Button x:Name="Button1" Tap="Button1_Tap" Style="{StaticResource ButtonStyle2}">
                    <Button.Content>
                        <Image Source="/Assets/Icons/appbar.settings.png"/>
                    </Button.Content>
                </Button>
            </ListBoxItem>

            ...

            <ListBoxItem toolkit:TiltEffect.IsTiltEnabled="True" Width="72">
                <Button x:Name="Button3" Tap="Button3_Tap" Style="{StaticResource ButtonStyle2}">
                    <Button.Content>
                        <Image Source="/Assets/Icons/appbar.view.png"/>
                    </Button.Content>
                </Button>
            </ListBoxItem>

Answer 1

You are taking the correct approach by changing the style, but consider another control instead of the button.

Proposed behavior

What you are describing appears to be mutually exclusive set of buttons. You have a group of buttons, of which one is active. When it is active, the other buttons are deactivated. Sure you are running code when the active button, but it seems to me you really want a way to create a set of mutually exclusive buttons.

You can try and make the button control work this way but there are already controls in Windows Phone that do this. RadioButton is one you should consider.

Drawback

Of course, RadioButtons don't look like conventional buttons so you might not have considered using them. .

But in XAML, you can style RadioButton to look like normal buttons, or put images on the RadioButton content or whatever UI seems appropriate.

If you can live with the standard look you are done. Otherwise adapt your style to RadioButton , instead of Button and the phone keeps track of which RadioButton is pressed.

Matthias Shapiro shows how to update RadioButton templates to look like Windows 8 items.

Answer 2

Doing it with a single style isn't possible as you can not Fore a button to keep its state managed according to function of another button, Visual states of a button are limited and gets applied to a button atomically(pressed, disabled of a button cannot be toggled according to other buttons around).

Go for making two styles with different backgrounds and apply them accordingly on button clicks or

You can make a dummy with the help of stackpanels and textblocks

Somthing like this in xaml

<StackPanel Name="stkButton1" Tap="stkButton1_Tap" Height="50" Width="225" Background="Blue">
<TextBlock Text="Button 1" Margin="0,10,0,0" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Name="stkButton2" Tap="stkButton2_Tap" Height="50" Width="225" Background="Gray">
<TextBlock Text="Button 2" Margin="0,10,0,0" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>

and in .cs

private void stkButton2_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
           stkButton1.Background = new SolidColorBrush(Colors.Gray);
            stkButton2.Background = new SolidColorBrush(Colors.Blue);
        }

        private void stkButton1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {

            stkButton2.Background = new SolidColorBrush(Colors.Gray);
            stkButton1.Background = new SolidColorBrush(Colors.Blue);
        }

Answer 3

You can place your style in the app.xaml resource file. And apply it by c# code on button tap event.

btn.Style = App.Current.Resources["StyleKey"] as Style;

Here btn is your button name in xaml.