Location>code7788 >text

WPF How to use Blend to add ripple effect to Button

Popularity：867 ℃/2024-08-28 14:01:07

Let's take a look at the results.

If you don't know how to write animations or are too lazy to do so, just leave it to Blend ;)

In fact, Blend operation is very simple, somewhat similar to the operation of PS, we only need to set the key frame, the mouse point to point on it, Blend will automatically help us generate the animation we want.

Step 1: To create an empty WPF project

Step 2: Right click on our project and at the very bottom there is a, theDesigning in Blend

If you don't have it, you should have checked it off when you installed vs. It's checked by default, and you can reinstall it back if you don't have it.

Tap the top navigation bar on thetoolbar (in computer software)

Just install it.

Step 3: Open the Blend project operation page and the WPF page is almost exactly the same!

Let's add a button inside, set the length to 100 and the height to 30.

Then right click on our Button in the designer, find Edit Template, edit the copy, click OK, and then vs will generate a big block of code for us.

The code inside his ControlTemplate looks like this

<Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
     <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>

Let's change it to something like this

<Grid>
     <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="#FFDACFCF" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true" CornerRadius="10"/>
          <Border x:Name="border1" Background="#7FFFFFFF" CornerRadius="10">
               <>
                     <RectangleGeometry>
                            <>
                                    <Rect Width="0" Height="30" X="50" Y="0"/>
                            </>
                     </RectangleGeometry>
                </>
          </Border>
     <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>

We take the original ContentPresenter from the Border out of the interior, and then in the middle of them sandwiched between a layer of Border, and then set the background color of the Border to White, and then in the Properties panel to adjust his transparency to 50 percent!

(You can also adjust the color and transparency according to your own preferences, as long as you can see the text of the Button on the line)

Then add a Clip to this border (what is a Clip you can mouse over the Clip, press F1, check the documentation for instructions)

Set the coordinates and width and height of the Rect inside (the coordinate point is based on the upper-left corner of the space, the upper-left corner is (0,0), the lower-right corner is (width, height))

Because we set the effect of spreading from the center to the sides, we put this rectangle in the middle, that is, the position of (50,0)

Step 4: Now to write an animation using Blend

Blend has a leftDocument Outline

Open it up and you'll seeObjects and timelines

Tap the green one.+ No. Blend creates an empty animation.

Then the whole interface will be circled in red.

At this point we can add the animation

Let's tap the button that records the keyframes at 0 seconds and 1 second.

And then we'll click on the 1-second keyframe position

Finally, inside the code, check the Rect of our Border.

Changing the value here indicates what the value of the border's clip will be after 1 second.

Initial values are 50,0,0,30.

We change it to 0,0,100,30, press enter, and Blend automatically animates it.

Step 5: Apply this animation to the Button's Triggers underneath where IsMouseOver is true.

<Trigger Property="IsMouseOver" Value="true">
    <>
        <BeginStoryboard x:Name="bs1" Storyboard="{StaticResource Storyboard1}"/>
    </>
    <>
         <StopStoryboard BeginStoryboardName="bs1"/>
    </>
</Trigger>

This way the animation will be executed when the property IsMouseOver becomes True;

Alternatively, we can use EventTrigger to achieve this effect

<EventTrigger RoutedEvent="{x:Static }">
     <BeginStoryboard Storyboard="{StaticResource Storyboard1}" x:Name="bs1"/>
</EventTrigger>
<EventTrigger RoutedEvent="{x:Static }">
     <StopStoryboard BeginStoryboardName="bs1"/>
</EventTrigger>

The difference is that one triggers the animation when the property changes, and the other executes the animation in the routing event, so you can choose either one.

Project github address:bearhanQ/WPFFramework: Share some experience ()

QQ technical exchange group: 332035933;

 

<Previous Next>