UWP按钮在鼠标悬停时更改颜色

我试图创建一个UWP按钮，它将在鼠标指针悬停在其上时更改背景颜色。我遇到的麻烦是，默认情况下，它似乎已经这样做，但不是我想要的颜色。当我将鼠标悬停在红色的按钮上时，它会变成默认的灰色，然后当我将鼠标移出时再回来。我在C＃编写代码，试图使它变成蓝色，当我在它悬停UWP按钮在鼠标悬停时更改颜色

private void button_PointerEntered_1(object sender, PointerRoutedEventArgs e) 
    { 
     button.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 0, 255)); 
    } 

    private void button_PointerExited_1(object sender, PointerRoutedEventArgs e) 
    { 
     button.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 255, 0, 0)); 
    }

下面是按钮的XAML代码

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Button x:Name="button" 
       Content="Button" 
       HorizontalAlignment="Left" 
       Margin="417,188,0,0" 
       VerticalAlignment="Top" 
       Height="230" 
       Width="461" 
       FontSize="72" 
       ManipulationMode="None" 
       PointerEntered="button_PointerEntered_1" 
       PointerExited="button_PointerExited_1"> 
      <Button.Foreground> 
       <SolidColorBrush Color="Black"/> 
      </Button.Foreground> 
      <Button.Background> 
       <SolidColorBrush Color="Red"/> 
      </Button.Background> 
     </Button> 

    </Grid>

来源

2016-08-04 Guy Cassetta

你应该覆盖Button风格

<Page.Resources> 
    <Style TargetType="Button" x:Key="CustomButtonStyle"> 
     <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="Button"> 
        <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="RootGrid" 
                Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Orange" /> 
             </ObjectAnimationUsingKeyFrames> 

             <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 SystemControlDisabledBaseLowBrush}" /> 
             </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> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
     x:Name="gridRoot"> 

    <Button Content="stackoverflow" 
      Style="{StaticResource CustomButtonStyle}"/> 
</Grid>

看看PointerOver状态以及我如何设置Background属性。

来源

2016-08-04 23:18:57

您可以将Button按钮拖放到您的网格上，并左键单击它以选择编辑项目。然后您会看到样式默认为@Andrii答案。如果您想将鼠标移至颜色上并且可以更改代码<VisualState x:Name="Pressed">

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
    Storyboard.TargetProperty="Background"> 
    <DiscreteObjectKeyFrame KeyTime="0" Value="The new Color" />

您可以将The new Color更改为您的颜色。

来源

2016-08-05 03:49:42 lindexi

UWP按钮在鼠标悬停时更改颜色

回答

相关问题