Xamarin.Forms中的UWP按钮悬停效果介绍

在Xamarin.Forms项目中，我们可以使用UWP按钮悬停效果来提高用户的交互体验。本文将介绍如何在Xamarin.Forms中使用UWP按钮悬停效果，主要分为以下几个部分：

1.创建一个UWP风格的按钮 2.添加悬停效果 3.自定义悬停效果

创建一个UWP风格的按钮

在Xamarin.Forms中创建一个UWP风格的按钮很简单，我们只需要在Xamarin.Forms中引用UWP按钮并设置样式即可。具体步骤如下：

1.在Xamarin.Forms项目中，添加对UWP按钮的引用：

<OnPlatform x:TypeArguments="x:String"
            x:Key="ButtonFontFamily">
  <On Platform="UWP" Value="Segoe MDL2 Assets.ttf#Segoe MDL2 Assets" />
  <On Platform="Android, iOS" Value="Arial.ttf#Arial" />
</OnPlatform>

2.创建一个按钮并设置它的样式：

<Button Text="Hello UWP" 
        Style="{StaticResource UWPButtonStyle}"
        FontFamily="{StaticResource ButtonFontFamily}"/>

这将创建一个使用UWP样式的按钮。

添加悬停效果

使用UWP按钮悬停效果时，我们需要在UWP项目中创建一个自定义的按钮样式，并将其导出为Xamarin.Forms的样式。具体步骤如下：

1.在UWP项目中创建一个自定义的按钮样式。

<Style x:Key="UWPHoverButtonStyle" TargetType="Button">
  <Setter Property="Background" Value="Transparent" />
  <Setter Property="BorderBrush" Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
  <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
  <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
  <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="SemiBold" />
  <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
  <Setter Property="UseSystemFocusVisuals" Value="True" />
  <Setter Property="FocusVisualMargin" Value="-3" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid x:Name="RootGrid"
              Background="{TemplateBinding Background}"
              CornerRadius="{TemplateBinding CornerRadius}">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="PointerOver">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                                 Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                 Storyboard.TargetProperty="Foreground">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlFocusVisualBasicBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <PointerUpThemeAnimation TargetName="RootGrid" />
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                                 Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                 Storyboard.TargetProperty="Foreground">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlFocusVisualBasicBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <PointerDownThemeAnimation TargetName="RootGrid" />
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="RootGrid"
                                   Storyboard.TargetProperty="Opacity"
                                   To="0.5"
                                   Duration="0" />
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ContentPresenter x:Name="ContentPresenter"
                            AutomationProperties.AccessibilityView="Raw"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Content="{TemplateBinding Content}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Padding="{TemplateBinding Padding}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            OpticalMarginAlignment="TrimSideBearings"/>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

2.在App.xaml中定义一个Xamarin.Forms的样式：

<OnPlatform x:TypeArguments="x:String"
            x:Key="ButtonFontFamily">
  <On Platform="UWP" Value="Segoe MDL2 Assets.ttf#Segoe MDL2 Assets" />
  <On Platform="Android, iOS" Value="Arial.ttf#Arial" />
</OnPlatform>

<Style x:Key="UWPButtonStyle" TargetType="Button">
  <Setter Property="BackgroundColor" Value="Transparent" />
  <Setter Property="TextColor" Value="DarkBlue" />
  <Setter Property="FontFamily" Value="{StaticResource ButtonFontFamily}" />
  <Setter Property="FontSize" Value="20" />
  <Setter Property="HorizontalOptions" Value="FillAndExpand" />
  <Setter Property="VerticalOptions" Value="CenterAndExpand" />
  <Setter Property="HeightRequest" Value="40" />
  <Setter Property="CornerRadius" Value="4" />
  <Setter Property="Style" Value="{StaticResource UWPHoverButtonStyle}" />
</Style>

这样就可以在Xamarin.Forms中使用UWP按钮悬停效果了。

自定义悬停效果

除了使用默认的UWP悬停效果，我们也可以自定义悬停效果。下面是一个自定义的悬停效果：

<VisualState x:Name="PointerOver">
  <Storyboard>
    <ColorAnimation Storyboard.TargetName="BackgroundBrush"
                    Storyboard.TargetProperty="Color"
                    To="Yellow"
                    Duration="0" />
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                   Storyboard.TargetProperty="Foreground">
      <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
    </ObjectAnimationUsingKeyFrames>
    <PointerUpThemeAnimation TargetName="RootGrid" />
  </Storyboard>
</VisualState>

在这个自定义悬停效果中，我们将按钮的背景颜色改为Yellow，文字颜色改为黑色。

总结

本文介绍了如何在Xamarin.Forms中使用UWP按钮悬停效果，包括创建一个UWP风格的按钮、添加悬停效果和自定义悬停效果。希望对Xamarin.Forms开发者有所帮助。