![\"\"](\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002142_31.jpg\")
<\/p>\n9\/3\/2009
\nWPF uygulamas\u0131 geli\u015ftirdi\u011fimiz bu makale serisinin ilk ad\u0131m\u0131nda Expression Design 2 ile tasar\u0131m olu\u015fturduk. \u0130kinci ad\u0131mda Blend 2 ile proje olu\u015fturup, XAML \u00e7\u0131kt\u0131s\u0131 olan tasar\u0131m\u0131m\u0131z\u0131 bu projeye oturttuk ve ListBox’a XML’den veri \u00e7ektik. Serinin bu \u00fc\u00e7\u00fcnc\u00fc ad\u0131m\u0131nda projelerimizde kulland\u0131\u011f\u0131m\u0131z WPF kontrollerinin g\u00f6rsel d\u00fczenlemelerini inceleyece\u011fiz.<\/p>\n
\nBa\u015flayal\u0131m. En son ListBox’\u0131m\u0131za veri \u00e7ekmi\u015ftik. \u015eimdi bu ListBox’\u0131 d\u00fczenleyelim.<\/p>\n
<\/p>\n
\u00d6nce Properties sekmesinden arka plan ve border renklerini iptal ediyorum.<\/p>\n
![\"\"](\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002142_32.jpg\")
<\/p>\n
Properties arama kutusuna “scro” yaz\u0131p Scroll Bar \u00f6zelliklerinin gelmesini sa\u011fl\u0131yorum. Ve yatay scrollbar \u0131 Hidden yap\u0131yorum.<\/p>\n
![\"\"](\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002142_33.jpg\")
<\/p>\n
\u015eimdi ListBox’\u0131n se\u00e7ili sat\u0131r\u0131 ile \u00fcst\u00fcne gelinen sat\u0131rlar\u0131n\u0131n renk de\u011fi\u015ftirmesi \u00f6zelliklerini iptal edelim. ListBox’a sa\u011f klik yap\u0131p a\u00e7\u0131lan men\u00fcden “View XAML” \u0131 se\u00e7in. Bu i\u015flem ListBox’a ait XAML kodlar\u0131n\u0131 se\u00e7menizi sa\u011flayacak.<\/p>\n
![\"\"](\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002142_34.jpg\")
<\/p>\n
XAML g\u00f6r\u00fcn\u00fc\u015f d\u00fczenine ge\u00e7in. Sa\u011fdaki ve soldaki paletleri kald\u0131r\u0131p rahat\u00e7a kodla \u00e7al\u0131\u015fmak istiyorsan\u0131z F4<\/strong> e bas\u0131n.<\/p>\n \u00d6nce <ListBox xxxxx \/> \u015feklindeki kodunuzu <ListBox xxxx><\/Listbox> \u015fekline \u00e7evirin ve ortas\u0131na alttaki e\u011fik, kal\u0131n yaz\u0131lm\u0131\u015f kodu ekleyin. Sonu\u00e7 kodlar\u0131 alttaki gibi olmal\u0131d\u0131r.<\/p>\n <ListBox Margin=”8,77,8,8″ IsSynchronizedWithCurrentItem=”True” ItemsSource=”{Binding Mode=Default, Source={StaticResource KitapDataSource}, XPath=\/KATALOG\/YAZAR\/KITAP}” ItemTemplate=”{DynamicResource KITAPTemplate}” Background=”{x:Null}” BorderBrush=”{x:Null}” ScrollViewer.HorizontalScrollBarVisibility=”Hidden”><\/p>\n <ListBox.Resources><\/strong><\/em><\/strong><\/em><\/p>\n <\/strong><\/em> <SolidColorBrush x:Key=”{x:Static SystemColors.HighlightBrushKey}” Color=”Transparent”\/><\/strong><\/em><\/strong><\/em><\/p>\n <\/strong><\/em> <SolidColorBrush x:Key=”{x:Static SystemColors.ControlBrushKey}” Color=”Transparent”\/><\/strong><\/em><\/strong><\/em><\/p>\n <\/strong><\/em> <SolidColorBrush x:Key=”{x:Static SystemColors.HighlightTextBrushKey}” Color=”Black”\/><\/strong><\/em><\/strong><\/em><\/p>\n <\/strong><\/em> <\/ListBox.Resources><\/strong><\/em><\/p>\n <\/ListBox><\/p>\n<\/div>\n Sonu\u00e7 olarak \u015fu andaki ListBox’\u0131n g\u00f6r\u00fcn\u00fcm\u00fc alttad\u0131r.<\/p>\n Evet ListBox’\u0131m\u0131zla bir \u015feyler yapt\u0131k ama istedi\u011fimiz g\u00f6r\u00fcn\u00fc\u015f tabi ki bu de\u011fil. Blend layerlar\u0131nda t\u0131klad\u0131\u011f\u0131n\u0131z kontrollerin Edit \u00f6zelliklerinin g\u00f6r\u00fcnd\u00fc\u011f\u00fc yere “breadcrumb” denir ve \u00e7al\u0131\u015fma alan\u0131n\u0131n \u00fcst\u00fcd\u00fcr. ListBox’\u0131m\u0131z se\u00e7iliyken breadcrumb da ki ListBox’a t\u0131kl\u0131yoruz. A\u00e7\u0131lan men\u00fcde Edit Other Templates>Edit Generated Items (Item Template)>Edit Template t\u0131kl\u0131yoruz.<\/p>\n Item Template’in i\u00e7indeki [StackPanel] layer\u0131na t\u0131kl\u0131yoruz ve bu layer \u0131 siliyoruz. B\u00f6ylece t\u00fcm ListBox item lar\u0131 silinmi\u015f oluyor. Biz bunlar\u0131n yerine kendi item lar\u0131m\u0131z\u0131 koyaca\u011f\u0131z.<\/p>\n Expression Design’dan \u00e7\u0131kt\u0131s\u0131n\u0131 ald\u0131\u011f\u0131m\u0131z FRPKitap.XAML’deki Temp layer\u0131n\u0131 oldu\u011fu gibi kopyal\u0131yoruz.<\/p>\n Orjinal XAML e geri d\u00f6n\u00fcp bunu ListBox’\u0131n ItemTemplate’nin i\u00e7ine yap\u0131\u015ft\u0131r\u0131yoruz. Ve her item \u0131 ok tu\u015flar\u0131n\u0131 kullanarak orijinal tasar\u0131mdaki yerine getiriyoruz. (Dikkat: Temp layer\u0131n\u0131 StackPanel’i silmeyi unutup onun i\u00e7ine yerle\u015ftirmeyin.)<\/p>\n Tasar\u0131m\u0131m\u0131z ListBox i\u00e7ine koydu\u011fumuza g\u00f6re s\u0131ra geldi her item \u0131n dinamik olarak XML’den verisini \u00e7ekmeye. \u00d6nce ba\u015fl\u0131\u011f\u0131 se\u00e7iyoruz.<\/p>\n Ba\u015fl\u0131k se\u00e7iliyken, Properties tab\u0131ndaki Common Properties kutusunda bulunan Text se\u00e7ene\u011finin sa\u011f\u0131ndaki k\u00fc\u00e7\u00fck kutucu\u011fa bas\u0131yoruz.<\/p>\n A\u00e7\u0131lan men\u00fcde Data Binding e t\u0131kl\u0131yoruz.<\/p>\n A\u00e7\u0131lan Create Data Binding penceresinde se\u00e7ti\u011finiz item \u0131n ilgili oldu\u011fu d\u00fc\u011f\u00fcm\u00fc se\u00e7ip, Finish’e bas\u0131yoruz. Ba\u015fl\u0131k i\u00e7in KITAPAD.<\/p>\n Bundan sonra item’\u0131n g\u00f6rsel \u00f6zelliklerini ayarl\u0131yoruz. Altta textin renginin ayarlanmas\u0131 g\u00f6steriliyor.<\/p>\n Fontu ve boyunu ayarl\u0131yoruz.<\/p>\n B\u00f6ylece ba\u015fl\u0131\u011f\u0131 bitirmi\u015f oluyoruz. Di\u011fer t\u00fcm text alanlar\u0131n\u0131 da ayn\u0131 \u015fekilde ayarl\u0131yoruz. Burada dikkat etmeniz gereken alan a\u00e7\u0131klamalar alan\u0131. Bu alan\u0131 b\u00fcy\u00fct\u00fcyoruz.<\/p>\n Ve Text ileri \u00f6zelliklerinde TextWrapping’i “Wrap” olarak ayarl\u0131yoruz. B\u00f6ylece a\u00e7\u0131klamalar\u0131m\u0131z d\u00fczg\u00fcnce g\u00f6r\u00fclebilir.<\/p>\n Kitap imaj\u0131n\u0131 se\u00e7iyoruz.\u0130maj i\u015flemleride text i\u015flemlerine \u00e7ok benziyor.<\/p>\n Bu sefer Common Properties’de ki Source’un k\u00fc\u00e7\u00fck kutucu\u011funa bas\u0131yoruz.-<\/p>\n Yine Data Binding<\/p>\n Yine do\u011fru d\u00fc\u011f\u00fcm\u00fc se\u00e7iyoruz ve Finish.<\/p>\n Projeyi F5<\/strong> ile \u00e7al\u0131\u015ft\u0131r\u0131rsan\u0131z ve her \u015feyi do\u011fru yapt\u0131ysan\u0131z sa\u011fdaki scroll bar\u0131 a\u015fa\u011f\u0131ya indirdik\u00e7e ba\u015fka bir kitab\u0131n geliyor olmas\u0131 laz\u0131m.<\/p>\n Evet \u015fimdi gelelim WPF’in b\u00fcy\u00fcs\u00fcne. WPF’deki kontroller istedi\u011finiz \u015fekle sokulabilmektedir. Biz bu projede scroll bar yerine bizim belirledi\u011fimiz turuncu \u00fc\u00e7genlerin \u00e7al\u0131\u015fmas\u0131n\u0131 istiyoruz. Bunu ya\u011faca\u011f\u0131z ama genel olarak bilinen yollardan bir buton ve \u00fcst\u00fcne kod yazarak de\u011fil. Biz scroll bar\u0131 istedi\u011fimiz \u015fekle sokaca\u011f\u0131z. Enfes de\u011fil mi? Hadi ba\u015flayal\u0131m. Layer lardan \u00e7ift t\u0131klayarak ListBox’\u0131 se\u00e7iyorsunuz. Yukar\u0131da, breadcrumb’da ListBox’a t\u0131kl\u0131yoruz. Edit Control Parts (Template)>Edit Copy’ye t\u0131kl\u0131yoruz.<\/p>\n Gelen kutuda OK’e bas\u0131yoruz. \u0130sterseniz isim belirleyebilirsiniz.<\/p>\n ListBox Template itemlar\u0131 layer paletinde dizilmi\u015ftir. [ScrollViewer] \u0131 se\u00e7iyoruz.<\/p>\n Breadcrumb’da [ScrollViewer]’a t\u0131kl\u0131yoruz. A\u00e7\u0131lan men\u00fcden Edit Control Parts (Template)>Edit Copy’ye t\u0131kl\u0131yoruz.<\/p>\n OK’e t\u0131kl\u0131yoruz.<\/p>\n Bu sefer ScrollViewer’\u0131 i\u00e7indeyiz. Layer paletinde PART_VerticalScrollBar’a t\u0131kl\u0131yoruz.<\/p>\n Breadcrumb’da PART_VerticalScrollBar’a t\u0131kl\u0131yoruz. A\u00e7\u0131lan men\u00fcden Edit Control Parts (Template)>Edit Copy’ye t\u0131kl\u0131yoruz.<\/p>\n OK’e t\u0131kl\u0131yoruz.<\/p>\n \u00dcst RepeatButton’u se\u00e7iyoruz.<\/p>\n Breadcrumb’da [RepeatButton]’a t\u0131kl\u0131yoruz. A\u00e7\u0131lan men\u00fcden Edit Control Parts (Template)>Edit Copy’ye t\u0131kl\u0131yoruz.<\/p>\n OK’e t\u0131kl\u0131yoruz.<\/p>\n Evet sonunda butona ula\u015ft\u0131k:) Biliyorum biraz uzun oldu ama emin olun de\u011fecek. Expression Studio 3’te bunu daha kolay bir hale getireceklerini umuyorum. Chrome layer\u0131n\u0131 se\u00e7ip siliyoruz. Chrome bildi\u011fimiz standart Scroll oku.<\/p>\n Chrome’un yerine kendi okumuzu yerle\u015ftirece\u011fiz. Ben okun path olarak kalmas\u0131 i\u00e7in Design’dan kopyalad\u0131m. Bu da \u00e7ok iyi bir \u00f6zellik.<\/p>\n Repeat Butonun i\u00e7ine okumuzu yap\u0131\u015ft\u0131r\u0131yoruz.<\/p>\n Ayn\u0131 i\u015flemleri alt buton i\u00e7inde yap\u0131yoruz. Her iki butonun durdu\u011fu yerleri ayarlaman\u0131z gerekebilir.<\/p>\n Breadcrumb \u0131 kullanarak,<\/p>\n G\u00f6r\u00fcnmesini istemedi\u011fimiz di\u011fer Scroll Bar birle\u015fenlerine ula\u015f\u0131p,<\/p>\n \u00f6zellikleriyle oynayarak onlar\u0131 da ortadan kald\u0131r\u0131yoruz.<\/p>\n Temp’in i\u00e7inde gelen di\u011fer oklar\u0131 silmeyi unutmay\u0131n.<\/p>\n Scroll Bar\u0131 d\u00fczenlenmi\u015f uygulamam\u0131z \u015fu \u015fekilde g\u00f6z\u00fckmelidir.<\/p>\n![\"\"](\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002142_35.jpg\")
<\/p>\n\n![\"\"](\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000002142_36.jpg\")
<\/a><\/p>\n<\/a><\/p>\n<\/p>\n<\/p>\n<\/a><\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/a><\/p>\n<\/p>\n<\/p>\n<\/a><\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/a><\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/a><\/p>\n<\/p>\n<\/p>\n<\/p>\n<\/p>\n