CODEWITHSUNDEEP
c#wpfanimation
Tomtom
Tomtom

Reputation: 9384

Move UserControl in StoryBoard

In my application I have the following XAML-Code to animate the SearchInputView a bit. 

<Grid Grid.Row="1" HorizontalAlignment="Right" Grid.RowSpan="4" Panel.ZIndex="200" VerticalAlignment="Top" 
      Margin="0,-29,6,0">
    <Grid.Resources>
        <Duration x:Key="SearchAnimationDuration">0:0:0.4</Duration>
        <system:Double x:Key="Hidden">0.0</system:Double>
        <system:Double x:Key="Visible">1.0</system:Double>
        <system:Double x:Key="Transparent">0.5</system:Double>
        <Style TargetType="{x:Type view:SearchInputView}">
            <Style.Triggers>
                <Trigger Property="Visibility" Value="Visible">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Hidden}" To="{StaticResource Visible}" 
                                                 Duration="{StaticResource SearchAnimationDuration}"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Transparent}" To="{StaticResource Visible}" 
                                                 Duration="{StaticResource SearchAnimationDuration}"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Visible}" To="{StaticResource Transparent}" 
                                                 Duration="{StaticResource SearchAnimationDuration}"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>
    <view:SearchInputView Visibility="{Binding DataContext.SearchIsVisible, Mode=TwoWay, Converter={converter:BoolToVisibilityConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
</Grid>

The SearchInputView is located in right upper corner of my window. Now I want the control, if the mouse is not over, to fade out of the screen a bit so that only the half of the control is in the visible area. I tried it with the following DoubleAnimation in the ExitActions:

<DoubleAnimation Storyboard.TargetProperty="Margin.Left" To="50" Duration="0:0:0.4"/>

Now when the mouse leaves the control my application crashed immediately.

How can I move my control when the mouse leaves it?

Upvotes: 0

Views: 131

Answers (1)

dkozl
dkozl

Reputation: 33364

Margin.Left is not DependencyProperty so you cannot animate only left. You can either use ThicknessAnimation to animate whole margin or use TranslateTransform as RenderTransform and animate that

<Style TargetType="{x:Type view:SearchInputView}">
   <Setter Property="RenderTransform">
      <Setter.Value>
         <TranslateTransform X="0" Y="0"/>
      </Setter.Value>                     
   </Setter>
   <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
         <Trigger.EnterActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Transparent}" To="{StaticResource Visible}" Duration="{StaticResource SearchAnimationDuration}"/>
                  <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="0" Duration="0:0:0.4"/>
               </Storyboard>
            </BeginStoryboard>
         </Trigger.EnterActions>
         <Trigger.ExitActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Visible}" To="{StaticResource Transparent}" Duration="{StaticResource SearchAnimationDuration}"/>
                  <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="50" Duration="0:0:0.4"/>
               </Storyboard>
            </BeginStoryboard>
         </Trigger.ExitActions>
      </Trigger>
   </Style.Triggers>
</Style>

Upvotes: 1

Related Questions