Question

我需要将点击效果应用于silverlight Button，当你点击按钮时它应该有点击填充。预期会有什么机制。

它应该像实际按钮点击一样，点击它应该下降，然后释放应该再次上升

例如：在堆栈溢出时保存编辑按钮

Answer 1

首先，您需要为您的按钮创建一个样式 - 在xaml的资源部分。

请参阅此示例样式

<Style x:Key="MyButtonStyle"  x:Name="MyButtonStyle" TargetType="Button">
  <Setter Property="Background" Value="#FF1F3B53"/>
  <Setter Property="Foreground" Value="#FF000000"/>
  <Setter Property="Padding" Value="3"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="BorderBrush">
      <Setter.Value>
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="#FFA3AEB9" Offset="0"/>
              <GradientStop Color="#FF8399A9" Offset="0.375"/>
              <GradientStop Color="#FF718597" Offset="0.375"/>
              <GradientStop Color="#FF617584" Offset="1"/>
          </LinearGradientBrush>
      </Setter.Value>
  </Setter>
  <Setter Property="Template">
      <Setter.Value>
          <ControlTemplate TargetType="Button">
              <Grid>
                  <vsm:VisualStateManager.VisualStateGroups>
                      <vsm:VisualStateGroup x:Name="CommonStates">
                          <vsm:VisualState x:Name="Normal"/>
                          <vsm:VisualState x:Name="MouseOver">
                              <Storyboard>
                                  <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                  <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F2FFFFFF"/>
                                  <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#CCFFFFFF"/>
                                  <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#7FFFFFFF"/>
                              </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Pressed">
                              <Storyboard>
                                  <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FF6DBDD1"/>
                                  <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                  <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#D8FFFFFF"/>
                                  <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#C6FFFFFF"/>
                                  <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#8CFFFFFF"/>
                                  <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#3FFFFFFF"/>
                              </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Disabled">
                              <Storyboard>
                                  <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                              </Storyboard>
                          </vsm:VisualState>
                      </vsm:VisualStateGroup>
                      <vsm:VisualStateGroup x:Name="FocusStates">
                          <vsm:VisualState x:Name="Focused">
                              <Storyboard>
                                  <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                              </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Unfocused" />
                      </vsm:VisualStateGroup>
                  </vsm:VisualStateManager.VisualStateGroups>
                  <Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                      <Grid Background="{TemplateBinding Background}"  Margin="1">
                          <Border Opacity="0"  x:Name="BackgroundAnimation" Background="#FF448DCA" />
                          <Rectangle x:Name="BackgroundGradient" >
                              <Rectangle.Fill>
                                  <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                      <GradientStop Color="#FFFFFFFF" Offset="0" />
                                      <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                      <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                      <GradientStop Color="#C6FFFFFF" Offset="1" />
                                  </LinearGradientBrush>
                              </Rectangle.Fill>
                          </Rectangle>
                      </Grid>
                  </Border>
                  <ContentPresenter
                          x:Name="contentPresenter"
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"/>
                  <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                  <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
              </Grid>
          </ControlTemplate>
      </Setter.Value>
  </Setter>

你说你想要一个“点击填充”，所以根据需要编辑“按下”按钮状态。

然后，您可以通过设置按钮样式属性将其指定给按钮来使用该样式：Style="{StaticResource MyButtonStyle}"

Silverlight按钮单击效果

1 个答案: