İ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 DXSplashScreen (Yükleniyor Ekranı)

Silverlight DevExpress DXSplashScreen (Yükleniyor Ekranı), loading panel de dediğimiz, Silverlight’ın varsayılan yükleniyor ekranını değiştirmemize yarıyor. Aslında bunun için bir yazı yazma gereği duymamın amacı, böyle bir nesnenin var olduğunun bilinmesini sağlamak. Bunun dışında kullanımıyla ilgili zaten fazla bir bilgiye gerek yok. Aşağıdaki bağlantıda DevExpress zaten söyleyeceğini söylemiş:

How to: Add DXSplashScreen to Your Project

Bu işlemi yaptıktan sonra özelleştirme yoluna gidebilir, Initializing controls… kısmını “Bileşenler yükleniyor” olarak değiştirebiliriz. Bir de çerçevenin içinde dönen açık mavi şeridin rengini değiştirip hoş beş yapabiliriz =] Bunun için XAML kısmındaki İkinci Path’in Fill’ini değiştirmek yeterli oalcaktır.

Ayrıca internetten başka yükleniyor ekranları bulabilir ya da kendiniz yazabilirsiniz:

http://pagebrooks.com/archive/2009/02/19/custom-loading-screens-in-silverlight.aspx

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("https://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("https://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

 

 

Silverlight DevExpress GroupBox Kullanımı

Silverlight DevExpress GroupBox Kullanımı gaayet basit. Groupbox ile ilgili bilinmesi gereken küçük ama güzel birkaç ayrıntı var. Bakalım:

<dxlc:GroupBox Header=”Mehmet KAPLAN”  />

GroupBox’ı tanımladık. Header kısmını kullanmak istemeyebilirsiniz idiye TitleVisibilty özelliğine bakabilirsiniz:

<dxlc:GroupBox Header=”Mehmet KAPLAN”  TitleVisibility=”Collapsed” ShowShadow=”Always” />

Uğraşmayayım ama hoş olsun isterseniz kendi üzerinde gölge efekti mevcut. Örneğin:

<dxlc:GroupBox Header=”Mehmet KAPLAN”  TitleVisibility=”Visible” ShowShadow=”Always” />

Burada gölge efekti her zaman görünür durumda olacaktır. Eğer WhenHasMouse’u seçerseniz, yalnızca Groupbox’ın içindeyken gölgeleri görürsünüz. Son olarak kenarlarıyla oynayalım, renklerini değiştirelim ve basit bir güzellik katalım:

<dxlc:GroupBox Header=”     Mehmet KAPLAN” ShowShadow=”WhenHasMouse” CornerRadius=”60″ ShadowOffset=”6″ TitleVisibility=”Visible” SeparatorBrush=”White” TitleBackground=”#FF6F8BDE” Foreground=”White” />

SepereatorBrush, Header’ın arkaplanının bittiği yerdeki kısa bölümdür. Titlebackground da Header ın arkaplanıdır.

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

Daha fazlası için DevExpress’in örneklerine bakınız:

http://documentation.devexpress.com/#WPF/CustomDocument8359

Haydi kolay gelsin.

Silverlight TextBlock Kullanımı (Wrap, LineBreak)

Silverlight TextBlock Kullanımı (Wrap, LineBreak) konusu eğer Expression Blend kullanmıyorsanız biraz sıkıntı yaratır cinsten olabiliyor. Direk örneğe geçelim:

<TextBlock FontFamily=”Verdana” FontSize=”16″TextWrapping=”NoWrap”>

Burada TextWrapping özelliği NoWrap olarak ayarlanmış. Bunu Wrap olarak değiştirdiğimizde metinler otomatik aşağı kayacaktır. Eğer Wrap olayına hiç girmeden XAML tarafında ya da kod tarafında (code behing) tarafında yapmak da mümkün. Ama bunu yapmak için biraz alışageldik yöntemlerin dışına çıkmak gerekiyor. Örnek:

XAML

<TextBlock >

</TextBlock.Foreground>

<Run Text=”Mehmet KAPLAN”/><LineBreak/><Run Text=” Mehmet KAPLAN/></TextBlock>

</TextBlock>

XAML tarafında kullanmak için  kısaca <LineBreak/> i bilmeliyiz.

C#

txtBlock.Text = string.Format(“Mehmet {0} KAPLAN”, Environment.NewLine);

Haydi kolay gelsin.

Silverlight & WPF & Expression Blend Eğitimi

Lynda.Com  adresinde Getting with Expression Blend adlı açıklayıcı ve İngilizce bilmeyi gerektirmeyen ücretsiz bir görsel ders seti var. Konuyla ilgili ders \ içerik arayanların başvurması gereken kaynaklardan birisi diye düşünüyorum. Aşağıdaki bağlantıdan dersleri izleyebilirsiniz:

Silverlight & WPF & Expression Blend Eğitimi

Silverlight’ta AutoCompleteBox Kullanımı

Silverlight’ta AutoCompleteBox Kullanımı için DotNetSpark’ta  Dhananjay Kumar‘ın yazdığı yazdığı anlaşılır makaleyi ele alalım:

Country isimli bir sınıf ekliyoruz:

Sınıfın içini dolduruyoruz:

ToolBox’tan AutoCompleteBox’ı ekliyoruz:

AutoCompleteBox’ı Sınıfımıza bağlıyoruz:

DataTemplate’ine TextBlock ekliyoruz ve sınıfa bağlıyoruz:

Elbette açılışta verileri alması için:

Kaynak: http://www.dotnetspark.com/kb/3786-autocompletebox-silverlight-40.aspx

WPF için AutoCpmpleteBox’a göz atabilirsiniz:

https://mehmetkaplan.wordpress.com/2010/11/08/ipinucu-28-wpf-otomatik-tamamlanan-textbox-autocompletebox/

%d blogcu bunu beğendi: