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

本文关键字：移动 UI 元素 何使 用情 | 更新日期: 2023-09-27 18:23:55

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

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

好吧，这取决于你的实际布局：你想在网格或画布中为按钮设置动画（可以分别设置Margin属性或Canvas的左附加属性的动画）？是要设置特性本身的动画还是变换的动画（后者将设置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>

如果你在故事板中使用blend会更好。。我已经为stackpanel向右移动生成了一个代码。。只要检查一下。

你可以浏览这个视频，因为它非常好，它将在你的情况下完美工作

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

为了更好地理解，只需阅读如何使用混合物。。

相关文章：