[ anakin14 @ 19.04.2011. 15:08 ] @
posto nema dobrih tutorijala za WPF, a skoro sam otkrio njegove mogucnosti i resio da predjem na to okruzenje, resih da otvorim temu o njemu. @Shadowed - za sve si ti kriv! posto si mi u onoj drugoj temi ukazao da ono sto zelim lakse mogu postici u WPF-u @wex-alpha je u temi http://www.elitesecurity.org/t401512 dao mali primer koje su prednosti GUI-a u WPF_u i cak je ostavio source. pokusacu da razradim ono sto sam provalio, i da postavim neka pitanja ali pocecu od samog pocetka da bi i korisnici koje interesuje da nauce xaml mogli da prate. dakle, kada startujemo novu WPF aplikaciju dobicemo prozor. i XAML izgleda ovako. Code: <Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" > <Grid> </Grid> </Window> ovo nam daje prozor sa gridom - a grid nam je neophodan da bi stavljali ostale kontrole u njega preuredicemo malo prozor: Code: <Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" WindowStyle="None" AllowsTransparency = "True" WindowStartupLocation="CenterScreen"> <Grid> </Grid> <Window.Background> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="Black" Offset="0" /> <GradientStop Color="White" Offset="1" /> <GradientStop Color="#CCAA2323" Offset="0" /> <GradientStop Color="#9AD14E4E" Offset="0.535" /> </LinearGradientBrush> </Window.Background> </Window> dodacemo jedno dugme: kontrole se dodaju unutar grida pa samim tim i unutar grid taga. Code: <Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" WindowStyle="None" AllowsTransparency = "True" WindowStartupLocation="CenterScreen"> <Grid> <Button Height="48" Margin="176,158,0,0" Name="button3" VerticalAlignment="Top" HorizontalAlignment="Left" Width="170"> dugme </Button> </Grid> <Window.Background> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="Black" Offset="0" /> <GradientStop Color="White" Offset="1" /> <GradientStop Color="#CCAA2323" Offset="0" /> <GradientStop Color="#9AD14E4E" Offset="0.535" /> </LinearGradientBrush> </Window.Background> </Window> e sada, da bi dodali animaciju, koristio sam source iz programa koji je postavio korisnik @wex-alpha ono sto nam je potrebno da postavimo jesu 1) resources - pretpostavljam da odredjuju kako ce se animacija izvrsiti 2) triggers - okidaci animacije - govore kada ce se animacija izvrsiti 3) i moramo dodati parce koda u tag kontrole koju zelimo animirati tako da ce button tag sada izgledati: Code: <Button Height="48" Margin="176,158,0,0" Name="button3" VerticalAlignment="Top" HorizontalAlignment="Left" Width="170" RenderTransformOrigin="0.5,0.5"> <Button.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Button.RenderTransform> <Button.Effect> <DropShadowEffect/> </Button.Effect> Dugme </Button> resoursec moramo staviti na prvo mesto , pre grid taga i pre trigger taga i otvara se sa </window.resources> tagom. ovo je iskopirano iz sourca aplikacije koju sam pomenuo Code: <window.resources> <Storyboard x:Key="DugmeEnter"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.133"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.435"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="5"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="-5"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="DugmeEnter_leave"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> a okidac ce izgledati ovako: Code: <Window.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource startwindow}"/> </EventTrigger> <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="button3"> <BeginStoryboard x:Name="DugmeEnter_BeginStoryboard" Storyboard="{StaticResource DugmeEnter}"/> </EventTrigger> <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="button3"> <BeginStoryboard x:Name="DugmeEnter_leave_BeginStoryboard" Storyboard="{StaticResource DugmeEnter_leave}"/> </EventTrigger> </Window.Triggers> Veoma je vazno da redom idu <window>, <resources> , <triggers> pa teko onda <grid> i kontrole. kompletan kod izgleda ovako: Code: <Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" WindowStyle="None" AllowsTransparency="True" WindowStartupLocation="CenterScreen"> <Window.Resources> <Storyboard x:Key="startwindow"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="1.213"/> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="1.391"/> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="8"/> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="-4.5"/> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="DugmeEnter"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.133"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.435"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="5"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="-5"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="DugmeEnter_leave"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource startwindow}"/> </EventTrigger> <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="button3"> <BeginStoryboard x:Name="DugmeEnter_BeginStoryboard" Storyboard="{StaticResource DugmeEnter}"/> </EventTrigger> <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="button3"> <BeginStoryboard x:Name="DugmeEnter_leave_BeginStoryboard" Storyboard="{StaticResource DugmeEnter_leave}"/> </EventTrigger> </Window.Triggers> <Grid> <Button Height="48" Margin="176,158,0,0" Name="button3" VerticalAlignment="Top" HorizontalAlignment="Left" Width="170" RenderTransformOrigin="0.5,0.5"> <Button.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Button.RenderTransform> <Button.Effect> <DropShadowEffect/> </Button.Effect> Dugme </Button> </Grid> <Window.Background> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="Black" Offset="0" /> <GradientStop Color="White" Offset="1" /> <GradientStop Color="#CCAA2323" Offset="0" /> <GradientStop Color="#9AD14E4E" Offset="0.535" /> </LinearGradientBrush> </Window.Background> </Window> Ovo sam napisao da bi na ovom primeru razradjivali (naravno ko je zainteresovan da pomogne) primere animacija koje mozemo postici sa jednom kontrolom Evo za pocetak: Prvo pitanje je da li je ovaj program radjen u WPF-u? http://www.lidder.nd.rs/images/movies/VPKalk_.swf kako da dobijem animaciju dugmeta kao u njihovom slucaju? |