Foro de elhacker.net

Programación => .NET (C#, VB.NET, ASP) => Mensaje iniciado por: juanedwin en 29 Mayo 2022, 01:21 am



Título: Ayuda con WPF Xaml, StoryBoard con duracion Variable
Publicado por: juanedwin en 29 Mayo 2022, 01:21 am
Saludos a todos, estoy usando el framework 3.5, en visual estudio 2019, lo que quiero hacer es un cirulo de progreso es decir dibujar un circulo que se complete digamos en 10 segundos, en el framework 4 hay una herramienta exclusiva para esto llamada Arc usando eso es facil, lastima que me es necesario usar el framework 3.5 ya que el lector y analizador de xaml esta en funcion del 3.5, ahora he logrado simular ese asunto que comparto el codigo xaml, lo que no puedo es como puedo estirar lo keyframe cuando la duracion cambia, se podra hay algo que me estoy perdiendo, o como podria resolverlo esto, usando solo xaml SI SOLO XAML, por lo pronto es lo que he podido hacer, haciendo con su codigo subyacente creo que lo podria hacer pero me es importante hacerlo en xaml, habra otras clases de animaciones que pudiern resolver esto?, ahi les comparto el codigo..... saludos y espero su ayudadita, plis...
Código
  1. <Window x:Class="Window6"
  2.        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.        xmlns:local="clr-namespace:WpfApplication1"
  7.        mc:Ignorable="d"
  8.        Title="Window6" Height="450" Width="800" Background="#FF616161">
  9.    <Window.Resources>
  10.        <SolidColorBrush x:Key="Borde" Color="Red"/>
  11.        <Storyboard  x:Key="Storyboard1">
  12.            <RectAnimation Storyboard.TargetName="c1" Storyboard.TargetProperty ="Rect" Duration="0:0:2" From="100,0,0,50" To="100,0,70,50"  BeginTime="0:0:2"/>
  13.            <RectAnimation Storyboard.TargetName="c2" Storyboard.TargetProperty ="Rect" Duration="0:0:2" From="170,28,30,0" To="170,28,30,72" BeginTime="0:0:4"/>
  14.            <RectAnimation Storyboard.TargetName="c3" Storyboard.TargetProperty ="Rect" Duration="0:0:2" From="170,100,30,0" To="170,100,30,72" BeginTime="0:0:6"/>
  15.            <RectAnimation Storyboard.TargetName="c4" Storyboard.TargetProperty ="Rect" Duration="0:0:2" From="170,150,70,50" To="100,150,70,50" BeginTime="0:0:8"/>
  16.            <RectAnimation Storyboard.TargetName="c5" Storyboard.TargetProperty ="Rect" Duration="0:0:2" From="100,150,0,50" To="30,150,70,50" BeginTime="0:0:10"/>
  17.            <RectAnimation Storyboard.TargetName="c6" Storyboard.TargetProperty ="Rect" Duration="0:0:2" From="0,172,30,0" To="0,100,30,72" BeginTime="0:0:12"/>
  18.            <RectAnimation Storyboard.TargetName="c7" Storyboard.TargetProperty ="Rect" Duration="0:0:2" From="0,100,30,0" To="0,28,30,72" BeginTime="0:0:14"/>
  19.            <RectAnimation Storyboard.TargetName="c8" Storyboard.TargetProperty ="Rect" Duration="0:0:2" From="30,0,0,50" To="30,0,70,50" BeginTime="0:0:16"/>
  20.        </Storyboard>
  21.    </Window.Resources>
  22.    <Window.Triggers>
  23.        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
  24.            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
  25.        </EventTrigger>
  26.    </Window.Triggers>
  27.    <Grid >
  28.        <Canvas Width="200" Height="200">
  29.            <Ellipse Name="e1" Height="200" Width="200" StrokeThickness="6" Stroke="{DynamicResource Borde}"><Ellipse.Clip><RectangleGeometry  x:Name="c1"  Rect="100,0,0,0"  /></Ellipse.Clip></Ellipse>
  30.            <Ellipse Name="e2" Height="200" Width="200" StrokeThickness="6" Stroke="{DynamicResource Borde}"><Ellipse.Clip><RectangleGeometry x:Name="c2"  Rect="170,28,0,0"/></Ellipse.Clip></Ellipse>
  31.            <Ellipse Name="e3" Height="200" Width="200" StrokeThickness="6" Stroke="{DynamicResource Borde}"><Ellipse.Clip><RectangleGeometry x:Name="c3"  Rect="170,100,0,0"  /></Ellipse.Clip></Ellipse>
  32.            <Ellipse Name="e4" Height="200" Width="200" StrokeThickness="6" Stroke="{DynamicResource Borde}"><Ellipse.Clip><RectangleGeometry x:Name="c4"  Rect="100,150,0,0"/></Ellipse.Clip></Ellipse>
  33.            <Ellipse Name="e5" Height="200" Width="200" StrokeThickness="6" Stroke="{DynamicResource Borde}"><Ellipse.Clip><RectangleGeometry x:Name="c5"  Rect="100,170,0,50"  /></Ellipse.Clip></Ellipse>
  34.            <Ellipse Name="e6" Height="200" Width="200" StrokeThickness="6" Stroke="{DynamicResource Borde}"><Ellipse.Clip><RectangleGeometry x:Name="c6"  Rect="170,28,0,0"/></Ellipse.Clip></Ellipse>
  35.            <Ellipse Name="e7" Height="200" Width="200" StrokeThickness="6" Stroke="{DynamicResource Borde}"><Ellipse.Clip><RectangleGeometry x:Name="c7"  Rect="100,0,0,0"  /></Ellipse.Clip></Ellipse>
  36.            <Ellipse Name="e8" Height="200" Width="200" StrokeThickness="6" Stroke="{DynamicResource Borde}"><Ellipse.Clip><RectangleGeometry x:Name="c8"  Rect="170,28,0,0"/></Ellipse.Clip></Ellipse>
  37.          </Canvas>
  38.    </Grid>
  39. </Window>