如何使用情节提要移动 UI 元素？答案

【问题标题】：how to move UI element with storyboard?如何使用情节提要移动 UI 元素？
【发布时间】：2013-07-18 08:41:45
【问题描述】：

我在故事板中使用过 Opacity 属性但我不知道如何在 c# 中移动像网格堆栈面板按钮这样的 UI 元素.....？（我正在用 c# 而不是 xaml 编写故事板）

【问题讨论】：

【解决方案1】：

嗯，这取决于您的实际布局：您要为 Grid 或 Canvas 中的按钮设置动画（可以分别为 Margin 属性或 Canvas.Left 附加属性设置动画）？您想为属性本身或变换设置动画（后者将为 RenderTransform 设置动画 - 特别是 TranslateTransform）。如果您仍想引用“旧”位置，则可以使用 RenderTransform。

一种简单的方法是：

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Grid.Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <DoubleAnimation Storyboard.TargetName="myButton" 
                       Storyboard.TargetProperty="(Canvas.Left)" From="1" To="350" 
                       Duration="0:0:10" BeginTime="0:0:0"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
    <Canvas x:Name="myCanvas" Background="Yellow">
       <Button x:Name="myButton" Width="100" Height="30" Canvas.Left="100" Canvas.Top="100" />
    </Canvas>
  </Grid>
</Window>

【讨论】：

【解决方案2】：

如果您将混合用于情节提要会更好..我已经生成了堆栈面板向右移动的代码..只需检查它..

you can go through this video aslo it's very good 它在你的情况下完美工作

<Page.Resources>
    <Storyboard x:Name="Storyboard1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="hello">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel Name="hello" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" >
        <StackPanel.RenderTransform>
            <CompositeTransform/>
        </StackPanel.RenderTransform>
        <TextBlock Text="hello1" FontSize="50" />
        <Button Content="Button" FontSize="50" Click="Button_Click_1" />
    </StackPanel>
</Grid>

并在按钮单击时开始执行此操作..

 private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        Storyboard1.Begin();
    }

为了更好地理解，请阅读有关如何使用 blend..

【讨论】：