web-dev-qa-db-fra.com

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

Cela semble être un problème vraiment très simple, mais je ne peux pas le comprendre. Le coupable semble être le style par défaut de WP7. Il change la couleur d'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 j'ai est que je veux changer l'arrière-plan du bouton lorsque le bouton est cliqué. Je ne trouve aucun moyen possible de le faire.

J'ai essayé de définir l'arrière-plan dans le code, mais cela ne fait 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 a 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 clic, mais c'est un peu bogué et a une surcharge importante pour le nombre de boutons que je traite. De plus, cela n'a pas fonctionné.

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

C'est un barrage routier tellement ennuyeux! Je suis sûr que c'est une réponse d'une sorte de code. :)

windowsexpression-blendwindows-phone-7
37
Jason

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

Dans le mélange, sélectionnez votre bouton, cliquez sur l'élément de menu "Objet" -> "Modifier le modèle" -> "Modifier une copie ..." et un nouveau modèle est créé. Dans la fenêtre États, sélectionnez l'état visuel Pressé dans le groupe d'état visuel 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 fini avec 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>
47
Matt Casto

Je pense qu'obtenir une référence à l'arrière-plan réel, puis changer cela pourrait aider. Voici une méthode qui prendra une instance d'un bouton.

        private void HighlightButton(Button btnToHighlight)
        {

            SolidColorBrush sBrush = (SolidColorBrush)btnToHighlight.Background;


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

        }
1
keyboardP
<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>
0
thongaduka

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

Maintenant, puisque vous devez modifier le comportement des boutons lorsque vous appuyez sur le bouton, vous devez modifier le VisualState. Dirigez-vous vers l'état visuel "Pressé" et regardez-le. Il s'agit de l'état visuel "Pressé".

<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>

Modifiez la valeur de # FF373737 pour tout ce que vous désirez. Vous êtes maintenant prêt.

0
Saif Al Falah