İpinUcu ~ 68 – WPF & Silverlight Animasyon Örnekleri 4

WPF Unsleashed kitabında gördüğüm ve hoş bir button animasyon örneğini paylaşmak istiyorum. Boyutlarla yapılabilecek animasyonlar için ufuk açacak türden bir örnek :]

 <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX"
To="2" Duration="0:0:0.25"/>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
To="2" Duration="0:0:0.25"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX"
To="1" Duration="0:0:0.25"/>

                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
To="1" Duration="0:0:0.25"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>

Button için Style ve Trigger’larımızı tanımladıktan sonra bir StackPanel içerisinde düğmelerimizi aşağıdaki gibi tanımlıyoruz:

<StackPanel Orientation=”Horizontal”>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
<Button>5</Button>
<Button>6</Button>
<Button>7</Button>
<Button>8</Button>
</StackPanel>

Ekran görüntüsü aşağıdaki gibi olacaktır:
wpf animation

Reklamlar

İpinUcu ~ 45 – WPF’te Style Nedir, Nasıl Kullanılır?

WPF’te Style işi, aynı Web sayfalarındaki CSS’leri hakim olup sokak ağzıyla “king olma” meselesi gibidir. Wpf için diyebiliriz ki Sitillere ne kadar hakim olursanız, o kadar özel ve güzel bir arayüzünüz olur. Renk uyumları \ geçişleri, hiç beklemediğiniz nesnelerin hiç beklemediğiniz nesnelere dönüşümü, özelleştirilmesi gibi hayal gücü sınırıdında seçenekleriniz olur. Basit ve anlaşabilir olması dileğiyle:

WPF’te Sitil, biraz önce de bahsettiğimiz gibi Web’teki CSS’nin hemen hemen aynısıdır. Elbette CSS’e göre bazı artı ve eksileri vardır ama kesinlikle ve kesinlikle tam anlamıyla C# ve VB.NET’le entegredir. Aşağıdaki basit tanımlamayla başlayalım:

<Style x:Key=”aa”>

</Style>

<Style> anlaşılabileceği üzere tanımlamanın Sitil olduğu anlamına geliyor. x:Key tanımlamasıysa bu Sitili kullanırken çağıracağımız ismi temsil ediyor. (Normalde WPF’te nesneler x:Name ile temsil edilir. Sitiller için x:Key’dir.)

Sitil etiketleri arasında <Setter> etiketleriyle istenen nesnenin özelliklerine istenen değerler atanır. Örneği inceleyerek devam edelim:

<Style x:Key=”aa” TargetType=”Button”>
<Setter Property=”Background” Value=”Blue”/>
<Setter Property=”FontStyle” Value=”Italic”/>
</Style>

x:Key değerinin yanına bir de TargetType özelliğinin geldiğini görüyor. TargetType, Sitilini oluşturacağımız nesnenin bilgisini tutuyor. Hemen altındaki <Setter Property=”Background” Value=”Blue”/> kısmında Property=”Background” kısmı düğmenin arkaplanını belirlemek istediğimizi Value=”Blue” kısmıysa arkaplan rengine Blue değerini yazmak istediğimizi temsil ediyor. Aynı şekilde FontStyle ve Italic’te yazının eğik olacağına karar veriyor.  Elbette biz Button ve bu özelliklerle sınırlı değiliz. TargetType kısmına istediğiniz nesneyi yazıp, Setter’lar içerisinde de istediğiniz özelliğe istediğiniz değeri atayabilirsiniz.

Aşağıdaki yazıyı da Sitillerle ilgilidir. Yararlı olacağına inanıyorum:

İpinUcu ~ 44 – WPF’te Style Kullanım Türleri

 

İpinUcu ~ 44 – WPF’te Style Kullanım Türleri

WPF’te Style’ların farklı farklı kullanım yöntemleri vardır:

1.) Resource Dictionary oluşturup tasarıya eklemek:

Tasarı (proje) üzerinde sağ tıklayın, Add, Resource Dictionary, Bir isim girin (ben başına rd koymayı tercih ediyorum). Oluşturduğumuz kaynak dosyayı her User Control ya da Window’da kullanabilmemiz için App.xaml doyasına geçip aşağıdaki gibi bir tanımlama yapıyoruz:

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source=”rdNesneler.xaml” />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

Source özelliğine tanımladığımız rdNesneler.xaml kaynak dosyası istediğimiz her Window ve User Control’de kullanabileceğimiz Style’ları tutacak. Bu xaml’ın içinde oluşturduğumuz her Style dosyasını (Elbette x:key değeri olmak zorunda) her yerde kullanabiliriz.

2.) Window ya da UserControl içerisinde oluşturup kullanmak:

Resource Dictionary gibi bu yöntem de her yerde kullanıma açıktır. RD’den farkı yalnızca oluşturulduğu sınıf içerisinde çağırılabilmesidir. Örneğin aşağıdaki gibi bir Button Sitilimiz olsun:

<Window.Resources>
<Style x:Key=”dugmeSitili” TargetType=”Button”>
<Setter Property=”Background” Value=”WhiteSmoke” />
<Setter Property=”FontStyle” Value=”Italic” />
<Setter Property=”Padding” Value=”8,4″ />
<Setter Property=”Margin” Value=”4″ />
<Setter Property=”FontFamily” Value=”Trebuchet MS”/>
</Style>
</Window.Resources>

<Grid>
<Button Style=”{StaticResource dugmeSitili}” Content=”Mehmet KAPLAN” Margin=”61,182,227,52″ />
<Button Style=”{StaticResource dugmeSitili}” Content=”Mehmet KAPLAN” Margin=”71,96,239,135″ />
</Grid>

Görüldüğü gibi Sitil özelliklerimiz Application.Resource yerine Window.Resource altında tanımlandı. Bu yüzden yalnızca bu Window altında çalışacaktır. Diğer önemli bir noktaysa her iki düğme için de aynı Sitil tanımlamasının yapılmış olmasıdır. Eğer istersek bu penceredeki tüm düğmeler için tek bir kere tanımlama yaparak da Sitil belirleyelebiliriz. Aşağıdaki XAML’ı inceleyelim:

<Window.Resources>
<Style TargetType=”Button”>
<Setter Property=”Control.Background” Value=”Blue”/>
<Setter Property=”Control.FontStyle” Value=”Italic”/>
</Style>
</Window.Resources>
<Grid>
<Button Content=”Mehmet KAPLAN” Margin=”61,182,227,52″ />
<Button  Content=”Mehmet KAPLAN” Margin=”71,96,239,135″ />
</Grid>

Kodlardan da anlaşılabileceği gibi Window.Resources altında bir kere tanımlanan Sitil, düğmelerde tek tek belirtilmeden uygulanmıştır. Bunun nedeni TargetType özelliğine Button değerinin atanmış olmasıdır. Aynı durum tüm diğer nesneler için de söz konusudur.

Haydi kolay gelsin.

%d blogcu bunu beğendi: