Dyson's Notebook: 2月 2009

2009年2月27日

Silverlight Storyboard Animation

有時候我必須透過程式直接產生物件，並加入動畫的效果，例如由網路讀取使用者的相簿數量，然後在相簿出現的時後，產生移動或淡出的特效。下面的程式碼可以幫助學會 Storyboard 的使用，其中，特別要注意的就是 PropertyPath 的建立。

 
for (int i = 0; i < inData.Albums.Count; i++ )
{
IAlbumData albumData = inData.Albums[i];
Album newAlbum = new Album();
m_AlbumList.Add(newAlbum);

Canvas.SetLeft(newAlbum, 20 + 30 * i);

this.LayoutRoot.Children.Add(newAlbum);
newAlbum.Click += new RoutedEventHandler(newAlbum_Click);

TranslateTransform translate = new TranslateTransform();
newAlbum.RenderTransform = translate;

Storyboard sb = new Storyboard();

DoubleAnimation moveAnimation = new DoubleAnimation();
moveAnimation.From = 0;
moveAnimation.To = 20 + 50 * i;
Duration dur = TimeSpan.FromSeconds(0.5);
moveAnimation.Duration = dur;
Storyboard.SetTarget(moveAnimation, translate);
Storyboard.SetTargetProperty(moveAnimation, new PropertyPath(TranslateTransform.XProperty));
sb.Children.Add(moveAnimation);
sb.Begin();
}

2009年2月13日

Silverlight Page Turn

使用 Silverlight 產生翻頁的功能。效果與常見到的 Flash 相似，有柔軟的翻頁效果，直接點選，則以動畫方式呈現。

[refernece]
WPF and Silverlight BookControls: http://www.codeplex.com/wpfbookcontrol

以下是先前找到
Silverlight 1.0: http://msdn.microsoft.com/zh-tw/magazine/cc507644.aspx
Silverlight 2.0: http://blogs.msdn.com/deviations/archive/2008/10/06/silverlight-2-beta-2-page-turn.aspx

2009年2月12日

Silverlight Database Deep Zoom

把 Deep Zoom Image 存取到 database 上的方法。

This article shows how to store a Deep Zoom image in a database,
and how to retrieve the data for display in a Silverlight app.

[reference]http://www.codeproject.com/KB/silverlight/DatabaseDeepZoom.aspx

Silverlight Shrink Photo for Web

當 user 將照片上傳到 server 時，為了避免檔案過大，通常需要將圖檔縮小後上傳，這個範例，便是提供這樣的功能。 [reference] http://www.codeproject.com/KB/silverlight/ImageShrinker.aspx

Silverlight and WCF

Silverlight 是在 client 上執行的程式，因此需要透過 WCF 與 Server 整合，以下是 John 的文章。 [reference] http://john-publish.blogspot.com/2008/08/silverlight-2-17wcfserver.html

2009年2月10日

Silverlight File Upload

如果要利用 Silverlight 設計一個相簿的編輯工具，
你可能需要將使用者的照片上傳到 server 上。
要在 client 端選擇上傳的 file，可以使用 OpenFileDialog

OpenFileDialog dlg = new OpenFileDialog();
dlg.Multiselect = false;
dlg.Filter = "All files (*.*)*.*JPG Images (*.jpg)*.jpg";
bool? retval = dlg.ShowDialog();

if (retval != null && retval == true) 
{
    string fileName = dlg.File.Name;
    UploadFile(fileName, dlg.File.OpenRead());
}

接著，利用 WebClient 來上傳檔案

private void UploadFile(string fileName, Stream data)
{
    UriBuilder ub = new UriBuilder("http://localhost:22792/FileUpload/receiver.ashx");
    ub.Query = string.Format("filename={0}", fileName);
    WebClient c = new WebClient();
    c.OpenWriteCompleted += (sender, e) =>
    {
        PushData(data, e.Result); // 將 data 複製到 e.Result
        e.Result.Close();
        data.Close();
    };
    c.OpenWriteAsync(ub.Uri);
}

[reference]
http://silverlight.net/learn/learnvideo.aspx?video=69793

Silverlight Hyperlink

在 Silverlight 中，可以使用 HyperlinkButton，來連結到其他的網頁。 example: <HyperlinkButton Content="Click Me" NavigateUri="http://www.silverlight.net" / > 同時，可以利用 TargetName="_self" 與 "_blank" 來決定以目前或新的視窗來顯示連結網頁。 example: <HyperlinkButton Content="Click Me" TargetName="_blank" NavigateUri="http://www.silverlight.net" / > 如果要以圖片或其他的形狀來呈現連結，可以參考下列的範例。 example: <HyperlinkButton NavigateUri="http://www.silverlight.net"> <HyperlinkButton.Content> <Canvas> <Rectangle Width="100" Height="100" Fill="Black" Stroke="Blue" StrokeThickness="2" / > <TextBlock Canvas.Top="40" Canvas.Left="25">Click Me</TextBlock> </Canvas> </HyperlinkButton.Content> </HyperlinkButton> 如果是在程式中，要連接到其他網頁，則可以透過 Navigate 來處理 example: HtmlPage.Window.Navigate(new Uri(uri), "_blank"); [reference] http://silverlight.net/blogs/msnow/archive/2008/10/16/silverlight-tip-of-the-day-62-how-to-create-a-hyperlink.aspx http://msdn.microsoft.com/zh-tw/library/system.windows.controls.hyperlinkbutton.targetname(VS.95).aspx

Dyson's Notebook