CODEWITHSUNDEEP
c#wpfvb.netxaml
Elmo
Elmo

Reputation: 6471

Scrolling Background Animation in WPF

This is my code:

<DrawingBrush Viewport="0,0,16,16" ViewportUnits="Absolute" Stretch="None" TileMode="Tile" x:Key="dbCheckerBoard">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <GeometryDrawing Brush="LightGray">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <RectangleGeometry Rect="0,0,8,8"/>
                        <RectangleGeometry Rect="8,8,8,8"/>
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <GeometryDrawing Brush="White">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <RectangleGeometry Rect="8,0,8,8"/>
                        <RectangleGeometry Rect="0,8,8,8"/>
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>

which gives my control element the following background:

Now I want to gently scroll the background so that it looks animated, can anyone tell me how do I do that?

Upvotes: 0

Views: 1152

Answers (1)

K893824
K893824

Reputation: 1319

You could try adding:

<ControlName.Triggers>
    <EventTrigger RoutedEvent="ControlName.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <RectAnimation
                    Storyboard.TargetProperty="Background.Viewport"
                    From="0 0 16 16" To="16 16 16 16" Duration="0:0:1"
                    RepeatBehavior="Forever" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</ControlName.Triggers>

To the control of ControlName that the drawing brush is used on (assuming it's used as the Background).

If you wanted to make this a bit more automatic you could try creating a style that combines the two:

<Style x:Key="ScrollingGridStyle" TargetType="Control">
    <Setter Property="Background">
        <Setter.Value>
            <DrawingBrush
                ... Grid background brush
                ...
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <EventTrigger RoutedEvent="Control.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <RectAnimation
                        Storyboard.TargetProperty="Background.Viewport"
                        From="0 0 16 16" To="16 16 16 16" Duration="0:0:1"
                        RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

And then use it like:

<TextBlock Style="{StaticResource ScrollingGridStyle}"/>

Or, add it to your existing styles like:

<Style TargetType="TextBox" 
       x:Key="MyPrettyTextBox" 
       BasedOn="{StaticResource ScrollingGridStyle}">

Unfortunately, WPF doesn't have very much support for creating composite styles.

Upvotes: 1

Related Questions