WPF'de, hiç kimse bir Grid'i canlandırdı mı?

Question

Grid'de 2 sütun var. Bir düğmeyi tıklattığımda, o anki konumdan 0 olana kadar sola doğru hareket eden ilk sütunun olmasını istiyorum. Bu nedenle, aslında, o daraltılır ve yalnızca tek bir sütunu görüntülemekle kaldım.

Answer 1

Kontrol dışarı this video eğitim bağlantı. Sanırım bunu sizin durumunuz için kolayca çalıştırabilirsiniz.

Answer 2

Çok zor olmamalı. Izgarayı hedefleyen bir BeginStoryboard'a sahip olan ve sütun genişliğini daraltmak için bir DoubleAnimation kullanan bir EventTrigger oluşturmanız gerekir. The example here has a similar setup. EventTrigger düğmeyi kullanır ve DoubleAnimation'ın StoryBoard.Target'u küçültmek istediğiniz ColumnDefinition'ı işaret eder.

Pekala, bu işe yaramıyor. Sütunu doğrudan küçültebilirsiniz, ancak küçültme sütununu doldurabilir (genişlik = "*"), Izgara'nın genişliğini ve küçülmeyen sütunu ayarlayabilir ve ardından tüm ızgarayı daraltabilirsiniz. Bu işe yarıyor. Aşağıdaki örnek çalışır: Yapabileceğiniz

<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

Başka bir şey içeriğini animasyon ve içeriği değişir boyutu olarak sorunsuz yapacak içeriğe otomatik olarak boyutlandırma Izgara seti.

Answer 4

Ayrıca, GridLength animasyon ile bunu başarmak size herhangi bir Grid.Column veya Grid.Row boyutunu işleyebilirsiniz Bu yaklaşımı kullanarak Burada bir örnek http://marlongrech.wordpress.com/2007/08/20/gridlength-animation/ görebilirsiniz.

Özel gereksiniminiz için sadece ilk sütunu Genişlik = "Otomatik" ve ikinci olarak * ile koyun, ilk sütunun içerisindeki içeriği hareketlendirin. Ayrıca Kevin'in çantası-o-hileler gelen Ortaya kontrolünü kullanabilirsiniz

Answer 5

, nasıl bir ızgara kontrolü yüksekliğini animasyon gösterir Todd Miranda dan http://j832.com/bagotricks/

Answer 6

Todd Miranda'nın C# kaynak kodunu aldım ve DataGrid Sütun genişliklerinin & genişlemesini küçülterek nasıl canlandırılacağını göstermek için bunu değiştirdim.

İşte

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

Temel olarak, bir CheckBox tıklayın ve hangisi DataGrid sütunları 0 sıfır genişlik küçültülecek onların "MinWidth" değeri ayarlanabilir var ... kaynak kod. CheckBox'ı tekrar tıklayın, sütunlar orijinal genişliklerine geri dönüş yapar.

Bu WPF kodu, arkasındaki kodda animasyonların/storyboard'ların nasıl oluşturulacağını da gösterir.

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); 
     } 
    } 
} 

Ve RowDefinition/ColumnDefinition için Storyboard:

Answer 7

Sen (http://windowsclient.net/learn/video.aspx?v=70654 kod) bir GridLengthAnimation sınıf oluşturun gerekir.

<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>