Windows Phone 7 (WP7) Modifier la couleur d'arrière-plan d'un bouton au moment du clic

Question

Cela semble être un problème très, très simple, mais je n'arrive pas à le résoudre. Le coupable semble être le style par défaut de WP7. Il change la couleur de l'arrière-plan en blanc lorsqu'un bouton est cliqué, puis revient à l'arrière-plan par défaut du bouton.

Le problème que je rencontre est que je veux changer l'arrière-plan du bouton lorsque celui-ci est cliqué. Je ne trouve aucun moyen de le faire.

J'ai essayé de définir l'arrière-plan dans le code, mais cela ne donne rien. Je pense qu'il est écrasé par le style par défaut.

J'ai essayé d'utiliser un comportement de changement de propriété dans Blend, mais cela donne exactement le même résultat.

J'ai essayé de créer un nouvel état visuel pour le bouton et de le définir au moment du clic, mais cette méthode est un peu boguée et présente une surcharge importante pour le nombre de boutons dont je dispose. En outre, cela n'a pas fonctionné.

Je peux définir l'arrière-plan des autres boutons lors d'un événement de clic, mais pas le bouton sur lequel on clique.

C'est un obstacle tellement ennuyeux ! Je suis sûr que c'est une réponse en une ligne de code :)

Answer 1

Ce que vous devez faire, c'est créer un modèle de bouton qui modifie l'état visuel Pressed.

Dans blend, sélectionnez votre bouton, cliquez sur l'élément de menu "Object"->"Edit Template"->"Edit a Copy..." et un nouveau modèle est créé. Dans la fenêtre States, sélectionnez l'état visuel Pressed dans le groupe d'états visuels CommonStates. Sélectionnez maintenant ButtonBackground dans la hiérarchie des objets et modifiez le pinceau d'arrière-plan dans la fenêtre Propriétés.

J'ai modifié l'arrière-plan de l'état Pressed pour qu'il soit d'une couleur cyan unie et j'ai obtenu quelque chose comme ce XAML.

<phone:PhoneApplicationPage ...>
    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <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 PhoneBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ColorAnimation Duration="0" To="Cyan" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
                                        </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>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" Background="Black">
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Button Content="Button" Style="{StaticResource ButtonStyle1}"/>
    </Grid>
</phone:PhoneApplicationPage>

Answer 2

Je pense qu'obtenir une référence à l'arrière-plan actuel, puis le modifier pourrait aider. Voici une méthode qui prend une instance d'un bouton.

        private void HighlightButton(Button btnToHighlight)
        {

            SolidColorBrush sBrush = (SolidColorBrush)btnToHighlight.Background;

            sBrush.Color = //enter your colour here
            btnToHighlight.Background = sBrush;

        }

Answer 3

<ControlTemplate x:Key="ButtonNextOver" TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetProperty="Background" Storyboard.TargetName="hoverbutton">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                            <DiscreteObjectKeyFrame.Value>
                                                <ImageBrush ImageSource="/NhomMua;component/Image/ico_next_over.png"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="hoverbutton">
                        <Border.Background>
                            <ImageBrush ImageSource="/NhomMua;component/Image/ico_next.png"/>
                        </Border.Background>
                    </Border>
                </Grid>
            </ControlTemplate>

Answer 4

Pour modifier l'arrière-plan du bouton lorsque celui-ci est enfoncé, j'utilise les modèles. Comme Matt l'a souligné, ouvrez le projet dans Blend. Allez sur le bouton > Clic droit > Modifier le modèle > Modifier une copie. Un nouveau modèle pour votre bouton sera créé et ajouté au début de votre page XAML.

Puisque vous devez modifier le comportement du bouton lorsqu'il est enfoncé, vous devez modifier l'état visuel. Dirigez-vous vers l'état visuel "Pressed" et regardez-le. Voici l'état visuel "Pressed".

<VisualState x:Name="Pressed">
 <Storyboard>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
      </ObjectAnimationUsingKeyFrames>
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
      <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
      </ObjectAnimationUsingKeyFrames>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
           <DiscreteObjectKeyFrame KeyTime="0" Value="#FF373737" />
      </ObjectAnimationUsingKeyFrames>
 </Storyboard>

Changez la valeur de #FF373737 en ce que vous voulez. Vous êtes maintenant prêt.