2017-09-26 8 views
0

Auf einer XAML UWP-Anwendung, Ive eine Klasse, die Schaltfläche erweitert. Ich habe einen Hintergrund ImageBrush gesetzt.XAML UWP Fokus Backgound auf benutzerdefinierte Schaltfläche

Mein Problem ist, dass, wenn meine Schaltflächen den Fokus oder das Mouseover-Ereignis erhalten, ein graues Rechteck, das mit Schwarz eingefasst ist, auf meiner Schaltfläche erscheint.

Ive versucht eine shitton von viele Lösung von wechselnden Vordergrund modifizierende FocusVisualPrimary/SecondaryBrush auf verschiedene Art von Ereignis (gotFocus, mouseEntered, mouseover). Nichts funktionierte, das beste Ergebnis, das ich bekam, war mit der Einstellung button.Background = "originalBitmapImage" auf mouseover Ereignis (Ich erstellte einen neuen ImageBrush mit dem gleichen Bildpfad wie der ursprüngliche Hintergrund dann zugeordnet BackGround), aber das Bild flackert nur, wenn mouseover ausgelöst wird (als Es lädt jedes Mal ein neues Bild).

Hier ist ein Bild, das Problem (links: normale Tasten, rechts: gleiche Taste mit Mouseover): zeigt

Demo

Ich möchte das gleiche Bild in dem beide Fall halten, ich bin ein bisschen darüber, wie man das macht.

public class MyButton : Button 
{ 

private static string Image_path = "ms-appx:///assets/Button.png"; 

     public MyButton() 
     { 

      ImageBrush brush = new ImageBrush() 
      { 
       ImageSource = new BitmapImage(new Uri(MyButton.Image_path)) 
      }; 
      this.Background = brush; 

      this.PointerEntered += a; 

     } 

     // This almost work, but the image is flickering when event is fired 
     private void a(object sender, PointerRoutedEventArgs e) 
     { 
      ImageBrush brush = new ImageBrush() 
      { 
       ImageSource = new BitmapImage(new Uri(MyButton.Image_path)) 
      }; 
      //this.Foreground = brush; 
      this.Background = brush; 
     } 
} 
+0

Wenn Sie wollen einfach nur aufhören Flimmern, diese Bilder in einigen externen Feldern speichern. Wenn Sie dieses seltsame Verhalten verhindern möchten, könnten Sie eine Vorlage erstellen, oder noch einfacher ContentControl verwenden und Bild als Inhalt festlegen, oder Border mit seiner Hintergrundeigenschaft – sTrenat

Antwort

0

Am Ende fand ich eine Lösung: Ich Stil meine 5 Arten von Taste zu jeder Seite meines Projektes hinzugefügt. Dies ist nicht wirklich nette Lösung als Schaltfläche aus C# -Klasse (Code hinter) erstellt werden, um den Code zu faktorisieren, und alle Stil sind 500+ Codezeile für einfache Bildmodifikation bei mouseover ....

Ich habe diese verwendet Art Styling:

'

<Style TargetType="local:MyButton"> 
     <!--<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
     <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
     <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" /> 
     <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />--> 
     <Setter Property="Padding" Value="8,4,8,4" /> 
     <!--<Setter Property="HorizontalAlignment" Value="Left" /> 
     <Setter Property="VerticalAlignment" Value="Center" /> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
     <Setter Property="FontWeight" Value="Normal" /> 
     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />--> 
     <Setter Property="UseSystemFocusVisuals" Value="True" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="local:MyButton"> 
        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter x:Name="ContentPresenter" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         Content="{TemplateBinding Content}" 
         ContentTransitions="{TemplateBinding ContentTransitions}" 
         ContentTemplate="{TemplateBinding ContentTemplate}" 
         Padding="{TemplateBinding Padding}" 
         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
         AutomationProperties.AccessibilityView="Raw"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

</Page.Resources>' 
0

Wir können den Standardstil des Button kopieren, dann können wir die PointerOver von VisualState im Template bearbeiten.

Von der Standard-Stil, setzen Sie ihn ButtonBackgroundPointerOver ThemeResource zum Background des Button im PointerOver Visual. So können wir die ButtonBackgroundPointerOver in den Ressourcen der Seite definieren, ohne den Stil der Button zu bearbeiten.

Zum Beispiel:

<Page.Resources> 
    <StaticResource x:Key="ButtonBackground" ResourceKey="MyMyImageBrush" /> 
    <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="MyMyImageBrush" /> 
    <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseMediumLowBrush" /> 
    <ImageBrush x:Key="MyMyImageBrush" ImageSource="ms-appx:///assets/Button.png" /> 
</Page.Resources> 
+0

Thx, ich werde diese Lösung in kurzer Zeit testen. Gibt es eine Möglichkeit, dies im Code hinterher zu tun? Meine Schaltfläche ist in diesem Moment eine Klasse, kein XAML-Element. –

+0

Es ist die beste Lösung, die ich für diesen Moment habe, aber das ändert alle Tasten Ive auf der Seite. Das Problem ist, dass ich mehr als eine Art von Button haben kann: Also muss ich in der Lage sein, einen anderen Hintergrund (dh verschiedene Bilder in meinem Fall) für verschiedene Arten von Buttons einzustellen. Wenn es eine Lösung gäbe, die auf Code direkt in meiner anderen Button-Klasse implementiert werden kann, wäre das ziemlich cool. Danke –