Silverlight ve VideoBrush Kullanımı

0 dakikada yazıldı

7463 defa okundu

Düzenle

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.

  <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.
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.
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.
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.

  <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.

      <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.

<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ı.
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.

  <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.
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.