如何在WPF C＃中制作动画？
我正在尝试使用这个人制作的Youtube Video
创建一个类似的项目当然，不是那么棒，这超出了我的技能。但我现在要做的很简单（与视频相比）
这是我到目前为止所做的
这就是我所做的，当然，使用拖放，无法弄清楚如何在距离特定按钮的短距离内创建形状（矩形或任何其他形状），然后连接其他形状或相似的东西。
我所做的就是当你按下按钮显示这两个矩形时。
另外，尝试在不同的角度制作它。例如像这张照片
为了让您更好地了解我正在制作的项目，请阅读下面的内容。
这是我正在制作的学校项目，我在SQL中的数据库中有一些数据，想要展示那些不在表格或任何标签中的数据，但就像我给你看的照片一样。例如。当表单加载时，它获取第一行，并列出名称（将是按钮）等项目，然后将根据列出的信息创建其他矩形。例如。当您单击人物名称（按钮）时，它将显示2-3个矩形（绿色矩形），其中包含年龄，学校，性别或其他任何内容的标签。
我该怎么做？它能够完成吗？我知道它真的很难，但是任何人都可以在任何教程中引用我吗？我在谷歌上搜索过的，大部分教程已经过时，6-7岁。
感谢您的考虑
1 个答案:
答案 0 :(得分：1)
雅我知道你想要完成什么，但就像我说的那样，雇佣专业前端“devigner”的家伙来制作这些东西。
所以我为延迟回应道歉，但我必须先把正常工作日的东西拿走，我在这个小例子上花了大约15分钟，然后我很快离开了这一天，让你开始提出想法或者2。
但是，当Toggle IsChecked = False时，我确实忽略了Exit操作。如果这是我的项目，还有很多其他的方法我可以做的事情，但这样的事情可能会在一天中大部分时间吃掉或更容易（特别是取决于你做多酷）所以这只是一个伪示例，但我希望它会有所帮助。
作为ToggleButton模板（SUPER SIMPLE CONCEPT EXAMPLE）;
<ToggleButton Content="Boaty McBoatFace" HorizontalAlignment="Center" VerticalAlignment="Center">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="bubbleAnim">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble2">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="210"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="210"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="133"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="210"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="205"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble6">
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="205"/>
</DoubleAnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="bubble6">
<EasingInt32KeyFrame KeyTime="0:0:0.7" Value="-5"/>
</Int32AnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="205"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="133"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble2">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble6">
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.985"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line2">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line6">
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border Height="300" Width="300">
<Canvas>
<Canvas.Resources>
<Style TargetType="Line">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Stroke" Value="Red"/>
<Setter Property="StrokeThickness" Value="2"/>
</Style>
<Style TargetType="Border">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Purple"/>
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="CornerRadius" Value="50"/>
<Setter Property="Padding" Value="10,5"/>
</Style>
</Canvas.Resources>
<Line x:Name="line1" Opacity="0"
X1="75" Y1="75"
X2="150" Y2="150"/>
<Line x:Name="line2" Opacity="0"
X1="150" Y1="75"
X2="150" Y2="150" Stroke="Blue"/>
<Line x:Name="line3" Opacity="0"
X1="225" Y1="75"
X2="150" Y2="150"/>
<Line x:Name="line4" Opacity="0"
X1="225" Y1="150"
X2="150" Y2="150" Stroke="Blue"/>
<Line x:Name="line5" Opacity="0"
X1="150" Y1="150"
X2="75" Y2="225"/>
<Line x:Name="line6" Opacity="0"
X1="150" Y1="150"
X2="150" Y2="225" Stroke="Blue"/>
<Line x:Name="line7" Opacity="0"
X1="150" Y1="150"
X2="225" Y2="225"/>
<Line x:Name="line8" Opacity="0"
X1="150" Y1="150"
X2="75" Y2="150" Stroke="Blue"/>
<Border x:Name="bubble1" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="1"/>
</Border>
<Border x:Name="bubble2" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="2"/>
</Border>
<Border x:Name="bubble3" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="3"/>
</Border>
<Border x:Name="bubble4" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="4"/>
</Border>
<Border x:Name="bubble5" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="5"/>
</Border>
<Border x:Name="bubble6" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="6"/>
</Border>
<Border x:Name="bubble7" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="7"/>
</Border>
<Border x:Name="bubble8" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="8"/>
</Border>
<Border CornerRadius="3" Background="{TemplateBinding Background}"
Canvas.Left="95" Canvas.Top="138" Padding="1">
<ContentPresenter />
</Border>
</Canvas>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource bubbleAnim}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？