Xamarin.Forms：UWPでホバー上のボタンスタイルをカスタマイズする

Question

XamarinフォームプロジェクトのApp.xamlにいくつかのスタイルを定義しました。しかし、その上にマウスを置いたり、押したりすると、ボタンには影響しません。ここでフォントの色が黒に変わり、ボタンの周囲に灰色の境界線が表示されます。今私はこのスタイルを上書きしたいと思います。すべて

第二の変更はを試してみません：UWPプロジェクト

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

結果のApp.xamlに定義を追加します。

まずを試してみてくださいUWPプロジェクトのApp.xamlにPointOver視覚的な状態を上書きし

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

結果：全く変化し、私はスタイルをapplayしなければならないと思います（私はこれを行う場合、ボタンはここではないように思わ）

第三はを試してみません：完全なボタンのスタイルを追加し、それに

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

を適用

カスタムレンダラ：

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

結果：スタイルが適用されるようですが、私はXamarinフォームで定義された背景色は、ボタンの幅いっぱいになりません。また、境界線の色は変更されません。

これはどのように正しく行われましたか？

Answer 1

今、私はこのスタイリングの仕組みを見つけました。まず、基本的なUWPクラス（Ctrlを保持し、クラス名をクリックするか、hereを参照）を見つける必要があります。例えば。 Pickerの場合はComboBoxです。 Googleを使用している場合は、this pageにアクセスし、デフォルトのレイアウトであるComboBoxを上書きするために必要な情報がすべて見つかります。 Buttonの場合はthis pageと続きます。だから、解決策は、このようなApp.xaml（UWPプロジェクト）（お好みの色を取る）することです。

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

するためには、唯一のいくつかのボタンのスタイルを適用するには、次の手順を実行する必要があります。

あなたは次のエントリ必要があるあなたのUWPプロジェクトの App.xamlで

：ここであなたを

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

を別のファイルにあるスタイルを、登録してください。 。私は、ファイルがDefaultButtonControlTemplate.xamlが中に配置されStylesというフォルダ、MSDNから撮影したファイルの内容を持っているとこのようになります：あなたは、私は、共通のファイルを参照しています見ることができるように

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

私のすべての色（またはUWP世界のブラシ）を含んでいます。あなたが唯一のいくつかのボタンにそれを適用したい場合はどう

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