في برنامج الأغذية العالمي، وأحد الرسوم المتحركة على الشبكة؟

Question

ولقد 2 الأعمدة في الشبكة. عند النقر على زر، أريد العمود الأول إلى تحريك إلى اليسار من ذلك هو موقف الحالي إلى 0. لذلك، في الواقع، فإنه ينهار وأنا مع ترك فقط عرض عمود واحد.

Answer 1

هذا رابط فيديو للتدريب، من تود ميراندا التي تظهر لك كيفية تنشيط ذروة تحكم الشبكة. أعتقد أنك يمكن أن تجعل من السهل أن تعمل لقضيتك.

Answer 2

لا ينبغي أن يكون صعبا للغاية. كنت بحاجة لخلق EventTrigger له BeginStoryboard التي تستهدف الشبكة ويستخدم DoubleAnimation لتقليص عرض العمود. المثال هنا لديه الإعداد مماثل. وEventTrigger سيذهب على زر وDoubleAnimation في <لأ href = "http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.target.aspx" يختلط = "noreferrer "> StoryBoard.Target أن أشير إلى ColumnDefinition كنت ترغب في الانكماش.

حسنا، بحيث لا تعمل على ما يرام. لا يمكنك تقليص العمود مباشرة، ولكن يمكنك تعيين العمود تقلص لملء (العرض = "*")، تعيين عرض الشبكة والعمود غير تقلص، ومن ثم تقليص الشبكة بأكملها. هذا لا يعمل. في المثال التالي يعمل:

<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

وتحتاج إلى إنشاء فئة GridLengthAnimation (رمز من: 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);
        }
    }
}

وعلى القصة المصورة لل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>

Answer 4

وآخر شيء يمكنك القيام به هو تحريك محتويات وتعيين الشبكة إلى autosize إلى المحتوى الذي سوف تفعل يرام فإن حجم محتويات التغييرات.

Answer 5

ويمكنك أيضا استخدام التحكم في كشف من حقيبة س الحيل كيفن، http://j832.com/bagotricks /

Answer 6

ويمكنك أيضا تحقيق ذلك مع GridLength الرسوم المتحركة، ومشاهدة مثال هنا HTTP : //marlongrech.wordpress.com/2007/08/20/gridlength-animation/ باستخدام هذا النهج يمكنك التلاعب أي Grid.Column معين أو حجم Grid.Row.

لحاجة خاصة بك وضعت للتو العمود الأول مع العرض = "السيارات"، والثانية مع *، تحريك مع المحتوى داخل column- أول من شأنها أن تفعل خدعة.

Answer 7

ولقد اتخذت كود C # مصدر تود ميراندا وتعديله، لشرح كيفية تحريك DataGrid عرض الأعمدة تقلص والتوسع.

إليك شفرة المصدر ...

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

والأساس، والنقر على مربع، وأيهما أعمدة DataGrid يكون لها "MinWidth" قيمة معينة إلى 0 سيتم تقلصت إلى الصفر العرض. انقر فوق خانة الاختيار مرة أخرى، والأعمدة تحريك العودة الى الاعراض الأصلية.

ويوضح هذا الرمز WPF أيضا كيفية إنشاء الرسوم المتحركة / القصص المصورة في التعليمات البرمجية خلف.