Windows Phone 7 (WP7) Ändern Sie die Hintergrundfarbe eines Knopfes bei Klick

Question

Dies scheint ein wirklich, wirklich einfaches Problem, aber ich kann es nicht herausfinden. Der Übeltäter scheint der Standard-Stil von WP7 zu sein. Wenn Sie auf eine Schaltfläche klicken, wird die Hintergrundfarbe in Weiß geändert und dann wieder auf den Standardhintergrund der Schaltfläche.

Das Problem, das ich habe, ist, ich möchte den Hintergrund der Schaltfläche ändern, wenn auf die Schaltfläche geklickt wird. Ich kann keinen möglichen Weg finden, dies zu tun.

Ich habe versucht, den Hintergrund im Code, aber das tut nichts. Ich denke, es wird vom Standard-Stil überschrieben.

Ich habe versucht, eine Eigenschaft ändern Verhalten in Blend, aber das hat genau das gleiche Ergebnis.

Ich habe versucht, einen neuen visuellen Zustand für die Schaltfläche zu erstellen und das auf klicken, aber das ist ein wenig fehlerhaft und hat einen großen Aufwand für die Anzahl der Schaltflächen, mit denen ich es zu tun habe. Außerdem hat es nicht funktioniert.

Ich kann den Hintergrund anderer Schaltflächen auf ein Klickereignis setzen, nur nicht auf die Schaltfläche.

Das ist so ein lästiger Roadblock! Ich bin mir sicher, dass dies eine Art Code-Antwort ist. :)

Answer 1

Sie müssen eine Schaltflächenvorlage erstellen, die den gedrückten visuellen Status ändert.

In Mischung, wählen Sie Ihre Schaltfläche, klicken Sie auf den Menüpunkt "Objekt" -> "Vorlage bearbeiten" -> "Bearbeiten einer Kopie ..." und eine neue Vorlage wird erstellt. Wählen Sie im Fenster "Status" den gedrückten visuellen Status in der visuellen Statusgruppe "CommonStates" aus. Wählen Sie jetzt ButtonBackground in der Objekthierarchie und bearbeiten Sie den Hintergrundpinsel im Eigenschaftenfenster.

Ich bearbeitet den Hintergrund des gepressten Staates, um eine feste Cyan-ish-Farbe zu sein und endete mit etwas wie diesem 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

Ich denke, eine Referenz auf den tatsächlichen Hintergrund bekommen, dann ändern, dass könnte helfen. Hier ist eine Methode, die eine Instanz um eine Schaltfläche erweitert.

 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

Um die Schaltfläche Hintergrund zu ändern, wenn die Taste gedrückt wird, verwende ich die Vorlagen. Wie Matt darauf hingewiesen hat, öffne das Projekt in Blend. Gehen Sie zur Schaltfläche> Rechtsklick> Vorlage bearbeiten> Kopie bearbeiten. Eine neue Vorlage für Ihre Schaltfläche wird erstellt und an den Anfang Ihrer XAML-Seite angehängt.

Jetzt, da Sie das Verhalten der Schaltflächen ändern müssen, wenn die Schaltfläche gedrückt wird, müssen Sie den VisualState ändern. Gehe zum "gepressten" visuellen Zustand und spähe hinein. Dies ist der "gepresste" visuelle Zustand.

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

Ändern Sie den Wert von # FF373737 zu alles, was Sie sich wünschen. Sie sind jetzt eingestellt.