设置鼠标悬停/用户单击按钮的样式

本文关键字：按钮 样式 单击 用户 鼠标 悬停 设置 | 更新日期: 2023-09-27 18:28:06

我有一个按钮，我想在上面设置滚动动画效果和颜色的样式。但我无法使用Expression Blend打开文件。是否有任何方法可以为当前XAML页面上的按钮设置样式，而不是将所有内容插入控件库？

我想要一个渐变效果，当用户滚动时，渐变为黑色，而当用户单击时，则渐变为白色。这是我迄今为止拥有的

<Button Content="SOS" Foreground="White" VerticalAlignment="Stretch"  
HorizontalAlignment="Stretch" Width="400" Margin="10,0,0,0" Background="#AE193E"
Padding="0" BorderThickness="0" FontSize="36" FontFamily="Calibri" 
FontWeight="Normal" />

设置鼠标悬停/用户单击按钮的样式

好吧，我发现了这个=D

<Page.Resources>
    <Style x:Key="CustomButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Orange"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
        <Setter Property="FontSize" Value="30"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />
                  <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" />
                </Storyboard>
              </VisualState>
           </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Grid>
            <Rectangle x:Name="Border" Stroke="Black" Fill="Orange" Margin="-5"/>
            <ContentPresenter x:Name="Content"/>
          </Grid>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
</Page.Resources>

并将这个简短的代码添加到的按钮上

Style="{StaticResource CustomButtonStyle}"

现在只在那里的地铁aps样本中发现。。。

<Button Content="SOS" Foreground="White" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
            Width="400" Margin="10,0,0,0" Background="#AE193E" Padding="0" BorderThickness="0" FontSize="36" 
            FontFamily="Calibri" FontWeight="Normal">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Style.Triggers>
                    <!--user rollover fade to black-->
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="Background.Color" From="#AE193E" To="Black" Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <!--when user click, fade to white....-->
                    <EventTrigger RoutedEvent="MouseDown">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Black" To="White" Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
相关文章：