Xamarin.Forms: Anpassen der Schaltfläche Stil auf Hover in UWP

Question

Ich habe einen Stil in App.xaml des Xamarin Forms-Projekts definiert. Aber das hat keinen Einfluss auf die Schaltfläche, wenn Sie den Mauszeiger darüber bewegen oder drücken. Die Schriftfarbe ändert sich hier zu Schwarz und ein grauer Rand um die Schaltfläche erscheint. Jetzt möchte ich diesen Stil überschreiben.

Zuerst versuchen: add Definition App.xaml des UWP Projekt

<Application 
    x:Class="YourApp.UWP.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:YourApp.UWP" 
    RequestedTheme="Light"> 

    <Application.Resources> 
     <ResourceDictionary> 
      <ResourceDictionary.ThemeDictionaries> 
       <ResourceDictionary x:Key="Light"> 
        <SolidColorBrush x:Key="ButtonPointerOverBackgroundThemeBrush" Color="#00FF00" /> 
       </ResourceDictionary> 
      </ResourceDictionary.ThemeDictionaries> 
     </ResourceDictionary> 
    </Application.Resources> 
</Application> 

Ergebnis: keine Änderungen an allen

Zweite versuchen: überschreiben PointOver visuellen Zustand in App.xaml von UWP Projekt

<Application 
    x:Class="YourApp.UWP.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:YourApp.UWP" 
    RequestedTheme="Light"> 

    <Application.Resources> 
     <ResourceDictionary> 
      <Style TargetType="Button" x:Key="HoverButtonStyle"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="Button"> 
          <Grid> 
           <VisualStateManager.VisualStateGroups> 
            <VisualStateGroup x:Name="CommonStates"> 
             <VisualState x:Name="PointerOver"> 
              <Storyboard> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                       Storyboard.TargetProperty="Background"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="#00FF00" /> 
               </ObjectAnimationUsingKeyFrames> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                       Storyboard.TargetProperty="Foreground"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="#00FF00" /> 
               </ObjectAnimationUsingKeyFrames> 
              </Storyboard> 
             </VisualState> 
            </VisualStateGroup> 
           </VisualStateManager.VisualStateGroups> 
          </Grid> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </ResourceDictionary> 
    </Application.Resources> 
</Application> 

Ergebnis: keine Änderungen an alle, ich glaube, ich habe den Stil applay (wenn ich dies tun, die Sie hier nicht zu sein scheint)

Drittens versuchen: Stil, komplett Taste und wenden es

<Style TargetType="Button" x:Key="HoverButtonStyle"> 
    <Setter Property="Background" Value="{ThemeResource ButtonBackgroundThemeBrush}" /> 
    <Setter Property="Foreground" Value="{ThemeResource ButtonForegroundThemeBrush}"/> 
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderThemeBrush}" /> 
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" /> 
    <Setter Property="Padding" Value="12,4,12,4" /> 
    <Setter Property="HorizontalAlignment" Value="Left" /> 
    <Setter Property="VerticalAlignment" Value="Center" /> 
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
    <Setter Property="FontWeight" Value="SemiBold" /> 
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal" /> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                 Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                 Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                 Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                 Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                 Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                 Storyboard.TargetProperty="BorderBrush"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                 Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="FocusVisualWhite" 
             Storyboard.TargetProperty="Opacity" 
             To="1" 
             Duration="0" /> 
            <DoubleAnimation Storyboard.TargetName="FocusVisualBlack" 
             Storyboard.TargetProperty="Opacity" 
             To="1" 
             Duration="0" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unfocused" /> 
          <VisualState x:Name="PointerFocused" /> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border x:Name="Border" 
       Background="{TemplateBinding Background}" 
       BorderBrush="{TemplateBinding BorderBrush}" 
       BorderThickness="{TemplateBinding BorderThickness}" 
       Margin="3"> 
         <ContentPresenter x:Name="ContentPresenter" 
           Content="{TemplateBinding Content}" 
           ContentTransitions="{TemplateBinding ContentTransitions}" 
           ContentTemplate="{TemplateBinding ContentTemplate}" 
           Margin="{TemplateBinding Padding}" 
           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
           VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
           AutomationProperties.AccessibilityView="Raw"/> 
        </Border> 
        <Rectangle x:Name="FocusVisualWhite" 
        IsHitTestVisible="False" 
        Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" 
        StrokeEndLineCap="Square" 
        StrokeDashArray="1,1" 
        Opacity="0" 
        StrokeDashOffset="1.5" /> 
        <Rectangle x:Name="FocusVisualBlack" 
        IsHitTestVisible="False" 
        Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" 
        StrokeEndLineCap="Square" 
        StrokeDashArray="1,1" 
        Opacity="0" 
        StrokeDashOffset="0.5" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Individuelle Renderer:

protected override void OnElementChanged(ElementChangedEventArgs<Button> e) 
{ 
    base.OnElementChanged(e); 

    if (this.Element != null) 
    { 
     this.Control.Style = Windows.UI.Xaml.Application.Current.Resources["HoverButtonStyle"] as Windows.UI.Xaml.Style; 
    } 
} 

Ergebnis: Stil scheint angewendet zu werden, aber die Hintergrundfarbe I in Xamarin Forms definiert nicht die volle Breite der Taste nehmen. Auch die Rahmenfarbe wird immer noch nicht geändert.

Wie wird das richtig gemacht?

Answer 1

Jetzt habe ich herausgefunden, wie das Styling funktioniert. Zuerst müssen Sie die Basis-UWP-Klasse finden (indem Sie Ctrl halten und auf den Klassennamen klicken oder indem Sie here suchen). Z.B. für Picker ist es ComboBox. Wenn Sie Google verwenden, gelangen Sie zu this page, wo Sie alles über das Überschreiben des Standardlayouts von ComboBox finden. Für eine Button ist es this page und so weiter. So ist die Lösung eine App.xaml (UWP-Projekt) wie folgt aus (nehmen Sie die Farbe Ihrer Wahl) zu haben ist:

<Application 
    x:Class="YourApp.UWP.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:YourApp.UWP" 
    RequestedTheme="Light"> 

    <Application.Resources> 
     <ResourceDictionary> 
      <ResourceDictionary.ThemeDictionaries> 
       <ResourceDictionary x:Key="Light"> 
        <SolidColorBrush x:Key="SystemControlHighlightBaseMediumLowBrush" Color="White" /> 
        <SolidColorBrush x:Key="SystemControlHighlightBaseHighBrush" Color="White" /> 
       </ResourceDictionary> 
      </ResourceDictionary.ThemeDictionaries> 
     </ResourceDictionary> 
    </Application.Resources> 
</Application> 

Um einen Stil gelten nur für einige Tasten, haben Sie die folgenden Schritte zu tun:

in App.xaml Ihr UWP Projekt benötigen Sie den folgenden Eintrag:

<Application.Resources> 
    <ResourceDictionary> 
     <ResourceDictionary.MergedDictionaries> 
      <ResourceDictionary Source="Styles/DefaultButtonControlTemplate.xaml" /> 
     </ResourceDictionary.MergedDictionaries> 
    </ResourceDictionary> 
</Application.Resources> 

Sie hier einen Stil registrieren, die in einer separaten Datei. Ich habe einen Ordner Styles genannt, wo die Datei DefaultButtonControlTemplate.xaml in platziert wird, um den Inhalt der von MSDN genommen Dateien und sieht wie folgt aus:.

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:MyApp.UWP.ControlTemplates"> 

    <ResourceDictionary.MergedDictionaries> 
     <ResourceDictionary Source="ColorsAndBrushes.xaml" /> 
    </ResourceDictionary.MergedDictionaries> 

    <ControlTemplate x:Key="DefaultButtonControlTemplate" TargetType="Button"> 
     <!-- here is the content of the file --> 
    </ControlTemplate> 

</ResourceDictionary> 

Wie man sehen kann ich Referenzierung eine gemeinsame Datei , die alle meine Farben enthält (oder Pinsel in UWP-Welt).

Schließlich müssen Sie eine benutzerdefinierte Renderer wie folgt aus:

public class DefaultButtonRenderer : ButtonRenderer 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e) 
    { 
     base.OnElementChanged(e); 

     if (this.Control != null) 
     { 
      this.Control.Template = Windows.UI.Xaml.Application.Current.Resources["DefaultButtonControlTemplate"] as Windows.UI.Xaml.Controls.ControlTemplate; 
     } 
    } 
}