@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.
<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:
<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.
<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:
<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
<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:
<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:
<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?