Question

我有一个按钮，我想在其上设置翻转动画效果和颜色的样式。但我无法使用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" />

Answer 1

好吧，我发现这个= 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}"

现在只能在地铁站找到样品......

Answer 2

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

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

2 个答案: