Silverlight ve VideoBrush Kullanımı

XiLoNeN · 26-05-2008, 19:11

Dünkü Silverlight ve MediaElement örneğimize VideoBrush ile devam edeceğiz. İlk olarak MediaElement nesnemizi biraz daha ufaltarak yansıma için ekranda yer açalım. Sonrasında da MediaElement'imize bir isim vereceğiz.

HTML-Kodu:

 <MediaElement x:Name="Goruntu" Source="Bear.wmv" MouseLeftButtonDown="VideoTiklandi" Width="384" Height="288" Stretch="Fill" Canvas.Left="8" Canvas.Top="8"/>

Yukarıdaki biri x:Name diyerek herhangi bir elemente isim verme şansımız var. Bu işlemi Expression Blend 2 içerisinde görsel arayüzden de yapabiliriz.

MediaElement'imize isim veriyoruz.

Verdiğimiz bu isim ileride bir VideoBrush tanımlarken çok işimize yarayacak. Şimdi gelin videonun yansımasını gösterecek olan, ekranda taşıyacak olan nesnemizi belirleyelim. Bunun için basit bir dikdörtgen (rectangle) kullanacağız. Rectangle nesnesini Expression Blend 2 içerisinde solda araç çubuğunda bulabilirsiniz. Dikdörtgenin bir yansımayı temsil edebilmesi için perspektifi ile oynamanın yanı sıra dikdörtgene bir de OpacityMask uygulayacağız.

Dikdörtgenimize uyguladığımız perspektif ve yansıma efektleri.

Yukarıdaki ekran görüntülerinde de görebileceğiniz üzere ilk olarak dikdörtgenin Y ekseninde yansımasını alıyoruz sonrasında da perspektif veriyoruz. Son olarak da sıra geldi bir OpacityMask uygulamaya. Böylece yansıma görünür durumdan başlayarak şeffaflığa doğru kaybolacak.

OpacityMask ayarlarımızı yapıyoruz.

Dikdörtgeni Expression Blend 2 içerisinde seçtikten sonra sağ sütundan Properties sayfasında OpacityMask'ı seçiyoruz. OpacityMask olarak uygulamak üzere bir Gradient seçerek gradient renklerinden birinin Alpha değerini sıfır yaparak şeffaftan görünürlülüğe doğru giden bir efekt yaratıyoruz. Efektin yönünü ayarlamak için Expression Blend 2'nin sol araç çubuğundan Brush Transform aracını kullanabilirsiniz.
Tüm bunları tamamladığımızda dikdörtgenimizin XAML kodu aşağıdaki şekilde sonlanıyor.

HTML-Kodu:

 <Rectangle Width="380.569" Height="70" Canvas.Top="297" RenderTransformOrigin="0.5,0.5" Canvas.Left="-25" Opacity="0.8">
     <Rectangle.RenderTransform>
       <TransformGroup>
         <ScaleTransform ScaleX="1" ScaleY="-1"/>
         <SkewTransform AngleX="23.963" AngleY="0"/>
         <RotateTransform Angle="0"/>
         <TranslateTransform X="51.527" Y="0"/>
       </TransformGroup>
     </Rectangle.RenderTransform>
     <Rectangle.OpacityMask>
       <LinearGradientBrush EndPoint="0.514,0.957" StartPoint="0.507,0.129">
       <GradientStop Color="#00000000" Offset="0"/>
       <GradientStop Color="#FFFFFFFF" Offset="1"/>
     </LinearGradientBrush>
     </Rectangle.OpacityMask>
   </Rectangle>

Tüm ayarlarımızı tamamladığımıza göre sıra geldi bir VisualBrush tanımlayarak dikdörtgenini içini bu VisualBrush ile doldurmaya. Bu işlemleri direk XAML kodları yazarak yapacağız. Aşağıda bir VisualBrush'ın nasıl tanımlandığını inceleyelim.

HTML-Kodu:

      <VideoBrush SourceName="Goruntu" />

Hiç zor bir kod sayılmaz. Tek yapmamız gereken hedef video kontrolünün adını SourceName özelliğine aktarmış olmak. Tanımladığımız bu VideoBrush'ı dikdörtgenin Fill değerine atayacağız. XAML sayfamızın tamamının son hali aşağıdaki şekilde sonlanıyor.

HTML-Kodu:

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="435" Height="382"
   Background="White"
   x:Name="Page"
   >
   <MediaElement x:Name="Goruntu" Source="Bear.wmv" MouseLeftButtonDown="VideoTiklandi" Width="384" Height="288" Stretch="Fill" Canvas.Left="8" Canvas.Top="8"/>
   <Rectangle Width="380.569" Height="70" Canvas.Top="297" RenderTransformOrigin="0.5,0.5" Canvas.Left="-25" Opacity="0.8">
     <Rectangle.Fill>
       <VideoBrush  SourceName="Goruntu" />
     </Rectangle.Fill>
     <Rectangle.RenderTransform>
       <TransformGroup>
         <ScaleTransform ScaleX="1" ScaleY="-1"/>
         <SkewTransform AngleX="23.963" AngleY="0"/>
         <RotateTransform Angle="0"/>
         <TranslateTransform X="51.527" Y="0"/>
       </TransformGroup>
     </Rectangle.RenderTransform>
     <Rectangle.OpacityMask>
       <LinearGradientBrush EndPoint="0.514,0.957" StartPoint="0.507,0.129">
       <GradientStop Color="#00000000" Offset="0"/>
       <GradientStop Color="#FFFFFFFF" Offset="1"/>
     </LinearGradientBrush>
     </Rectangle.OpacityMask>
   </Rectangle>
 </Canvas>

VisualBrush ile yarattığımız video yansıması.

Bu yazımızda da VideoBrush tanımlamayı, nesnelere isim vermeyi, dikdörtgen nesnelerini ve transform işlemlerinin bir kısmını inceledik. Silverlight ile videoların yansımalarını almak bu kadar kolay. Bu yansımaların herhangi bir performans alanında dezavantajı yok.
Biz örneğimizde tanımlamış olduğumuz VisualBrush'ı bir Rectangle'a ait Fill özelliğine aktardık. İsterseniz VisualBrush'ları aşağıdaki şekilde istediğiniz yere aktarabilirsiniz.

HTML-Kodu:

  <TextBlock Width="244" Height="84" Canvas.Top="300" FontSize="72" FontWeight="Bold" Text="TextBlock" TextWrapping="Wrap">
     <TextBlock.Foreground>
       <VideoBrush SourceName="Goruntu" />
     </TextBlock.Foreground>
   </TextBlock>

Bu örnekte sayfaya yerleştirdiğimiz bir TextBlock nesnesinin ForeGround özelliğine VisualBrush tanımladık. Böylece TextBlock içerisinde yazan yazıların içinde videomuz oynatılacak.

Yazının içerisinde video yerleştiriyoruz.

Tüm bu video işlemleri çok kolaylıkla sadece birkaç satır kod ile en ufak bir performans kaybı olmaksızın yapılabilir. Gerisi tamamen sizin hayal gücünüze kalmış.
Hepinize kolay gelsin.

Kaynak: [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

SEDAM · 26-05-2008, 21:11

emegine saglik cok guzel

Silverlight ve VideoBrush Kullanımı

Silverlight, Expression, LinQ, Ajax, JavaScript