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按鈕在鼠標懸停時更改顏色

回答

相關問題