Silverligt 3 betanın çıkmasyıla birlikte Expression Blend de yenilendi ve Expression Blend 3 Preview sürümü ile karşımıza çıktı. Expression Blend'in yeni sürümünde bir çok yeni özellik bizi bekliyor. Bunlardan biri de Photoshop ve Illustrator dosyalarını Expression Blend'e aktarılabilmesidir. Yani photoshop da hazırladığınız bir PSD dosyayı kaydettikten sonra tüm katmanlarıyla birlikte Expression Blend'e import edebiliyoruz.
Bu işlemin nasıl yapıldığına bakacak olursak; İlk olarak Photoshop'u açalım ve katmanlar oluşturarak kaydedelim.
Şimdi Expression Blend 3 ile yeni bir proje oluşturalım ve File menüsünden Import Adobe Photoshop'a tıklayalım.
Photoshop dosyasında (psd) oluşturduğumuz katmanlar karşımıza geldi. Buradan hangi katmanları import etmek istiyorsak seçiyoruz. "Preserve pixel dimensions on import" seçeneğini seçersek katmanların boyutları korunur. Eğer istersek "Merge Layer" ile Katmanları birleştirebiliyoruz.
Photoshopda oluşturduğumuz bir dosyayı katmanlarıyla birlikte Expression Blend'e aldık
Oluşan XAML koduna bakalım,
[XAML]
<UserControlxmlns:dc="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm" x:Class="SilverlightHtmlRender.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="350"Height="180"xmlns:template="clr- namespace:SilverlightHtmlRender"> <Gridx:Name="LayoutRoot"Background="White"> <Canvasx:Name="photoshop"Height="180"Width="350"Clip="M0,0L350,0 350,180 0,180z"> <Imagex:Name="Layer_1"Height="200"Width="350"Canvas.Left="0"Canvas.Top="-10"Source="photoshop_Images/Layer 1.png"/> <Imagex:Name="Layer_2"Height="166"Width="150"Canvas.Left="6"Canvas.Top="6"Source="photoshop_Images/Layer 2.png"/> <TextBlockx:Name="SILVERLIGHt_Beta_3_IMport_PHOT"Width="152"Canvas.Left="168"Canvas.Top="17"FontFamily="Tahoma"FontSize="14"FontWeight="Bold"Foreground="#FFFF0101"Text="SILVERLIGHT BETA 3
IMPORT PHOTOSHOP"TextAlignment="Left"TextWrapping="Wrap"/> <Imagex:Name="Layer_3"Height="86"Width="153"Canvas.Left="170"Canvas.Top="64"Source="photoshop_Images/Layer 3.png"/> </Canvas> </Grid></UserControl>
Bu makalenin de sonuna geldik başka bir makale de görüşmek üzere. Silverlight ile kalın ;)
Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com
Kaynaklar
msdn.com
silverlight.net