c# - 如何使用情节提要移动 UI 元素？

Question

我已经在情节提要中使用了 Opacity 属性，但我无法弄清楚如何在 c# 中移动诸如网格堆栈面板按钮之类的 UI 元素 .....？（我正在用 c# 而不是 xaml 编写故事板）

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

Answer 2

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

您也可以浏览此视频，它非常好，非常适合您的情况

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

为了更好地理解，请阅读有关如何使用混合的信息。