Czy w WPF ktoś animował siatkę?

Question

Mam 2 kolumny w siatce. Kiedy klikam przycisk, chcę, aby pierwsza kolumna animowała się po lewej stronie od bieżącej pozycji do 0. Tak więc, w efekcie, zwija się i mam tylko przeglądanie pojedynczej kolumny.

Answer 1

Wyjazd this wideo Link szkolenia, z Todd Miranda, który pokazuje, jak animować wysokość kontroli siatki. Myślę, że możesz z łatwością sprawić, żeby działało w twoim przypadku.

Answer 2

Nie powinno być zbyt trudne. Musisz utworzyć EventTrigger, który ma BeginStoryboard, który celuje w siatkę i używa DoubleAnimation do zmniejszania szerokości kolumny. The example here has a similar setup. EventTrigger powinien przejść do przycisku, a funkcja DoubleAnimation StoryBoard.Target wskaże definicję ColumnDefinition, którą chcesz zmniejszyć.

OK, więc to nie działa tak dobrze. Nie można bezpośrednio obalić kolumny, ale można ustawić kolumnę obkurczającą do wypełnienia (szerokość = "*"), ustawić szerokość siatki i kolumnę bez kurczenia się, a następnie zmniejszyć całą siatkę. To działa. Poniższy przykład działa:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     WindowTitle="Opacity Animation Example" 
     Background="White"> 
    <StackPanel Margin="20"> 
     <Grid Name="MyGrid" Width="200" HorizontalAlignment="Left"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="100"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="100"/> 
     </Grid.ColumnDefinitions> 
     <Rectangle HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Grid.Column="0" Fill="Red"/> 
     <Rectangle HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Grid.Column="1" Fill="Blue"/> 
     </Grid> 

     <Button Name="hideButton"> 
     <Button.Triggers> 
      <EventTrigger RoutedEvent="Button.Click"> 
       <BeginStoryboard> 
        <Storyboard> 
        <DoubleAnimation 
         Storyboard.TargetName="MyGrid" 
         Storyboard.TargetProperty="(Grid.Width)" 
         From="200" To="100" 
         Duration="0:0:2" 
         AutoReverse="True" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Button.Triggers> 
     </Button> 
    </StackPanel> 
</Page> 

Answer 3

Kolejną rzeczą jaką możesz zrobić jest animowanie zawartości i ustawić siatkę na automatyczną zmianę rozmiaru do treści, która to zrobi gładko jak wielkość Treści zmian.

Answer 4

Można to również uzyskać za pomocą animacji GridLength, patrz przykład tutaj. http://marlongrech.wordpress.com/2007/08/20/gridlength-animation/ Za pomocą tego podejścia można manipulować dowolnym danym rozmiarem Grid.Column lub Grid.Row.

Dla Twojej specjalnej potrzeby po prostu umieść pierwszą kolumnę z Width = "Auto", a następnie z *, animuj z treścią w pierwszej kolumnie - to wystarczy.

Answer 5

Można także skorzystać z kontroli Reveal worka-o-tricków Kevina, http://j832.com/bagotricks/

Answer 6

Pobrałem kod źródłowy C# Todd Mirandy i zmodyfikowałem go, aby zademonstrować, w jaki sposób animować szerokość kolumn DataGrid, zmniejszając się, rozszerzając się o &.

Oto kod źródłowy ...

http://www.pocketpctoolkit.com/WPF/DataGridColumnWidthAnimation.zip

Zasadniczo, można kliknąć na pole wyboru, a Którykolwiek kolumny DataGrid mieć ich „MinWidth” wartość ustawiona na 0 będzie skurczyła się do zerowej szerokości. Kliknij przycisk CheckBox ponownie, kolumny będą animowane z powrotem do ich pierwotnej szerokości.

Ten kod WPF demonstruje także sposób tworzenia animacji/scenorysów w kodzie źródłowym.

Answer 7

trzeba utworzyć klasę GridLengthAnimation (kod: http://windowsclient.net/learn/video.aspx?v=70654)

public class GridLengthAnimation : AnimationTimeline 
{ 
    public GridLengthAnimation() 
    { 
     // no-op 
    } 

    public GridLength From 
    { 
     get { return (GridLength)GetValue(FromProperty); } 
     set { SetValue(FromProperty, value); } 
    } 

    public static readonly DependencyProperty FromProperty = 
     DependencyProperty.Register("From", typeof(GridLength), typeof(GridLengthAnimation)); 

    public GridLength To 
    { 
     get { return (GridLength)GetValue(ToProperty); } 
     set { SetValue(ToProperty, value); } 
    } 

    public static readonly DependencyProperty ToProperty = 
     DependencyProperty.Register("To", typeof(GridLength), typeof(GridLengthAnimation)); 

    public override Type TargetPropertyType 
    { 
     get { return typeof(GridLength); } 
    } 

    protected override Freezable CreateInstanceCore() 
    { 
     return new GridLengthAnimation(); 
    } 

    public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock) 
    { 
     double fromValue = this.From.Value; 
     double toValue = this.To.Value; 

     if (fromValue > toValue) 
     { 
      return new GridLength((1 - animationClock.CurrentProgress.Value) * (fromValue - toValue) + toValue, this.To.IsStar ? GridUnitType.Star : GridUnitType.Pixel); 
     } 
     else 
     { 
      return new GridLength((animationClock.CurrentProgress.Value) * (toValue - fromValue) + fromValue, this.To.IsStar ? GridUnitType.Star : GridUnitType.Pixel); 
     } 
    } 
} 

I Storyboard dla RowDefinition/ColumnDefinition.

<Window.Resources> 
    <Storyboard x:Key="ColumnAnimation"> 
     <Animations:GridLengthAnimation 
      BeginTime="0:0:0" 
      Duration="0:0:0.1" 
      From="0*" 
      Storyboard.TargetName="ColumnToAnimate" 
      Storyboard.TargetProperty="Width" 
      To="10*" /> 
    </Storyboard> 

</Window.Resources> 

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="10*" /> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition x:Name="ColumnToAnimate" Width="0*" /> 
    </Grid.ColumnDefinitions> 
</Grid>