How to make a smooth appearance of the UI element?

There is such an option:

BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:0.5" /> </Storyboard> </BeginStoryboard>

In this case, the entire element will be drawn immediately, reducing the opacity from 0 to 1.

How can I make the control render from left to right without Opacity?

  • Animate Margin, for example, - VladD
  • @VladD, can you do a little example? The idea is that when a property changes in VM, a control should appear. - Lightness
  • Did, try. - VladD pm

1 answer 1

The easiest way to adapt the transformation. For example:

 <Window x:Class="..." xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" Title="Animation test" Height="350" Width="525"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Border Background="DeepSkyBlue"> <Border.Style> <Style TargetType="Border"> <Style.Triggers> <DataTrigger Binding="{Binding ShowAdditionalUI}"> <DataTrigger.Value> <sys:Boolean>True</sys:Boolean> </DataTrigger.Value> <DataTrigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetProperty=" (UIElement.RenderTransform). (TranslateTransform.X)"/> </Storyboard> </BeginStoryboard> </DataTrigger.EnterActions> <DataTrigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty=" (UIElement.RenderTransform). (TranslateTransform.X)"/> </Storyboard> </BeginStoryboard> </DataTrigger.ExitActions> </DataTrigger> </Style.Triggers> </Style> </Border.Style> <Border.RenderTransform> <TranslateTransform X="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=UIElement}}"/> </Border.RenderTransform> <TextBlock>Дополнительный выезжающий контент</TextBlock> </Border> <CheckBox IsChecked="{Binding ShowAdditionalUI}" Grid.Row="1"> Показать выезжающий контрол </CheckBox> </Grid> </Window>

(Note that the reverse animation does not indicate To , so the offset will roll back to the “normal” value.)

The "invisible" part of the control should be limited to the container of this control, and thus not visible. If you can still see it, put Border in an intermediate container with ClipToBounds="True" :

 <Border ClipToBounds="True"> <!-- вот это добавляем --> <Border Background="DeepSkyBlue"> ... </Border> </Border>

Result (screenshot in the process of animation):

animation

  • I try to figure it out. As far as I understand, the element is visible, it is just off the screen and leaves. But if I need him to leave not from outside the application, but let's say from the application center, then this approach will not work after all? - Lightness
  • Lightness: Almost like that. The element is not hiding outside the window, but outside its container (in this case, the Grid ). In theory, in the middle of the window should work the same way. - VladD
  • I tried to do it and the item got out of its container. - Lightness
  • @Lightness: Yeah, I understand what your problem is. Enclose the Border into another external Border with ClipToBounds="True" : <Border ClipToBounds="True"><Border Background="DeepSkyBlue">...</Border></Border> . It worked? - VladD
  • It worked, thanks! - Lightness