XAML etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
XAML etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Çarşamba, Nisan 28, 2010

WPF – Calendar

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.

Masaüstü, web ya da mobil uygulamalara göze aldığımızda sıklıkla kullanılan belirli bileşenler(component) bulunmaktadır. Bunlar programcılığın özellikle de form üzerinde uygulama geliştiren yazılımların kesinlikle hakim olması gereken bileşnlerdir. Bizde yazımızda bu bahsetmiş olduğumuz bileşenler arasında yer alan Calendar kontrolünü inceliyor olacağız.

Şimdi Calendar kontrolü üzerinde nasıl bir işlem yapılabilir ki diye düşünüldüğünde üzerinde herhangi bir tarih seçtirir ve bu seçtirmiş olduğum tarihi ya uygulama içerisinde kullanır ya da veri tabanına kaydederek işlemi tamamlamış olurum. Aslında bu düşündüğümüz kesinlikle doğru ve WPF içerisinde de bu işlemleri sorunsuzca eskiden yapabildiğimiz gibi yapabiliyoruz. Ancak bunların üzerine eklenen ek özellikler yer almaktadır. Ne gibi? Örnek olarak aklımıza şöyle bir durum getirelim. Biz belirli tarihlerde düzenlenen kongreleri kontrol eden bir otomasyon sistemi hazırlıyoruz. Bu sistemde yer alan kongrelerin doğaş olarak başlangıç ve  bitiş tarihleri bulunmaktadır. Bunları son kullanıcıya seçtirtmek isteyen yazılımcı form üzerine başlangıç ve bitiş tarihlerinin alınabildiği iki adet calendar kontrolü ekler ve gerekli işlemleri yaparak çalışmasını tamamlar. Kullanılan bu teknikte kesinlikle ama kesinlikle bir hata var demiyoruz. Ancak bazı istisnai durumlarda sorunlar çıkabilmektedir. Ne gibi bir sorun diye örneklemek gerekirse; 2 hafta süren bir kongreyi ele alalım. Bu kongre birinci hafta pzt,sal,çrş günleri düzenlenmektedir. İkinci hafta ise prş,cum günleri düzenlenmektedir. Ancak biraz önce hazırlamış olduğumuz sistemi göz önüne aldığımızda başlangıç tarihini 1 Ocak bitiş tarihini de 13 Ocak olarak seçecek ve işlem tamamlanacaktır. Bu yapılan işlemler sonrasında da kongreyi düzenleyen kurumlar 2 haftalık bir bütçe ayırmaktadır. Fakat burada çok önemli bir nokta gözümüze çarpmakta. Kongre iki hafta sürmüyor ki!!! Sadece 5 iş günü sürmektedir. Bu durumda biz bu günleri tek tek seçebilmemiz ihtiyacı doğuyor. İlk olarak vermiş olduğumuz örnekte hatırlayacağınız üzere iki tane calendar bileşeni bulunmaktaydı. Yapmış olduğumuz işlemi iki bileşen yerine tek bileşen ile tarih aralığını seçtirerekte yaptırabilme istekleri aklımıza gelmektedir. Bu işlemleri 3. parti bileşenler ile yapabilmek mümkünken bizlerin ana amacı bu işlemi kendi kontrollerimiz yardımı ile yapmaktadır. Çünkü 3. parti bileşenlerin ekstra bir maliyeti bulunmaktadır. Kullanımı oldukça basit olan calendar kontrolü üzerinde yapabileceğimiz istekleri sıraladığımızda bayaa fazla işlem yapması gerektiği fikri ortaya çıkıyor. İşte biz bu yazımızda calendar kontrolünün WPF yardımı ile yukarıda açıklamaya çalıştığımız örnekleri nasıl yapabileceğimizi açıklamaya çalışıyor olacağız.

Calendar bileşenini incelerken yapacak olduğumuz uygulamayı Visual Studio 2010 ortamında ve .Net Framework 4.0 'da inceliyor olacağız.

DisplayDate

Şimdi ile olarak basit olarak ekrana calendar bileşeni ekliyor ve herhangi bir gün değeri atayarak örneklerimize başlıyoruz.

<Calendar DisplayDate="01/01/2010"/>

Tahmin edeceğiniz üzere eklediğim DisplayDate özelliğine eklemiş olduğumuz değer sonrasında ocak ayı bizlerin karşısına gelecektir. Eğer ki bu özelliği kullanmazsak şu anın bulunduğu ay bilgisi ve günler gelecektir.

WPF Calendar

SelectionMode

İki tarih aralığını seçerken nasıl bu işlemi nasıl yapabileceğimizi nasıl yapabileceğimizi daha önceden açıklamış ve ekstradan karşımıza çıkan istisnai durumların neler olacağını açıklamıştık. İki tarih aralığını seçerken ya da bu tarihlerin arasında kalan bazı günleri seçmek istediğimizde Calendar bileşeninin SelectionMode özelliğine MultipleRange, SingleRange, SingleDate, None değerlerinden birini atamak yeterli olacaktır.

Kullanım şekli;

<Calendar SelectionMode="MultipleRange"/>

Şimdi bu değerleri kullanarak calendar bileşenini ne kadar esnekleştirebileceğimize göz atalım...

MultipleRange

Rastgele tarih aralıklarını seçebilmemize olanak tanır. Kongre örneğinde bahsetmiş olduğumuz iki hafta gibi gözüken bir ogranizasyon bütçesinin aslında beş gün olduğunu göstermek için bu değer kullanılabilir.

WPF Calendar

SingleDate

Eğer ki SelectionMode 'a SingleDate değerini verirsek son kullanıcı yalnızca tek bir tarih seçebilecektir.

WPF Calendar

SingleRange

Adında anlaşılacağı üzere sürekli tarih aralığı seçmemize olanak tanımaktadır.

mak85_3

None

Sadece tarihleri göstermek amacıyla calendar bileşenini kullanılıyorsa bu özellik idealdir. Çünkü son kullanıcının takvim üzerinden herhangi bir değer seçmesine olanak vermemektedir.

Blackout Dates

Takvim kontrolünü kullanırken seçilmesi istenmeyen tarihlerin olması durumunda SelectionMode özelliğine BlackoutDates değerini atayarak bizlerin seçebileceği değerlerin seçilemez duruma getirilebilmesine olanak tanımaktadır. Ayrıca seçilemez tarihlerin son kullanıcı tarafından rahatlıkla anlaşılabilmesi için bu tarihlerin üzerine çarpı da koymaktadır.

<Calendar SelectionMode="{Binding SelectedItem, ElementName=selectionmode}" >
    <Calendar.BlackoutDates>
        <CalendarDateRange Start="04/01/2010" End="04/27/2010" />
    </Calendar.BlackoutDates>
</Calendar>

 WPF Calendar

Calendar Mode

Bildiğiniz üzere calendar kontrolünü kullanırken sürekli olarak gün detayına kadar görüntülenmesi gerekiyordu. Ancak WPF yardımı ile Month,Year ve Decide şeklinde görüntüleyebilinmesi mümkündür. Bu değerleri DisplayMode özelliğine atayarak kullanıyoruz.

<Calendar DisplayMode="Decide"/>

WPF Calendar

Calendar bileşenin bütün özelliklerini detaylı bir şekilde inceledik. Şimdi işlemiş olduğumuz özelliklerin hepsini kolayca kullanabilmek için basit bir uygulama hazırlayacağız. Uygulama tamamen XAML üzerinde olacak ve detaylarına girmeden sadece kaynak kodları yer alacak. Çünkü içerisinde yer alan bütün özelliklere değindik ve kullanmış olduğumuz bütün kontrolleri daha önceki yazılarımızda incelemiştik.

<Window x:Class="WPFCalendar.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <ObjectDataProvider x:Key="calendarSelectionMode"
            MethodName="GetNames" ObjectType="{x:Type System:Enum}">
        <ObjectDataProvider.MethodParameters>
            <x:Type TypeName="CalendarSelectionMode" />
        </ObjectDataProvider.MethodParameters>
    </ObjectDataProvider>
    <ObjectDataProvider x:Key="displayModes"
            MethodName="GetNames" ObjectType="{x:Type System:Enum}">
        <ObjectDataProvider.MethodParameters>
            <x:Type TypeName="CalendarMode" />
        </ObjectDataProvider.MethodParameters>
    </ObjectDataProvider>
</Window.Resources>
<Grid>
    <TabControl TabStripPlacement="Left">
        <TabItem Header="Selection Modes">
            <DockPanel>
                <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="8">
                    <TextBlock Margin="4,0" VerticalAlignment="Center">Selection Mode:</TextBlock>
                    <ComboBox x:Name="selectionmode" ItemsSource="{Binding Source={StaticResource calendarSelectionMode}}" SelectedIndex="0" />
                </StackPanel>
                <Calendar SelectionMode="{Binding SelectedItem, ElementName=selectionmode}" />
            </DockPanel>
        </TabItem>
    <TabItem Header="Blackout Dates">
        <Calendar SelectionMode="{Binding SelectedItem, ElementName=selectionmode}" DisplayDate="01.01.2010" >
             <Calendar.BlackoutDates>
                 <CalendarDateRange Start="01/01/2010" End="01/06/2010" />
             </Calendar.BlackoutDates>
        </Calendar>
    </TabItem>
    <TabItem Header="Date Range">
        <Calendar DisplayDateStart="01/01/2010" DisplayDateEnd="01/15/2010" />
    </TabItem>
    <TabItem Header="DisplayMode">
        <DockPanel>
            <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="8">
                <TextBlock Margin="4,0" VerticalAlignment="Center">Selection Mode:</TextBlock>
                <ComboBox x:Name="displayModes" ItemsSource="{Binding Source={StaticResource displayModes}}" SelectedIndex="0" />
            </StackPanel>
            <Calendar DisplayMode="{Binding SelectedItem, ElementName=displayModes}" />
        </DockPanel>
     </TabItem>
   </TabControl>
  </Grid>
</Window>

Yukarıdaki kod parçasını derleyip çalıştırdıktan sonra karşımıza gelen ekran görün

WPF Calendar

Hazırlamış olduğumuz bu son örnek yardımı ile Calendar bileşenini incelemeyi tamamlamış oluyoruz. Umarım sizler için yararlı olabilmiştir.

Kaynak
MSDN

Turhal Temizer

Pazartesi, Nisan 12, 2010

Visual Studio 2010 – RTM

Visual Studio 2010 çıktı.

Uzun bir gelişme sürecinin ardından Visual Studio 2010 resmi olarak satışa sunuldu.Visual Studio 2010

IDE üzerinde WPF ‘in nimetlerinden yararlanılarak yapılan değişiklikler, WWF ‘in tasarımın ve akış tiplerinin yenilenmesi, F# dilinin entegre edilmesi, MVC 2 ile beraber gelmesi ve diğer bir çok özelliği ile bugün VS2010 çıkmış bulunuyor. Deneme sürümünü indirip kurmak isteyenler aşağıda verecek olduğum linkten yararlanabilirler. Almak isteyenler için ise Visual Studio 2010 Ultimate satış fiyatı $11850. :)

http://www.microsoft.com/visualstudio/en-us/download

Pazartesi, Mart 22, 2010

WPF Nedir? XBAP Nedir?

Merhabalar,

WPF ile yazmış olduğum yazıları incelerken çok önemli birşeyin farkına vardım. Yazmış olduğum onlarca WPF yazısının arasında kısaca WPF budur diyen bir üzülerek söylüyorum ki bulamadım. Evet uzun uzun anlatan çok fazla var. Bu uzun yazıların içerisinde tabii ki “WPF Nedir? XBAP Nedir?” ‘in açıklamaları fazlası ile yer alıyor. Ancak sadece nedir ne değildir diye merak edenler için kısaca açıklaması aşağıdaki gibi olacaktır.

WPF Nedir?

Windows Presentation Foundation (WPF) teknolojisi .Net 3.0 ‘ın geliştirilme aşamalarında AVALON ismi ile biz kullanıcılara sunuldu. Windows Form programlama getirdiği yenilik ve yüksek bellek gerektiren grafiksel işlemleri rahatlıkla gerçekleştirebileceği söyleniyordu ki geliştiricilere sunulan örnekler bunları sağlıyordu. Sonrasında zaman içerisinde .Net 3.5, .Net 3.5 SP1 ve .Net 4.0 ile de bir çok konuda çok güzel bir araç durumuna gelmiştir.

WPF Teknolojik Avantajları Nelerdir?

Yüksek bellek harcayan grafiksel öğeleri mimari değişikliği sebebiyle çok hızlı gösterebilmesinin en büyük sağlayıcılarından XAML dilidir. XAML oluşturulmuş olan formun ve form üzerine eklenen bileşenlerin markup kodlarını göstermektedir. Eğer ki bir butona renk ya da animasyonsu işlemler katmak istiyorsanız XAML kullanmak gerekecektir. Ancak ilk etapta yeni bir kod yazım şekli ve alışılması gereken bir yapı olarak göze çarpmaktadır. Eğer ki çabuk çözüm üretilmesi gerekiyorsa bu XAML kullanımını kolaya indirgemek için C# ya da VB.net ile de aynı işlemlerin yapılabilmesi mümkündür. Ancak tahmin edeceksinizdir ki oluşan tasarımları ve işlemleri uygulamayı çalıştırmadan göremiyor olacaksınız. Ancak Expression Studio ailesinde yer alan ürünler yardımı ile hem tasarım hem de animasyon ile ilgili hazırladıklarınızı hiç zahmet harcamadan XAML formatına dönüştürebilir ve WPF uygulamaları üzerinde kullanabilirsiniz. Bu ürünler yardımı ile hazırladığınız animasyonlarda yaptıklarınızı anlık görebilmekte birlikte XAML kodlarını kullanabiliyor olmak çok ama çok kolaylık sağlayacaktır.

WPF ile uygulama geliştirdikten sonra özellikle bu uygulamaların Windows Vista ve sonrasında çıkmış olan işletim sistemlerinde kullanılıyor olması gerekmektedir. Sebebi ise Windows Vista sonrasında grafik kartlarını kullanma teknolojisi eski sürümlere göre değişmiş ve WPF ile hazırlanan uygulamalarda yoğun grafik kartı gereksinimi bulunan uygulamaların bu işlemleri gerçekleştirirken RAM belleği kullanmak yerine grafik kartının belleğinde bu işlemleri yaparak işlemci ve RAM belleği grafik işlemleri için yormadığından uygulamaların performansları daha iyi olmaktadır. Windows 7 ve Office 2010 bu bahsi geçen konu için verilmesi gereken en iyi örneklerdir.

Bileşen (Component) zenginliği açısından Windows Form uygulamalarına yakın bir içeriğe sahiptir. Ancak veri işlemlerinde daha sınırlı bir içeriğe sahip olmasına rağmen kullanılabilirlikte Windows Form bileşenleri kadar yetkinlik sunmaktadır. Ayrıca bu bileşenlerin eskilerine oranla en büyük farkları XAML sayesinde geliştirilebilir olmasıdır.

XBAP Nedir?

WPF ile hazırlanmış uygulamaların tarayıcı versiyonlarıdır. WPF Form ile hazırlanmış animasyonlar ve diğer içerikleri sahip uygulamaları Internet Explorer tarayıcısı öncelikle olmak üzere diğer tarayacılar üzerinde de XAML dosyanın yüklenmesi yardımı ile görüntülenmesi mümkündür. Özellikle son  bir kaç yıldır insanların aklına web uygulamalarında yüksek kullanıcı memnuniyeti gerektiren işlemler dendiğinde Silverlight akla gelmektedir. Ancak XBAP Silverlight ürününden farklı olmakta birlikte bu ikisinin yapabilecekleri de oldukça farklıdır.

WPF ile geliştirilmiş uygulamaların yüksek oranı rahatlıkla XBAP uygulamasına dönüştürülebilmekte ve internet tarayıcıları üzerinden kullanılabilmektedir.

WPF ve XBAP uygulamalarında grafik ve animasyon işlemlerinin dışında media ve audio formatında yer alan dosyalarıda kullanmak oldukça basittir. Eskiden bu işlemler için Media Player API ‘lerini kullanmak gerekirken WPF teknolojisi yardımı ile .Net CLR ‘ı içerisinde bu işlemleri gerçekleştirmek oldukça basittir.

XPS desteği… WPF, açık kaynak döküman formatı olan XPS dokumanlarını desteklemekte ve çok basit bir şekilde okuyucu hazırlanabilmesine olanak tanımaktadır.

Kısaca WPF ve XBAP nedir ‘i incelemeye çalıştık. Umarım aklınızda bu WPF nedir acaba diye bir soru geldiğinde cevabınızı alabilirsiniz.

İyi günler…

Perşembe, Mart 04, 2010

Silverlight: Merged Dictionaries

Silverlight ile uygulama geliştirirken resource dosyalarını kullanmanın en pratik yoludur MergedDictionaries. Ancak bunu kullanabilmek için çok az XAML bilmek gerekmektedir ve kullanım şekli aşağıdaki gibidir.

< ResourceDictionary >
    < ResourceDictionary.MergedDictionaries >
        < ResourceDictionary Source="BlueResourceDictionary.xaml" / >
    < / ResourceDictionary.MergedDictionaries >
< / ResourceDictionary >


 Bazı uygulama geliştiriciler "bu kullanımı kod ile yapabilir miyiz?" ya da "nasıl yapabiliriz?" şeklinde sorular sormaktadırlar. Bu mümkündür ve kullanım şekli aşağıdaki gibidir.


 var dictionary = Application.Current.Resources; dictionary.MergedDictionaries.Clear();
var dict = new ResourceDictionary { Source = new Uri("Blue.xaml", UriKind.Relative) };
dictionary.MergedDictionaries.Add(dict);



Kolay gelsin...








Pazar, Kasım 01, 2009

CodeProject.com Makale Yazarlığı

Merhabalar, 
Benim için mutlul bir haber vereceğim. Bildiğiniz üzere Türkiye içerisinde adı bilinen topluluklarda editörlük ve yazarlık görevinde bulunmaktayım. Artık dünyada yazılımcılarında en çok ziyeret ettiği topluluklardan biri olan CodeProject.com sitesinde de makale yazarlığı yapmaya başladım ve ilk yazım yayınlandı. Umarım burada da çok fazla sayıda yazılar yayınlayarak dünya üzerinde ki insanlara yardımcı olabilirim.

Herkese iyi çalışmalar diliyorum.

Cumartesi, Ekim 31, 2009

WPF - Tooltip Özelliği

Windows Presentation Foundation ile uygulama geliştirirken kullanabileceğimiz kontrol paleti işlerimizi rahatlıkla yürütebileceğimiz kadar geniştir. Araç kutusu içerisinde yer alan kontroller Framework sürümünü arttırdıkça ve codeplex, code.msdn gibi sitelerde yer alan projeler yardımı ile daha da artmaya devam etmektedir. WPF 'in grafiksel ve görsel gücüne günlük yaşantı da kullanılan kontrollerin de kullanılabilir olması sayesinde en basit uygulamalardan en karmaşık uygulamalara kadar geliştirilebilme olanağı tanınıyor.

Bu yazımızda WPF üzerinde kullanılan en temel kontrollerin Tooltip özelliğini özelliklerini inceliyor ve nasıl kullanıldığını, özellikleri incelemeye çalışıyor olacağız.

WPF - Tooltip
WPF ile son kullanıcılar için uygulama geliştirirken bileşen paletinde yer alan bileşenlerden bir çoğunu kullanır ve düzenleriz. Yapmış olduğumuz işlemler sonrasında her kontrolün ne işe yaradığını ve tıklanması sonrasında ne işe yaradığını açıklayan bir döküman hazırlarız. Ancak dünyanın değişmeyen gerçekleri arasındadır. Son kullanıcılar kolay kolay hazırlanan dökümanları okumazlar. Bu sebepten ötürüdür ki tıklanacak kontrolerin üzerinde yazan metinleri çok dikkatli seçer ve kolayca algınacak metinler yazmaya çalışırız. Ancak en fazla iki üç kelime ile neler anlatabiliriz ki gibi sözler aklınıza gelmektedir. Bu durumda yardımımıza Tooltip yetişiyor. Bir kontrolün üzerinde fare üle durduğumuzda gerekli açıklamaları yazabildiğimiz, resimleri gösterebildiğimiz çok güzel bir özelliktir. Şimdi bu özelliğini nasıl kullanabileceğimizi örnekler yardımı ile açıklamaya başlayalım.

Neredeyse bütün kontrollerin özelliklerinde yer alan Tooltip özelliği fare ile bir kontrolün üzerine geldiğimizde açıklama bilgisi göstermeye yarayan hoş bir özelliktir. Kullanabilmek için Tooltip yazıp istediğimiz değeri atamak yeterli olacaktır.

<Button Content="Gönder">
    <Button.ToolTip>
        <ToolTip>
            <StackPanel>
                <TextBlock FontWeight="Bold">İstek Kabulu</TextBlock>
                <TextBlock>Sunucuya isteğiniz gönderilecektir..</TextBlock>
             </StackPanel>
        </ToolTip>
    </Button.ToolTip>
</Button>

Buton kontrolünün Tooltip özelliğine iki adert TextBlock kontrolü ekledik ve fare üzerine geldiğinde görüntülenmesine olanak tanıyacağız. Şimdi test amaçlı olarak projeyi çalıştırıyor ve sonuca bir göz atıyoruz.



İstediğimizi gerçekleştirmiş gibi görünüyoruz. Kullanıcı Gönder butonunun üzerine geldiğinde butonun ne işe yaradığını açıklayan çok kısa bir açıklama görüyor.

Tabii uygulama içerisinde her zaman bütün kontorllerin aktif olacağı şeklinde bir kural hiç bir zaman yoktur. Bazı durumlarda kontroller pasif durumda gösteriliyor olabilir. Ancak biz bu pasif olmuş olan kontrol içinde bir Tooltip hazırlamışız ve bunun herzaman görüntülenmesini istiyoruz. İşte bu durumda yapılması gereken TooltipService 'lerini devreye sokarak kontroler Disable olduğu durumlarda da gösterilmesine olanak tanırız.

IsEnabled="False" olan konroller olduğu durumda TooltipService.ShowOnDisable="True" özelliğini kullanarak Tooltip 'in görüntülenmesine olanak tanırız.

<Button IsEnabled="False" ToolTip="Bütün alanları doldurunuz..." ToolTipService.ShowOnDisabled="True" Content="Kaydet" />

Buton kontrolü pasif durumdayken fareyi üzerine getirdiğimizde ekran görüntüsü aşağıdaki gibi olur.


Gayet güzel. Buton aktif olduğu durumda da Tooltip görüntülenmeye devam edecektir. Ancak çağırdığımız servisi iptal edersek Tooltipin görüntülenmediğini gözlemleyeceksiniz. Tooltip 'in bir diğer özelliği de ne kadar bir zaman süresince görüntülenebileceğini belirleyebilmemiz mümkündür. Bunun için yine TooltipService. 'in ShowDuration özelliğinden yararlanmak yeterli olacaktır.

<Button ToolTip="Bütün alanları doldurunuz..." ToolTipService.ShowDuration="20" Content="Kaydet" />

Tooltip içerisine yazmış olduğumuz metin iki saniye boyunca ekranda görüntülendikten sonra kaybolacaktır.


Tooltip özelliğini çok kolay birşekilde farklı senaryolarda kullanbildiğimizi gördük. Şimdi ise işin görsellik yanı ile ilgilenelim. Bu kullandığımız tip leri zaten windows formlar üzerinde de rahatlıkla kullanabiliyorduk. Ancak unutmayalım ki biz uygulamalarımız WPF ile geliştiriyoruz ve bu teknlojinin bize sunduğunu görsellik ve esnekliğin hepsini kullanabilmemiz mümkündür. İşte bizde bu esneklikten yararlanarak tooltip i biraz daha görsel bir duruma dönüştüreceğiz. İçerisinde resim olan ve standart boyutların dışında bir tooltip olacaktır.

<Button Width="100" Height="30">Yaklaştır Fareyi
    <Button.ToolTip>
        <StackPanel Background="Honeydew" Height="200" Width="200">
            <StackPanel Background="BurlyWood" Height="30" Width="200" Orientation="Horizontal"                     HorizontalAlignment="Left" VerticalAlignment="Top" >
                <Image VerticalAlignment="Top" Width="30" Height="30" Source="Images/Copy.png"                         Name="image1" />
                    <TextBlock FontFamily="Aharoni" FontSize="24" FontWeight="Bold"                 Foreground="Black" TextWrapping="Wrap" VerticalAlignment="Top" Height="30" HorizontalAlignment="Right" Width="143">
                        <Run FontFamily="Andalus" FontSize="18" FontWeight="Normal" Text="Merhabalar,                             Renkliler."/>
                    </TextBlock>
                </StackPanel>
                <StackPanel Width="200" Orientation="Horizontal" HorizontalAlignment="Left"         VerticalAlignment="Top" >
                    <TextBlock TextWrapping="Wrap" Foreground="#FFF9F4F4" TextAlignment="Center"     Background="{x:Null}" HorizontalAlignment="Right" VerticalAlignment="Top" Width="181" Height="98">
                        <Run FontFamily="Verdana" FontSize="11" FontWeight="Normal" Foreground="#FF151514"
                        Text="Kontorllerin Tooltip lerine resim, video, müzik ve daha bir çok özellik ekleyebilmeniz mümkündür. Tek yapmanız gereken hayal edip uygulamak olacaktır."/>
                    </TextBlock>
                </StackPanel>
            </StackPanel>
      </Button.ToolTip>
</Button> 

Yaptığımız işlemler sonrasında ekran görüntüsü aşağıdaki gibi olacaktır.


Çok basit bir şekilde WPF 'in gücünü kullanarak çok şık bir Tooltip oluşturmuş olduk. Sizlerin hayal gücüne göre bu örnekleri arttırabilme olanağınız vardır.

Sonuç olarak bu yazımızda son kullanıcıya kontrollerin ne iş yaptığını anlatmakta yardımcı özelliklerden biri olan Tooltip kontrolünü WPF 'in gücünden yararlanarak incelemeye çalıştık.

Umarım yararlı olabilmiştir.

WPF - DataGrid Pratikleri - II

Windows Presentation Foundation ile uygulama geliştirirken kullanabileceğimiz kontrol paleti işlerimizi rahatlıkla yürütebileceğimiz kadar geniştir. Araç kutusu içerisinde yer alan kontroller Framework sürümünü arttırdıkça ve codeplex, code.msdn gibi sitelerde yer alan projeler yardımı ile daha da artmaya devam etmektedir. WPF 'in grafiksel ve görsel gücüne günlük yaşantı da kullanılan kontrollerin de kullanılabilir olması sayesinde en basit uygulamalardan en karmaşık uygulamalara kadar geliştirilebilme olanağı tanınıyor.

Windows Presentation Foundation ile ilgili kontrolleri özellikle de .Net Framework 4.0 ile çok daha sık kullanacak olduklarımızı incelmeye devam ediyoruz. Bir önceki yazımızda WPF DataGrid kontrolünün nasıl kullanabileceğini ve özelliklerinden nasıl yararlanabileceğimizi anlatmaya çalışmıştık. Bu yazımızda yine DataGrid kontrolünü incelerken detaylı bir şekilde proje geliştirme esnasında DataGrid kontrolünü nasıl kullanabileceğimizi açıklamaya çalışıyor olacağız.

Son kullanıcıya veri göstermek istenildiğinde akla gelen ilk kontrollerdendir DataGrid kontrolü. Asp.Net uygulamalarında DataGrid, Windows Form uygulamalarında DataGridView kontrolü olarak geçmektedir. Ayrıca üçüncü parti kontrol geliştiren yazılım firmalarınında ilk olarak değindikleri ve özelleştirdikleri kontroldür. Bu durumda bu kontrolün WPF ilk çıktığı zamanlarda bileşen panelinin içerisinde yer almaması oldukça büyük bir eksiklik olarak hissediliyordu. .Net Framework 3.5 'in SP1 sürümünün çıkması ve sonrasında WPF Toolkitin iyice kullanılabilir hale gelmesi ile WPF için yeni yeni kontroller geliştiricilere sunulmaya başladı. Bu geliştirilen kontrollerden şu anda için en sık kullanılan DataGrid, DateTimePicker ve Calendar kontrolleri özelleştirilebilir halleri ile .Net Framwork bünyesine de eklenmiştir. Zaman içerisinde kontrol panelinin içeriğinin artacağından kimsenin şüphesi yoktur.

DataGrid kontrolünün temel özelliklerini ve DataSet yardımı ile veri tabanı işlemlerimizi nasıl yapabileceğimizi incelemiştik. Şimdi ise LinqToSQL ile DataGrid üzerinde CRUD işlemlerinin nasıl yapabileceğimize göz atıyor olacağız. Bu işlemler için olarak bir WPF projesi açıyor ve sonrasında LinqToSQL Modeli projemize ekliyoruz.

LinqToSQL denilince akla Nesne ilişkili tasarım (Object Relation Designer) kelimeleri akla gelmektedir. Alışagelmiş olduğumuz SQL sorgularının aksine nesne olarak INummrable, IQueryble ve diğer ilişkisel arayüzleri taban alınarak hazırlanmış kullanımı çok kolay bir veri modelidir. Bizde bu kolaylıktan yararlanabilmek için projemizde LinqToSQL kullanıyoruz.

Projemiz oluştu ve LinqToSQL Classes 'i projeye ekliyoruz.



Veri modelini projeye ekledikten sonra Microsoft 'un SQL örnek veritabanlarından Northwind 'den yararlarak Customers tablosunu ekliyoruz.


Bu işlemi gerçekleştirdikten sonra projeyi bir kez derliyoruz. Sonrasında sıra verileri gösterecek olduğumuz DataGrid kontrolüne geldi. Eğer ki VS2008 SP1 kullanıyorsanız CodePlex sitesi üzerinden indirmiş olduğunuz WPF Control Toolkit içerisinde yer alan WPFToolkit.dll 'i projeye referans ediyoruz. Eğer ki VS2010 kullanıyorsanız ise bu işlemi yapmanıza gerek yoktur. Çünkü .NET Framework 4.0 bünyesinde WPF DataGrid kontrolü yer almaktadır.

DataGrid kontrolünü proje içerisinde kullanılabilir duruma getirdikten sonra Customer tablosunun içeriğini grid içerisinde gösterilecek şekilde ekliyor ve sonrasında düzenleme ve silme işlenin yapılabilmesi için DataGrid 'in template column özelliğinden yararlanıyoruz.

DataGrid.xaml
<Button Content="Kullanıcıları Yükle" Name="LoadButton" VerticalAlignment="Top" Click="LoadButton_Click"/>
<DataGrid AlternationCount="2" SelectionMode="Single" AutoGenerateColumns="False" Height="252" HorizontalAlignment="Left" Margin="0,31,0,0" x:Uid="dataGrid1" x:Name="dataGrid1" VerticalAlignment="Top"    Width="584">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Path=CustomerID}" IsReadOnly="True" Header="CustomerID" Width="SizeToHeader"/>
        <DataGridTextColumn Binding="{Binding Path=CompanyName}" Header="Company" Width="SizeToHeader" />
        <DataGridTextColumn Binding="{Binding Path=ContactName}" Header="Name" Width="SizeToHeader" />
        <DataGridTextColumn Binding="{Binding Path=City}" Header="City" Width="SizeToHeader" />
        <DataGridTextColumn Binding="{Binding Path=Country}" Header="Country" Width="SizeToHeader" />
        <DataGridTextColumn Binding="{Binding Path=Phone}" Header="Phone" Width="SizeToHeader" />
        <DataGridTemplateColumn Header="Düzenleme">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Content="Düzenle" Click="EditButton_Click"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="Sil">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Content="Sil" Click="DeleteButton_Click"/>
                 </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

XAML üzerindeki değişiklikleri tamamladıktan sonra şimdi kod tarafında kullanıcıları doldur butonuna tıklanıldığı zaman gerçekleşecek olan işlemleri ayalarlayalım.

DataGrid.xaml.cs
private void LoadButton_Click(object sender, RoutedEventArgs e)
{
    LoadCustomer();
}

private void LoadCustomer()
{
    DataClasses1DataContext cd = new DataClasses1DataContext();
    var customers = (from p in cd.Customers select p).Take(10);
    dataGrid1.ItemsSource = customers;
    LoadButton.Content = "Kullanıcılar Yüklendi";
}

Yapmış olduğumuz işlemler sonrasında artık LinqToSQL yardımı ile veri tabanından kullanıcı bilgilerini getirerek gird üzerinde gösterebiliriz. Test etmek gerekirse sonuç aşağıdaki gibi olacaktır.



Şu ana kadar herşey istediğimiz gibi ilerlemektedir. Şimdi yapacak olduğumuz işlem ise seçilen bir kayıtın düzenlenmesi olacaktır. Bunun için en gerekli bilgi seçilmiş olan satırdaki CustomerID 'ye erişmek olacaktır. Diğer işlemler ise alışık olduğumuz seçilen kaydın ID 'sinden yararlanarak güncelleme işlemlerinin yapılması olacaktır.

DataGrid.xaml.cs
private void EditButton_Click(object sender, RoutedEventArgs e)
{
    try
    {
        DataClasses1DataContext dataContext = new DataClasses1DataContext();
        Customer customerRow = dataGrid1.SelectedItem as Customer;
        string m = customerRow.CustomerID;
        Customer customer = (from p in dataContext.Customers where p.CustomerID == m select p).Single();
        customer.CompanyName = customerRow.CompanyName;
        customer.ContactName = customerRow.ContactName;
        customer.Country = customerRow.Country;
        customer.City = customerRow.City;
        customer.Phone = customerRow.Phone;
        dataContext.SubmitChanges();
        MessageBox.Show("Satır Güncellenmiştir");
        LoadCustomer();
    }
    catch (System.Exception ex)
    {
        MessageBox.Show(ex.Message);
        return;
    }
}

Artık DataGrid üzerinden veri güncelleyebilir duruma gelmiş bulunuyor. LinqToSQL kullanırken veri içerisinde yer alan değişiklikler için SubmitChanges metodunu kullanmak gerekmektedir. Test etmek gerekirse sonuç aşağıdaki gibi olacaktır.



Son olarak silme işlemini nasıl yapabileceğimizi inceleyeceğiz. Yine seçili olan satırın CustomerID 'sinden yararlanarak silme işlemini gerçekleştireceğiz.

DataGrid.xaml.cs
private void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    DataClasses1DataContext cd = new DataClasses1DataContext();
    Customer customerRow = dataGrid1.SelectedItem as Customer;
    var customer = (from p in cd.Customers where p.CustomerID == customerRow.CustomerID select p).Single();
    cd.Customers.DeleteOnSubmit(customer);
     cd.SubmitChanges();
    MessageBox.Show("Satır silinmiştir.");
    LoadCustomer();
}

DataGrid üzerinde silme işlemini de başarı ile gerçekkleştirdik. LinqToSQL ile seçilmiş olan CustomerID yardımıyla veri tabanından kaydın silinmesine olanak tanıdık.

Sonuç olarak bu yazımızda basit olarak LinqToSQL yardımı ile ve WPF DataGrid kullanılarak temel CRUD işlemlerini nasıl yapabileceğimizi incelemeye çalıştık.

Umarım yararlı olabilmiştir.

WPF - Popup Kontrolü

Windows Presentation Foundation ile uygulama geliştirirken kullanabileceğimiz kontrol paleti işlerimizi rahatlıkla yürütebileceğimiz kadar geniştir. Araç kutusu içerisinde yer alan kontroller Framework sürümünü arttırdıkça ve codeplex, code.msdn gibi sitelerde yer alan projeler yardımı ile daha da artmaya devam etmektedir. WPF 'in grafiksel ve görsel gücüne günlük yaşantı da kullanılan kontrollerin de kullanılabilir olması sayesinde en basit uygulamalardan en karmaşık uygulamalara kadar geliştirilebilme olanağı tanınıyor.

Bu yazımızda WPF üzerinde kullanılan en temel kontrollerin Popup kontrolünün özelliklerini inceliyor ve nasıl kullanıldığını, özellikleri incelemeye çalışıyor olacağız.

WPF - Popup Control
Popup kontrolü web uygulamalarında en sık kullandığımız kontrollerden biridir. Web uygulamalarında javascript yardımı ile alternatif bir bilgilendirme ya da işlem yapılacak olan ayrı bir pencere açılması sonucunda işlem gerçekleşebiliyor. Ya da biraz daha farklı düşünürsek ajax kullanıyoruz ve üye girişi yaptırmak istiyoruz. Popup içerisinde değerleri girdirebiliyoruz. Aynı istekleri masaüstü uygulamalarda da istenmesi durumu söz konusu olabiliyor. Hazırlanan klasik masaüstü uygulamalarında eğer 3. parti bir bileşen aracı ya da kendilerimizin özel olarak geliştirmiş olduğu bileşen kullanmıyorsak, form üzerindeki herhangi bir kontrole tıklanması sonucunda ya da bir işlem sonrasında child pencere çıkartarak bu işlemleri gerçekleştirmeye çalışıyoruz. Bu işlem biraz uğraştırıcı gibi geldi hep bana. Bu sebepten ötürü WPF ile uygulama geliştirirken en çok güze hoş gelen Popup kontrolü olmuştu. Web uygulamalarında olduğup gibi basitçe WPF Form uygulamalarında Popup kontrolünü kullanabiliyor ve işlemlerimizi gerçekleştirebiliyoruz.

Popup kontrolünü WPF projesinde kullanabilmek için XAML kod tarafına <Popup></Popup> eklemek yeterli olacaktır. Width ve Height özellikleri açılacak olan pencerenin hangi boyutlarda olacağını belirtir. Name özelliği ise kod tarafından eklenen popup kontrolüne erişilmek gerekirse kullanılacak olan ismi belirlenen bölümdür. Ayrıca unutulmaması gereken Name özelliğini vermiş olduğumuz değer form üzerinde kullanılmayan bir değer olmalıdır. HorizontalAlignment ve VerticalAlignment özellikleri açılan pencerenin formun yatay ve dikey olarak nasıl duracağını belirtmeye olanak tanır. Şimdi ise bahsettiğimiz bu özelliklerden yararlanarak formun üzerine bir Popup kontrolü ekleyelim.

Popup.xaml
<Popup Margin="10,10,0,3" Name="Popup1" Width="190" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" />

Popup kontrolünü yukarıda olduğu gibi basitçe kullanabiliyoruz. Ancak eksik bıraktığımız bir özelilk daha var ki o en önemlisi. Popup nasıl açılacak. Bu işlemin gerçekleşebilmesi için IsOpen özelliğine True, False değerlerinden birini atamak yeterli olacaktır. Ayrıca popup kontrolünü oluşturduk ancak bizler bu popup kontrolü içerisinde diğer kontrolleri de kullanmak istiyoruz. Bu işlem için ise Popup markupunu /> ile kapatmadan <Popup></Popup> aralığına yazmak yeterli olacaktır.

Popup.xaml
<Popup Margin="10,10,0,3" Name="Popup1" Width="190" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" IsOpen="True">
    <TextBlock Text="Hede Hüdü Sertur" Background="LightBlue"/>
</Popup>

İlk popup uygulamamızı hazırlamış oluyoruz. Çalıştırdığımızda ekran görüntüsü aşağıdaki gibi olacaktır.



Ayrıca popup kontrolünü yalnızca bu şekilde kullanılması gerek değildi.Layout kontrollerinden herhangi biri kullanılarak ta kullanılabilir. Ayrıca sadece tek bir kontrol değil. İsteğimiz doğrultusunda da bol bol kontrol kullanabiliriz. Popup kontrolü yalnız başına kullanılabilmekle birlikte bir kontrolün içerisinde de kullanılabilmesi mümkündür. Örneklemek gerekirse,

Popup.xaml
<Grid>
    <Button HorizontalAlignment="Left" Click="Button_Click" Width="150" Height="30"
           Margin="10,10,0,0" >
        <StackPanel>
            <Popup Margin="10,10,0,13" Name="Popup1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="194" Height="200" IsOpen="True">
                <StackPanel>
                    <TextBlock Name="McTextBlock" Background="LightBlue" >
                         Hede Hüdü Sertur
                    </TextBlock>
                    <Button Content="Bu buton popup in içerisindedir." />
                </StackPanel>
            </Popup>
        </StackPanel>
    </Button>
</Grid>

Yukarıda hazırlamış olduğumuz kod parçası popup kontrolünü hemen çalıştırmaktadır. Ancak istersen Popup ı içerisine yerleştirdiğimiz kontrole tıklandığı anda açılmasınında sağlanabilmesi mümkündür. Bunun için butona tıklandığında IsOpen özelliğinin o anki değerini değiştirmek yeterli olacaktır.

Popup kontorolü ile yapabileceklerimizi biraz daha ileriyi götürüp WPF 'in diğer özelliklerinden de yararlanarak örnek bir uygulama hazırlayalım. İlk olarak form üzerinde bir buton ve CheckBox kontrol ekliyoruz. CheckBox kontrolünden seçili olan değere göre animasyon çıkacak veya çıkmayacaktır. Sonrasında ise animasyonlu bir şekilde popup kontrolü gelecek ve animasyonunu tamamlayacaktır. Şimdi bu basit işlemi yapacak olan XAML kodu hazırlayalım.

PopupAnimation.xaml
<Window x:Class="WPFControls.Popup"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Popup" Height="300" Width="300" Loaded="Window_Loaded">
    <StackPanel>
        <CheckBox Name="PCheckBox" Margin="10,10,0,0" Content="Popup Pencere"/>
            <Button HorizontalAlignment="Left" Width="129" Margin="10,10,0,0">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="theTransform"
                                    Storyboard.TargetProperty="(RotateTransform.Angle)"
                                    From="0" To="360" Duration="0:0:5" AutoReverse="True"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
                Animasyonu Başlat
            </Button>
            <Popup IsOpen="{Binding ElementName=PCheckBox,Path=IsChecked}"
                PlacementTarget="{Binding ElementName=PCheckBox}"
                AllowsTransparency="True"
                PopupAnimation="Slide"
                HorizontalOffset="150"
                VerticalOffset="100"
            >

                <Canvas Width="100" Height="100" Background="Green" Margin="150">
                    <Canvas.RenderTransform>
                        <RotateTransform x:Name="theTransform" />
                    </Canvas.RenderTransform>
                    <TextBlock TextWrapping="Wrap" Foreground="LightGray">
                        Popup Dönüyoooor. :)
                    </TextBlock>
                </Canvas>
            </Popup>

     </StackPanel>
</Window>

Hazırlamış olduğumız Popup kontrollü animasyon uygulamasını çalıştırdığımızda aşağıdaki gibi bir ekran görüntüsü elde ederiz.



Sonuç olarak bu yazımızda WPF kontrollerinden Popup kontrolünü incelemeye çalıştık. Web uygulamalarında sıklıkla kullanmış olduğumuz Popup özelliğini bir masaüstü uygulama da kullanabilmenin ne gibi avantajları olduğuna, nasıl kullanılabileceğine ve animasyon işlemlerinin popup kontrolü kullanılırken nasıl kullanabileceğimizi detaylı bir biçimde incelemeye çalıştık.

Umarım yararlı olabilmiştir.

Perşembe, Ekim 29, 2009

WPF - Expander Kontrolü

Windows Presentation Foundation ile uygulama geliştirirken kullanabileceğimiz kontrol paleti işlerimizi rahatlıkla yürütebileceğimiz kadar geniştir. Araç kutusu içerisinde yer alan kontroller Framework sürümünü arttırdıkça ve codeplex, code.msdn gibi sitelerde yer alan projeler yardımı ile daha da artmaya devam etmektedir. WPF 'in grafiksel ve görsel gücüne günlük yaşantı da kullanılan kontrollerin de kullanılabilir olması sayesinde en basit uygulamalardan en karmaşık uygulamalara kadar geliştirilebilme olanağı tanınıyor.

Bu yazımızda WPF üzerinde kullanılan en temel kontrollerin Expander kontrolünün özelliklerini inceliyor ve nasıl kullanıldığını, özellikleri incelemeye çalışıyor olacağız.

WPF - Expander Control
Expendar kontrolü belirli bir kontrol paletini istediğimiz zamam genişletip istediğimiz zaman daraltmamıza olanak tanıyan WPF kontrolüdür. En sık olarak ASP.Net Ajax uygulamalarında kullnılan bir kontroldür. Tabii yalnızca web uygulamalarında masaüstü uygulamalarda da kullanımını çok sık şekilde rastlayabiliyoruz. Peki bu expander kontrolü ne işe yarar ve ne amaçla kullanılır? Öncellikle ne işe yarara değinmek çok daha mantıklı olacaktır. Tasarlanan WPF form üzerinde belirle zamanlarda kullanılacak kontroller ekleyebiliriz. Bunlardan en bariz örneği kullanıcı girişi yapılacak olan ad ve şifre girme bölümüdür. Giriş işleminin yapılmasından sonra ise kullanıcı bilgileri, en son ne zaman giriş yaptığı, bir statüsü varsa o ya da kullanabileceğiniz diğer bilgileri gösterebilirsiniz. İşte bu ekranlarında ekran üzerinde sürekli olarak yer kaplamaması için expander yani açılır kapanır kontrolün içerisinde bulundurmak daha mantıklı bir çözüm olacaktır. Başka bir örnek birden fazla seçim yapılabilecek bir anket bölümün sürekli olarak ekranda açık durmadan yalnızca başlığı yardımı ile içeriğinin görüntülenmesine olanak tanıyabiliriz.

Expander kontrolünün nasıl kullanıldığını göreceğimiz XAML koda göz atalım. Ancak kullanımını anlatmadan önce ufak bir hatırlatma yapmak gerekirse, expander kontrolünü form üzerine ekledikten sonra içeriğine istediğimiz kadar kontrol ekleyip işlevselliğini sağlayabilmemiz mümkündür.

Expander.xaml
<Window x:Class="WPFControls.Expander"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Expander" Height="300" Width="300">
    <Grid>
        <Expander Header="Diğer Özellikler">
            <StackPanel Margin="10,4,0,0">
                <CheckBox Margin="4" Content="1. Seçenek" />
                <CheckBox Margin="4" Content="2. Seçenek" />
                <CheckBox Margin="4" Content="3. Seçenek" />
            </StackPanel>
        </Expander>
    </Grid>
</Window>

Hazırlamış olduğumuz XAML kod sonrasında uygulamayı derlediğimizde aşağıdaki gibi bir görüntü elde etmiş oluruz.


Açık iken



Expander kontrolünün kullanılabilecek en önemli özelliği açık olup olmadığının kontrolüdür. Bu işlem için IsExpander özelliğine True ya da False değerini vermek yeterli olacaktır. Açık olduğu durumda değeri True, kapalı olduğu zaman ise False olacaktır.

Kod yardımı ile expander kontrolünü kullanmak istersek Expander objesini oluşturduktan sonra özelliklerine değerleri atamamız yeterli olacaktır.

Expander.xaml.cs
void MakeExpander()
{
    StackPanel sp = new StackPanel();
    Grid.SetRow(sp, 0);
    Grid.SetColumn(sp, 1);
    sp.Background = Brushes.LightSalmon;

    TextBlock colTitle = new TextBlock();
    colTitle.Text = "EXPANDER kod ile";
    colTitle.HorizontalAlignment = HorizontalAlignment.Center;
    colTitle.Margin.Bottom.Equals(20);
    sp.Children.Add(colTitle);

    Expander exp = new Expander();

    BulletDecorator bp = new BulletDecorator();
    Image i = new Image();
    BitmapImage bi = new BitmapImage();
    bi.UriSource = new Uri(@"pack://Images.copy.png");
    i.Source = bi;
    i.Width = 10;
    bp.Bullet = i;
    TextBlock tb = new TextBlock();
    tb.Text = "My Expander";
    tb.Margin = new Thickness(20, 0, 0, 0);
    bp.Child = tb;

    StackPanel spScroll = new StackPanel();
    TextBlock tbc = new TextBlock();
    tbc.Text =
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit," +
        "sed do eiusmod tempor incididunt ut labore et dolore magna" +
        "aliqua. Ut enim ad minim veniam, quis nostrud exercitation" +
        "ullamco laboris nisi ut aliquip ex ea commodo consequat." +
        "Duis aute irure dolor in reprehenderit in voluptate velit" +
        "esse cillum dolore eu fugiat nulla pariatur. Excepteur sint" +
        "occaecat cupidatat non proident, sunt in culpa qui officia" +
        "deserunt mollit anim id est laborum.";
    tbc.TextWrapping = TextWrapping.Wrap;

    spScroll.Children.Add(tbc);
    ScrollViewer scr = new ScrollViewer();
    scr.Content = spScroll;
    scr.Height = 50;
    exp.Content = scr;

    exp.Width = 200;
    exp.HorizontalContentAlignment = HorizontalAlignment.Stretch;
    //Grid
    sp.Children.Add(exp);
    Grid1.Children.Add(sp);
}

Kod yardımı ile nasıl Expander kontrolünü nasıl kullanacağımızı da gördük. Şimdi kod ile yapmış olduğumuz bu işlemleri XAML kod yardımı ile nasıl yapabileceğimize bir göz atalım.

Expander.xaml
<Expander Width="200" HorizontalContentAlignment="Stretch">
    <Expander.Header>
        <BulletDecorator>
            <BulletDecorator.Bullet>
                <Image Width="10" Source="Images\copy.png"/>
            </BulletDecorator.Bullet>
            <TextBlock Margin="20,0,0,0">My Expander</TextBlock>
        </BulletDecorator>
    </Expander.Header>
    <Expander.Content>
        <ScrollViewer Height="50">
            <TextBlock TextWrapping="Wrap">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit
                esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </TextBlock>
        </ScrollViewer>
    </Expander.Content>
</Expander>

Hem kod yardımı ile hemde XAML kod yardımı ile yapmış olduğumuz işlemler sonrasında projemizi çalıştırdığımızda karşımıza aşağıdaki gibi bir görüntü ortaya çıkacaktır.



Sonuç olarak bu yazımızda Expander kontrolünü yani açılıp kapanan kontrolü nasıl kullanabileceğimizi ve ne amaçla kullanabileceğimizi incelemeye çalıştık.
 
Umarım yararlı olabilmiştir.

Pazartesi, Ekim 26, 2009

WPF - Menu Kontrolü

Windows Presentation Foundation ile uygulama geliştirirken kullanabileceğimiz kontrol paleti işlerimizi rahatlıkla yürütebileceğimiz kadar geniştir. Araç kutusu içerisinde yer alan kontroller Framework sürümünü arttırdıkça ve codeplex, code.msdn gibi sitelerde yer alan projeler yardımı ile daha da artmaya devam etmektedir. WPF 'in grafiksel ve görsel gücüne günlük yaşantı da kullanılan kontrollerin de kullanılabilir olması sayesinde en basit uygulamalardan en karmaşık uygulamalara kadar geliştirilebilme olanağı tanınıyor.

Bu yazımızda WPF üzerinde kullanılan en temel kontrollerin Menü kontrolünün özelliklerini inceliyor ve nasıl kullanıldığını, özellikleri incelemeye çalışıyor olacağız.

WPF - Menü Control
Menü kontrolü Windows Vista 'nın çıkışıyla birlikte menü kontrolünün kullanımı azalma eğlimine girmiş olsada hala çok sık olarak kullanılmaya devam etmektedir. Özellikle Ribbon menüye geçmemiş ya da geçmek istemeyen proje sahiplerinin projelerinde standart menü kontrolü kullanmak gerekebilir. Ayrıca görselliği kısmen bir yana bırakarak sadece yazı içerdiği içinde çok daha hızlı bir kullanım şekli sağlamaktadır. Ancak şuna da değinmeden geçemeyeceğim. Ribbon menünün yeri bambaşkadır. Neden derseniz, menü içerisinde yer alan metinlerin ne işe yaradığını görsel olarak ve kocaman kocaman ikonlar ile göstermek son kullanıcıları memnun eden yegane özelliklerdendir. Ancak biz şimdilik yine klasiklerde kalarak menü kontrolünü incelemeye başlayalım.

Not: Sizlere değinmek istediğim ufak bir konu var. Eğer ki WPF ya da denki bir uygulama geliştirmeyi düşünüyorsanız kesinlikle Visual Studio 2010 idesini denemenizi öneriyorum. Hem idenin WPF ile yeniden yazılmış olması hemde .Net 3.5.1 sürümünün desteğini tamamen arkasına almasından ötürü geliştirme performansı konusunda oldukça iyi çözümler bize sunabilmektedir. Ayrıca şu anda itibari Beta2 sürümü olması ve daha da gelişecek olacağını da düşünürsek WPF uygulamaları ya da diğer uygulamaları geliştirecek yazılımcılar için tercih edilmesi gereken öncelikli ide olacaktır.

Kullanmak için <Menu> kontrolünün içerisine <MenuItem> elemanlarına değerleri atamak yeterli olacaktır. Peki nasıl kullanıyoruz. Basitçe göz atalım.

Menu.xaml
<Menu IsMainMenu="True">
    <MenuItem Header="_Dosya" />
    <MenuItem Header="_Düzen" />
    <MenuItem Header="_Görünüm" />
    <MenuItem Header="_Pencere" />
    <MenuItem Header="_Yardım" />
</Menu>

ContextMenu kontrolünden alışık olduğumuz kullanma şekli ile menü kontrolünü oluşturmul olduk. ContextMenu kontrolün farkı ise, genel bir menü olmasıdır. Ekran görüntüsü aşağıdaki gibi olur. Hatırlayacağınız üzere ContextMenu kontrolünde herhangi bir kontrole özellik olarak eklenir ve sağ tıklama sonrasında karşımıza çıkar.



Menüyü oluştururken dikkat edeceğiniz üzere Header özelliklerine atamış olduğumuz değerlerde ile olarak "_" kullanılmıştır. Sebebi ise, klavye üzerinde F10 ya da alt tuşuna basıldığında tek tuş ile kullanım olanağı vermesi içindir.

ContextMenu kontrolünde menu elemanlarının içeriğine ikon ekleyebilmemiz mümkündü. Aynı şekilde klasik menü kontrolünde de bu özellik mevcuttur. Ayrıca yine aynı şekilde Command özelliğine vermiş olduğunuz parametreler ile hiç bir kod yazmadan kolayca işlemlerde yaptırabilmeniz mümkündür. Kısaca bu özellikleri açıklayan bir örnek hazırlayalım. Bu işlem için olarak oluşturmuş olduğumuz menü kontrolünün düzenle elamanının içerisine alt elemanlar olarak kes, kopyala ve yapıştır işlemlerini yapacak şekilde ekliyoruz.

Menu.xaml
<Menu IsMainMenu="True">
    <MenuItem Header="_Dosya" />
    <MenuItem Header="_Düzen">
        <MenuItem Header="_Kes" Command="Cut">
            <MenuItem.Icon>
                <Image Source="Images/cut.png" />
            </MenuItem.Icon>
        </MenuItem>
        <MenuItem Header="_Kopyala" Command="Copy">
            <MenuItem.Icon>
                <Image Source="Images/copy.png" />
            </MenuItem.Icon>
        </MenuItem>
        <MenuItem Header="_Yapıştır" Command="Paste">
            <MenuItem.Icon>
                <Image Source="Images/paste.png" />
            </MenuItem.Icon>
        </MenuItem>
    </MenuItem>
    <MenuItem Header="_Görünüm" />
    <MenuItem Header="_Pencere" />
    <MenuItem Header="_Yardım" />
</Menu>

Yapmış olduğumuz değişiklik sonrasında ekran görüntüsü aşağıdaki gibi olacaktır.



Şu ana kadar herşey güzel gidiyor. Şimdi değineceğimiz özellik ise klasik menülerde en sık kullanılan özelliklerden biri olan seçilebilirlik. Ekran üzerinde bazı değerlerin gösterilmesi ya da gösterilmemesi için çok sık kullanılan bir özelliktir. Bu özelliğin aktifleştirilebilmesi için yapılması gereken tek işlem IsCheckable özelliğine True,False değerlerinden birini atamak olacaktır. Sonrasında istediğimiz işlemleri yapabilmemiz mümkün olacaktır.

Menu.xaml
<MenuItem Header="_Görünüm">
    <MenuItem Header="Düzenlenebilirlik" IsCheckable="True" />
</MenuItem>

Seçilebilir menüyü oluşturduk. Bakalım projeyi çalıştırdığımızda da düşündüğümüz sonucu alabilmiş miyiz?



Herşey yolunda gözüküyor. :) Menü kontollerinde ve web uygulamalarında en çok sevilen yardımcı kontrollerden biri de seperator kullanımıdır. Bir içerik hazırlanacak olduğunda küçük gruplara ayrılması istendiği durumlarda kullanımına gerek duyulmaktadır. Bu sebepten ötürüdür ki en sık menü kontrollerinde kullanılır. Peki, kullanımı için ne yapmak gerekir? <Seperator /> yazmak yeterli olacaktır.

Menu.xaml
<MenuItem Header="_Dosya">
    <MenuItem Header="_Yeni..." />
    <Separator />
    <MenuItem Header="_Aç..." />
    <Separator />
    <MenuItem Header="_Kaydet" />
    <MenuItem Header="_Farklı Kaydet..." />
    <Separator />
    <MenuItem Header="_Çıkış" />
</MenuItem>

Seperator kullanımı sonrasında ise menünün yenilenen içeriği aşağıdaki gibi olacaktır.



Menu kontrolü ile değineceğimiz son özellik ise, tıklanması anında yapılacak işlem olacaktır. Bu işlemi yapabilmek için alışık olduğumuz üzere click olayına kod tarafında istediğimiz işlemleri atamak yeterli olacaktır.

Menu.xaml
<MenuItem Header="_Yeni..." Click="Yeni_Click" />

Menu.xaml.cs
private void Yeni_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Menü içerisinden yeni 'ye tıkladınız. İşte size yeni :");
}

Çok basit olarak tıklanması esnasında neler yapılması gerektiğine de değinmeye çalıştık. Eğer ki bütün menü içeriğini kod içerisinde oluşturmak isterseniz, bir olaydan, koşuldan ya da aklımıza gelmeyen herhangi bir durumdan sonra kod yardımı ile Menu, MenuItem, MenuItemRoles sınıf ve enumlarını kullanarakta istediğiniz menüleri oluşturabilmeniz mümkündür. Bu da daha iş süreçlerini ve kurumsal projeleri etkileyen bir kullanım olacaktır.

Son olarak oluşturmuş olduğumuz menü kontrolünün bütün kodları şu şekilde olmuştur.

Menu.xaml
<Window x:Class="WPFControls.Menu"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="Menu" Height="300" Width="300">
    <Grid>
        <Menu IsMainMenu="True">
            <MenuItem Header="_Dosya">
                <MenuItem Header="_Yeni..." Click="Yeni_Click" />
                <Separator />
                <MenuItem Header="_Aç..." />
                <Separator />
                <MenuItem Header="_Kaydet" />
                <MenuItem Header="_Farklı Kaydet..." />
                <Separator />
                <MenuItem Header="_Çıkış" />
            </MenuItem>
            <MenuItem Header="_Düzen">
                <MenuItem Header="_Kes" Command="Cut">
                    <MenuItem.Icon>
                        <Image Source="Images/cut.png" />
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="_Kopyala" Command="Copy">
                    <MenuItem.Icon>
                        <Image Source="Images/copy.png" />
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="_Yapıştır" Command="Paste">
                    <MenuItem.Icon>
                        <Image Source="Images/paste.png" />
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>
            <MenuItem Header="_Görünüm">
                <MenuItem Header="Düzenlenebilirlik" IsCheckable="True" />
            </MenuItem>
            <MenuItem Header="_Pencere" />
            <MenuItem Header="_Yardım" />
        </Menu>
    </Grid>
</Window>

Sonuç olarak gördüğünüz üzere kolayca menü kontrollerini kullanabiliyoruz. WPF uygulamalarında klasik menü kullanmak istediğimiz durumlarda, ister XAML kod yardımı ile istersekte CS kod yardımı ile çok basit ancak hızlı menüler oluşturabilmemiz mümkündür.

Umarım yararlı olabilmiştir.