Ana içeriğe atla

WPF – TV Uygulaması

Windows Presentation Foundation (WPF) geçtiğimiz günlerde Visual Studio 2010 ve .Net Framework 4.0 'ın çıkışı ile 4.0 sürümüne geçiş yapmıştır. Gelen yenilikleri, iyileştirilmeleri ve diğer detaylı ilerleyen zamanlarda inceliyor olacağız. Ancak daha önceden başlamış olduğumuz ve WPF teknoloji içerisinde yer alan kontrolleri detaylı olarak ne iş yaptıklarını ve nasıl kullanılabileceklerini incelediğimiz çalışmalar yaptığımız yazılarımıza devam ediyor olacağız.

WPF yaygınlaştıkça ve daha önceden hazırlanan windows form uygulamaları WPF uygulama yapısına taşınma vakalarını çok daha sık bir şekilde rastlar olduk. WPF 'in bize sağladığı kolaylıkları ve olanakları yazılarımızda parça parça değinmeye çalışıyoruz. Bu sefer ise daha önceden incelemiş olduğumuz MediaElement i kullanarak televizyon görünümlü bir video oynatıcıyı nasıl hazırlayabileceğimizi incelemeye çalışıyor olacağız.

Programcılık teknikleri ve yeterlilikleri ile video oynatmak istediğimizde kullanabileceğimiz başlıca teknolojiler WPF, Silverlight, MediaPlayer API ve flash olarak başlıcaları sıralanmaktadır. Bahsetmiş olduğumuz teknolojilerden özellikle Silverlight ve WPF yardımı ile ise rahatlıkla yüksek kalitedeki videoları izleyebilir, yüksek çözünürlükteki videoları bilgisayarı ve internet bant genişliğinizi zorlamadan rahatlıkla görüntüleyebilirsiniz. Özellikle de yüksek çözünürlüklü videoların saniyede 60 kare gösterdiğini düşünürsek bu görüntü topluluklarının kesilmeden rahatlıkla izlenebilmesi çok önemli bir faktör olarak karşımıza çıkmaktadır. Peki WPF ile videoları izleme arasındaki ilişkiyi nasıl kullanacağız. Bilgidiğiniz kadarıyla MediaElement yardımı ile çabuk ve basitçe videoların görüntülenmesi mümkün. Bu sefer ise vektörel çizimleri ve Resource dosyalarını kullanarak televizyon benzeri bir tasarım oluşturup ortasına MediaElement ekledikten sonra videoyu göstererek işlemleri tamamlamış olacağız.

Öncelikli olarak oluşturmuş olduğumuz XAML tasarıma göz atalım.

<Window x:Class="TV.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TV" Height="720" Width="720">
    <Window.Resources>
        <ControlTemplate x:Key="RadioButtonTemplate"
                  TargetType="RadioButton">
            <Grid>
                <Ellipse Width="25" Height="25" Fill="Silver" />
                <Ellipse Name="backgroundEllipse" Width="22" Height="22">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Offset="0" Color="Red"/>
                            <GradientStop Offset="1.25" Color="Black" />
                        </RadialGradientBrush>
                     </Ellipse.Fill>
                </Ellipse>
                <ContentPresenter Content="{TemplateBinding Content}" />
            </Grid>
        <ControlTemplate.Triggers>

            <Trigger Property="RadioButton.IsEnabled" Value="False">
                <Setter TargetName="backgroundEllipse" Property="Fill">
                    <Setter.Value>
                        <RadialGradientBrush>

                            <GradientStop Offset="0" Color="LightGray" />
                            <GradientStop Offset="1.25" Color="Black" />
                        </RadialGradientBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="RadioButton.IsChecked" Value="True">
                <Setter TargetName="backgroundEllipse" Property="Fill">
                    <Setter.Value>
                        <RadialGradientBrush>
                            <GradientStop Offset="0" Color="LimeGreen" />
                            <GradientStop Offset="1.25" Color="Black" />
                        </RadialGradientBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
         </ControlTemplate.Triggers>
      </ControlTemplate>
    </Window.Resources>
    <Canvas>
        <Border Canvas.Left="150" Height="370" Width="490"
                   Canvas.Top="20" Background="MediumSeaGreen">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Border Margin="0,20,0,10" Background="Gray"
                          HorizontalAlignment="Center" VerticalAlignment="Center"
                          BorderThickness="2" BorderBrush="Silver" CornerRadius="2">
                    <MediaElement Height="300" Width="400"
                            Name="videoMediaElement" Source="
c:\users\sertur\documents\visual studio 10\Projects\WPF\TV\TV\Video\Wildlife.wmv"
                            LoadedBehavior="Manual" Stretch="Fill" />
                </Border>

                <StackPanel Grid.Row="1" HorizontalAlignment="Right"
                         Orientation="Horizontal">
                    <RadioButton Name="playRadioButton" IsEnabled="False"
                                Margin="0,0,5,15" Checked="playRadioButton_Checked"
                                Template="{StaticResource RadioButtonTemplate}">
                        <Image Height="20" Width="20" Stretch="Uniform" />
                     </RadioButton>
                     <RadioButton Name="pauseRadioButton" IsEnabled="False"
                             Margin="0,0,5,15" Checked="pauseRadioButton_Checked"
                             Template="{StaticResource RadioButtonTemplate}">
                           <Image Height="20" Width="20" Stretch="Uniform" />
                     </RadioButton>
                     <RadioButton Name="stopRadioButton" IsEnabled="False"
                          Margin="0,0,15,15" Checked="stopRadioButton_Checked"
                          Template="{StaticResource
                          RadioButtonTemplate}">
                         <Image Height="20" Width="20" Stretch="Uniform" />
                     </RadioButton>
                 </StackPanel>

                 <CheckBox Name="powerCheckBox" Grid.Row="1" Width="25"
                         Height="25" HorizontalAlignment="Left"
                         Margin="15,0,0,15" Checked="powerCheckBox_Checked"
                         Unchecked="powerCheckBox_Unchecked">

                        <CheckBox.Template>
                            <ControlTemplate TargetType="CheckBox">
                                <Grid>

                                    <Ellipse Width="25" Height="25" Fill="Silver" />
                                    <Ellipse Name="backgroundEllipse" Width="22" Height="22">
                                        <Ellipse.Fill>
                                            <RadialGradientBrush>
                                                <GradientStop Offset="0"
                                                         Color="LightGray" />
                                                <GradientStop Offset="1.25"
                                                         Color="Black" />
                                            </RadialGradientBrush>
                                        </Ellipse.Fill>
                                    </Ellipse>
                                    <Image Width="20"
                                              Height="20" />
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="CheckBox.IsChecked"
                                              Value="True">
                                        <Setter TargetName="backgroundEllipse" Property="Fill">
                                            <Setter.Value>
                                                <RadialGradientBrush>
                                                    <GradientStop Offset="0" Color="LimeGreen" />
                                                    <GradientStop Offset="1.25" Color="Black" />
                                                </RadialGradientBrush>
                                            </Setter.Value>
                                        </Setter>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </CheckBox.Template>
                    </CheckBox>
                </Grid>
                <Border.RenderTransform>
                     <SkewTransform AngleY="15" />
                </Border.RenderTransform>
                <Border.BitmapEffect>
                    <BitmapEffectGroup>
                         <BevelBitmapEffect BevelWidth="10" />
                         <DropShadowBitmapEffect Color="Gray" ShadowDepth="15" Softness="1"/>
                    </BitmapEffectGroup>
                </Border.BitmapEffect>
            </Border>
            <Border Canvas.Left="185" Canvas.Top="410" Height="300"
                         Width="400">
                <Rectangle Name="reflectionRectangle">
                    <Rectangle.Fill>
                        <VisualBrush
                                    Visual="{Binding ElementName=videoMediaElement}">
                              <VisualBrush.RelativeTransform>
                                    <ScaleTransform ScaleY="-1" CenterY="0.5" />
                              </VisualBrush.RelativeTransform>
                        </VisualBrush>
                    </Rectangle.Fill>
                    <Rectangle.OpacityMask>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                               <GradientStop Color="Black" Offset="-0.25" />
                               <GradientStop Color="Transparent" Offset="0.5" />
                        </LinearGradientBrush>
                    </Rectangle.OpacityMask>
               </Rectangle>
               <Border.RenderTransform>
                    <SkewTransform AngleY="15" AngleX="-45"/>
               </Border.RenderTransform>
        </Border>
    </Canvas>
</Window>

Yukarıdaki belirttiğimiz işlemler sonrasında tasarım olarak televizyona benzettik ve MediaElement yardımı ile video izleyebilecek altyapısını sağlamış oluyoruz. Hazırlamış olduğumuz sablona ilişkin ekran görüntüsü aşağıdaki gibidir.

mak87_1

Şimdi yapmamız gereken bir diğer işlem ise aç, başlat, duraklat ve durdur özelliklerini kullanacağımız işlemleri yapacak olduğumuz işlemleri yapıyor olacağız.

using System.Windows;

namespace TV
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void powerCheckBox_Checked( object sender, RoutedEventArgs e )
        {
            reflectionRectangle.Visibility = Visibility.Visible;
            playRadioButton.IsEnabled = true;
            pauseRadioButton.IsEnabled = true;
            stopRadioButton.IsEnabled = true;
         }


         private void powerCheckBox_Unchecked( object sender, RoutedEventArgs e )
         {
 
             videoMediaElement.Close();
             reflectionRectangle.Visibility = Visibility.Hidden;
             playRadioButton.IsChecked = false;
             pauseRadioButton.IsChecked = false;
             stopRadioButton.IsChecked = false;
             playRadioButton.IsEnabled = false;
             pauseRadioButton.IsEnabled = false;
             stopRadioButton.IsEnabled = false;
         }

         private void playRadioButton_Checked( object sender, RoutedEventArgs e )
         {
              videoMediaElement.Play();
         }

         private void pauseRadioButton_Checked( object sender, RoutedEventArgs e )
         {
             videoMediaElement.Pause();
         }

         private void stopRadioButton_Checked( object sender, RoutedEventArgs e )
         {
             videoMediaElement.Stop();
         }
    }
}

Kod üzerindeki işlemleri de tamamladıktan sonra HD videolarıda sorunsuzca oynatabilecek televizyonumuzu hazırlamış bulunuyoruz. HD video bulabilmek için Windows 7 'nin örnek videolar bölümünü kullanabilmeniz mümkündür. Yaptımız işlemler sonrasında sol tarafta yer alan düğmeye basarak televizyonu açıyor ve görüntümüzü sorunsuzca izleyebiliyoruz.

Sonuç olarak bu yazımızda WPF ile shapes ve MediaElement nesnelerini kullanarak basit bir tv uygulamasını nasıl yapabileceğimizi incelemeye çalıştık.

Umarım sizler için yararlı olabilmiştir.

Kaynak
MSDN

Turhal Temizer

info@turhaltemizer.com

Yorumlar

Bu blogdaki popüler yayınlar

Olasılıksız - Kitap Yorum

Olasılıksız hayatımda okuduğum en iyi kitaptı. Tek çırpıda hiç sıkılmadan, eğlenerek okudum bu kitabı, tavsiyem sizinde okumanız.Kitabın kapağı ve içeriği ile ilgili kısa bilgi aşağıdadır.Olasılık, tahmin, düşünceler, nöbetler, karışıklıklar, ileriyi görebilme zannı, dejavu ve tabii ki olasılıksız şeyler. Bu kelimelerle içli dışlı olabileceğiniz, bütün bu kelimelerin yaşamdaki yerini kavrayabileceğiniz müthiş bir uyarlama.Adam Fawer' ın ortaya çıkardığı bu uyarlama romanın müthiş bir çalışmanın ve araştırmanın sonucu ortaya çıktığının kitabın başından sonuna kadar farkındasınız. Bu uyarlamasını, derin araştırmalarıyla birleştirip romanı tekdüzelikten çıkarıp müthiş bir yere koyduğu için de Fawer' a müteşekkir oluveriyorsunuz. Sıkıcı diye nitelendirebileceğiniz teorik bilgileri bile bir çırpıda okuyuveriyorsunuz. Teorik bilgiler dahi olaylarla sonuna kadar bağlantılı aktarılmış. Tekdüzelikten çıkmış bir roman; olasılıksız. Her an olayın kurgusunun değişmesi olasılık dahilinde. …

.Net 3.5 SP1 – Full Install Packages (Tam Kurulum)

.Net Framework 3.5 SP1 ‘i bilgisayarınıza kurmak istediğinizde normal şartlar altında Microsoft ‘un sitesinde 2.7 mb ‘lik bir dosya indirir ve kurulum işlemlerinizi bu dosya üzerinden yaparsınız. Ancak bu indirmiş oluğunuz dosya yaklaşık 220 mb ‘lik veriyi internetten indirerek kurulum yapmaktadır. İnternet çıkışına izin verilmeyen kurumlar ve kuruluşlar için bu durum bir sıkıntı oluşturmaktadır. Bu sebepten ötürü aşağıdaki link yardımı ile tam yükleme paketini indirdikten sonra hiç internet ihtiyacınız olmadan .Net 3.5 SP1 ‘i kurabilmeniz mümkün olacaktır.Link

Çoklu Dil Desteği – Veri Tabanı Tasarım Örnekleri ile

Zaman içerisinde karşımıza çok farklı projeler gelebilmektedir. Ancak bu projeler içerisinde özellikle de global ölçekli ya da bu ölçekte uygulama geliştiren firmalarda bazı temel gereksinimler sürekli olarak karşımıza çıkabilmektedir. Bu gereksinimlerden biri ve belki de en önemlisi olan çoklu dil desteğinin veri tabanı (DB) katmanında nasıl yapıldığını kısa ve hızlıca inceliyor olacağız.Öncelikle çoklu dil desteği dediğimizde aklımıza gelen ilk çözüm yolu *.resx dosyalarını kullanmak gelmektedir. Ancak bu uzaktan yönetilen ya da anlık olarak metin değişikliği gereksinimi bulunan uygulamalarda bazı ufak problemler çıkartabilmektedir.Ne gibi problemler derseniz; iki grupta inceleyebiliriz. Web projeleri ve windows üzerinde çalışan projeler.Web projelerinde IIS üzerinde yer alan bir *.resx dosyasını değiştirdiğinizde son kullanıcı tarafında etkisi hemen görülmeyebilir. Cache mekanizmaları sebebiyle ortalama 15-30 dakika arasında bir görüntüleme süre farkı ile karşılaşabiliriz. Faha köt…