İpinUcu ~ 99 – WPF’te Kayan Yazı Animasyonu (marquee – scroll text)

Nedendir bilmem halen güzeller güzeli WPF’in animasyon olanaklarına alışamadık, ısınamadık ve bununla ilgili var denecek kadar bile kaynak oluşturamadık. Neyse ki dünyanın bir yerlerinde insanlar halen yaptıkça paylaşıyorlar :)

Doğrudan kayan yazı için XAML’a bakıyoruz:

<StackPanel Orientation=”Horizontal” Margin=”0,0,0,0″>

    <StackPanel.RenderTransform>
        <TranslateTransform x:Name="transferText" X="-40"/>
    </StackPanel.RenderTransform>
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation From="0" To="-900" Duration="00:00:10"
                      Storyboard.TargetProperty="X"
                      Storyboard.TargetName="transferText"
                      RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>
    <TextBlock FontSize="25"  x:Name="txtKron" Margin="10,0,7,0"/>
</StackPanel>

Böylece StackPanel içinde yer alan TextBlock ve daha niceleri kayıp gidecektir :)

Bu animasyon bir kenarda dursun. Şimdi bu kaydırma işlemi sırasında diyelim ki yazının bir kısmı kayboldu ve kaybolan kısım arkasından çıkıp gelsin istiyoruz. Yani Nokia’nın meşhur kara yılanı gibi :)

Buyrun:

XAML

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication9"
        Title="MainWindow" Height="83" Width="222" Name="UI" Tag="Tol Level">
    <StackPanel Orientation="Horizontal" x:Name="stack">
        <StackPanel.Resources>
            <local:NegatingConverter x:Key="NegatingConverter" />
            <Storyboard x:Key="slide">
                <DoubleAnimation From="0" To="{Binding Width, ElementName=canvas, Converter={StaticResource NegatingConverter}}" Duration="00:00:10"
                      Storyboard.TargetProperty="X"
                      Storyboard.TargetName="transferCurreny"
                      RepeatBehavior="Forever"/>
            </Storyboard>
        </StackPanel.Resources>
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="transferCurreny" X="0"/>
        </StackPanel.RenderTransform>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="StackPanel.SizeChanged">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
        </StackPanel.Triggers>
        <Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}">
            <TextBlock Text="StackOverflow" FontSize="25"  x:Name="txtKron" Canvas.Left="0"/>
            <TextBlock Text="{Binding Text, ElementName=txtKron}" FontSize="25" Canvas.Left="{Binding Width, ElementName=canvas}"/>
        </Canvas>
    </StackPanel>
</Window>

C#

public class NegatingConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is double)
            {
                return -((double)value);
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is double)
            {
                return +(double)value;
            }
            return value;
        }
    }

Lütfen c# kodlarını namespace’in altında tutunuz. Sınıfın altında oluşturursanız olmayacaktır.

Yılan örneği için teşekkürler; http://stackoverflow.com/questions/15323163/wpf-marquee-text-animation

Kolaylıklar diliyorum.

ASP.NET Animasyonlu Pop-up Örneği

Google’dan söz konusu konuyla ilgili olarak sürekli arama yapıldığını görünce ben de merak edip araştırayım dedim ve güzel bir örnek buldum. Aşağıda popup nesnesinin boyut, renk, yerleşim özellikleri baz alınarak yapılmış basit ve iştah açıcı bir örneği var.

http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/Animation/Animation.aspx

İpinUcu ~ 98 – WPF & Silverlight Animasyon Örnekleri 7

WPF ve Silverlight Animasyon Örneklerine bir katkı da Mike Hilberg’den geldi! Storyboard’un kullanımını anlamak adına yararlı olabileceğine inandığım, güzel bir animasyon örneği:

A Custom Storyboard Component in XAML

İpinUcu ~ 84 – WPF & Silverlight Animasyon Örnekleri 6

WPF & Silverlight Animasyon Örnekleri’ne altıncı yazımızla devam ediyoruz. Duyurular, kayan yazılar vs türünden pek güzel bir örnek. Yazan abimiz de Antoni DOL.

Örneği kendi sitesinden alıp değerlendirmenizi öneriyorum:

http://antonidol.wordpress.com/2010/05/07/quotefloat-animating-textblock-planeprojections-for-a-spiraling-effect-in-silverlight/

Burada elbette birkaç ufak değişiklikle daha hoş gözükmesini sağlayabiliriz. Örneğin konuşma simgesi olan Clip’i silersek, animasyon daha çok önplana çıkacaktır. Yazı rengine de bir el atmak gerekebilir.

Haydi kolay gelsin.

Silverlight DevExpress Book Nesnesi

Silverlight DevExpress Book Nesnesi, hiç şüphesiz iyi tasarlandığında mükemmel bir araç. Örneğimizin ana temeli Devexpress’in how to makalelerinden geliyor. O yüzden önce oraya bakabilirsiniz: How to: Create the DXBook Control

Upuzuun bir XAML’ımız olduğundan ben işin o boyutlarına girmeden, direk TextBlock ve Image nesnelerini sürekli değişecek şekilde ayarladıktan sonra Border’ları değiştirip kullanmaya başladım. O yüzden işin sadece o  kısmına girecek ve projeyi .ZIP olarak göndereceğim. Söz konusu kısım:

  <StackPanel Orientation="Vertical">
           <Border Background="#FF6F8BDE" Height="20">
           <TextBlock Foreground="White" Text="{Binding header1}" />
            </Border>
            <TextBlock x:Name="txt1" FontSize="16" Text="{Binding baslik}" FontFamily="Tahoma" 
HorizontalAlignment="Left" Margin="4">
               <TextBlock.Triggers>
                   <EventTrigger RoutedEvent="Canvas.Loaded">
                       <BeginStoryboard>
                           <Storyboard>
                               <DoubleAnimation Storyboard.TargetName="txt1" Storyboard.TargetProperty="Opacity" 
RepeatBehavior="Forever" From="1" To="0" Duration="0:0:1" AutoReverse="True" />
                           </Storyboard>
                       </BeginStoryboard>

                   </EventTrigger>
               </TextBlock.Triggers>
                 <TextBlock.Foreground>
                             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="White" Offset="0" />
                            <GradientStop Color="#FF4493D4" Offset="1" />
                            <GradientStop Color="#FF3076AA" Offset="0.738" />
                        </LinearGradientBrush>
                 </TextBlock.Foreground>

                    <TextBlock.Effect>
                   <DropShadowEffect Color="#FFADBFF5" Direction="280" BlurRadius="9" />
                </TextBlock.Effect></TextBlock>

                        <Image x:Name="imgmr" Source="{Binding img1}"/>
</StackPanel>

Burada kodlar kısaca şöyle: mavi bir borderın içinde bir textblock var ve header1 adında bir değişkene bağlı. Aynı şekilde bir başka TextBlock daha var ve o da baslik değişkenine bağlı. imgmr isimli image nesnesi de img1’e bağlı. Arka taraftaki bağlantı şöyle olmalı:

  public class BookSource
        {
            public string header1 { get; set; }
            public string baslik { get; set; }
            public ImageSource img1 { get; set; }
        }
 List<BookSource> _bookSC = new List<BookSource>();
         
          _bookSC.Add(new BookSource()
          {
          header1="Mehmet KAPLAN",
          baslik="Yanar döner",
          img1 = new BitmapImage(new Uri("http://mehmetkaplan.files.wordpress.com/2010/07/mehmet-kaplan.jpg", UriKind.Absolute))
          });

          _bookSC.Add(new BookSource()
          {
              header1 = "Mehmet KAPLANN",
              baslik = "Uçar kaçar",
              img1 = new BitmapImage(new Uri("http://mehmetkaplan.files.wordpress.com/2010/07/img_1571.jpg", UriKind.Absolute))
          });

          _bookSC.Add(new BookSource()
          {
              header1 = "Suuper Mario",
              baslik = "Kaçar Uçar",
             img1 = new BitmapImage(new Uri("http://www.oyun-34.com/site_media/game_screenshots/super_mario_1.jpg", UriKind.Absolute))
          });

          book.DataSource = _bookSC ;

Tüm bunların ekran görüntüsü aşağıdaki gibi olacaktır:

Projenin kaynak kodları:

http://www.2shared.com/file/KudrpJUZ/DevExpress_Silverlight_Book_Co.html

 

 

İpinUcu ~ 75 – WPF & Silverlight Animasyon Örnekleri 5

MSDN’in Code Samples Galery‘sinde karşılaştığım bir örnek ve bu örnek üzerinde yapılacak ufak bir değişiklikle animasyon örnekleri dizisine devam ediyoruz.

Söz konusu örnek bir resim galerisi. Dört resim sağdan sola doğru silinerek gidiyor. Örneğe aşağıdaki bağlantıdan erişebilirsiniz:

http://code.msdn.microsoft.com/CSWPFAnimatedImage-489e93e7

Örneği indirip çalıştırdıktan sonra, fotoğrafların sağdan sola, soldan sağa aktığını göreceksiniz. Biz de bunu yukarıdan aşağıya, aşağıdan yukarıya kayacak şekilde ayarlayacağız. Bunun için aşağıdaki XAML kodunda ufak bir değişiklik yapmamız gerekecek:

<LinearGradientBrush StartPoint=”0,0″ EndPoint=”1,0″>

Geçiş için kullanacağım bu XAML kodu, sağdan sola, soldan sağa geçiş yapıyor. Yani indireceğin tasarının içindeki söz konusu kod satırı da bu şekilde gelecek. Biz EndPoint özelliğine 0,1 değerini girersek, yukarıdan aşağıya şeklinde geçiş sağlayabiliriz.

Haydi kolay gelsin.

İ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

İpinUcu ~ 67 – WPF & Silverlight Animasyon Örnekleri 3

Silverlight.Net’teki küçük ve basit örnekler yol göstericimiz olacaktır. Elbette tüm bunları Expression Blend ile yapmak çok daha rahat çalışmamızı sağlayacak :] : http://silverlight.net/learn/quickstarts/animations/

Diğer örnekler:

http://mehmetkaplan.wordpress.com/2010/11/30/wpf-animasyon-ornekleri-double-animation-examples/

http://mehmetkaplan.wordpress.com/2010/12/10/wpf-%E2%80%93-animasyon-ornekleri-2-double-animation-examples/

 

WPF – Animasyon Örnekleri 2 (Double Animation Examples)

WPF – Animasyon Örnekleri’ne şu bağlantıdaki animasyondan sonra sağdan soldan açılarak gelen bir GridView örneğiyle devam ediyoruz:

XAML

<dg:DataGrid  Name=”gridDhcp”  Focusable=”True” IsReadOnly=”True” Visibility=”Visible” Height=”Auto”>
<dg:DataGrid.Triggers>
<EventTrigger RoutedEvent=”Window.Loaded”>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName=”gridDhcp” Storyboard.TargetProperty=”Width” From=”1″ To=”1020″ Duration=”0:0:1″/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</dg:DataGrid.Triggers>

Örnek animasyonda, gridDhcp adlı gridview, Window.Loaded olayı gerçekleştiğinde, 1 saniyelik bir süre içinde 0’ndan 1020’e çıkarak, yani çiçek gibi açılarak (:)) görünecektir. Elbette bu süreyi değiştirebilirsiniz.

WPF – Animasyon Örnekleri (Double Animation Examples)

WPF’te animasyon işlemlerine kendini kaptıran, bir daha yolunu bulamıyor. Bu kervana ben de katıldım ve yaptıkça paylaşayım dedim. Bir TextBlock’un yanıp sönmesini sağlayacağız. 2 saniye içerisinde Opacity değerleri değişecek demek daha doğru olur. Örneği inceleyelim:

<TextBlock x:Name=”tBlock” Text=”Mehmet KAPLAN” FontFamily=”Tahoma” Height=”26″  Width=”161″ >
<TextBlock.Triggers>
<EventTrigger RoutedEvent=”TextBlock.Loaded”>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName=”tBlock”
Storyboard.TargetProperty=”Opacity” RepeatBehavior=”Forever”
From=”1″ To=”0″ Duration=”0:0:1″ AutoReverse=”True”/>
</Storyboard>
</BeginStoryboard>

</EventTrigger>
</TextBlock.Triggers>

İşleyiş basit: tBlock adlı TextBlock, her iki saniyede bir Opacity değerini 1’den 0’a doğru değiştiriyor ve bu program açık kaldığı sürece devam ediyor. Bunu sağlayan da RepeatBehavior=”Forever”.

Haydi kolay gelsin.

Takip Et

Her yeni yazı için posta kutunuza gönderim alın.

Diğer 393 takipçiye katılın

%d blogcu bunu beğendi: