[Silverlight] 點擊圖片用ChildWindow顯示 for Kinki學妹
2010/10/14
最近忙到飛天... 但是出來混得遲早要還...
欠Kinki學妹一個範例...
學妹跟我說: 他有幾張圖，然後需要點擊圖片之後會讓圖片彈出來，並且有遮罩..
我做的方式，不一定是最好的，因為其他作法Code會很多..
所以我想了一個比較簡單的方法…
在UI 界有句話說得好..效果越好工越多..
如果有前輩看到覺得有更好的做法而且簡單.. 可以鞭打我..
但是請小力一點...(淚奔... 首先我先建立四張圖片.. XAML Code 如下:
<UserControl x:Class="ForKinki1014.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="600">
<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
<Image Height="150" HorizontalAlignment="Left" Margin="343,260,0,0" Name="image1" Source="wp71.jpg" Stretch="Fill" VerticalAlignment="Top" Width="200" />
<Image Height="150" HorizontalAlignment="Left" Margin="343,79,0,0" Name="image2" Source="wp72.jpg" Stretch="Fill" VerticalAlignment="Top" Width="200" />
<Image Height="150" HorizontalAlignment="Left" Margin="90,260,0,0" Name="image3" Source="wp73.jpg" Stretch="Fill" VerticalAlignment="Top" Width="200" />
<Image Height="150" HorizontalAlignment="Left" Margin="90,79,0,0" Name="image4" Source="wp74.jpg" Stretch="Fill" VerticalAlignment="Top" Width="200" />
</Grid>
</UserControl>
畫面如下:
再來建立一個ChildWindow
對專案案滑鼠右鍵Add New Item
選擇ChildWindows
其中我命名叫做 ImageShowItem.xaml
建立之後他預設會有一個 OK 還有 Cancel 的按鈕 …
我把它拿掉之後放入一個Image 物件 名為 imgMain 用來裝圖片…
XAML Code 如下:
<controls:ChildWindow x:Class="ForKinki1014.ImageShowItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="300" Height="300"
Title="ImageShowItem">
<Grid x:Name="LayoutRoot" Margin="2">
<Image Height="261" HorizontalAlignment="Left" Name="imgMain" Stretch="Fill" VerticalAlignment="Top" Width="278" />
</Grid>
</controls:ChildWindow>
現在回到 MainPage.xaml 專案
我在 LayoutRoot 的Loaded 加入 四個圖片的MouseLeftButtonDown 事件..
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{image1.MouseLeftButtonDown += images_MouseLeftButtonDown;
image2.MouseLeftButtonDown += images_MouseLeftButtonDown;
image3.MouseLeftButtonDown += images_MouseLeftButtonDown;
image4.MouseLeftButtonDown += images_MouseLeftButtonDown;
}
插入的 images_MouseLeftButtonDown 的事件
private void images_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ImageShowItem child = new ImageShowItem();//垂直對上對齊child.VerticalAlignment = VerticalAlignment.Top;
//水平至左對其child.HorizontalAlignment = HorizontalAlignment.Left;
//將ChildWindows 中的那張圖 設定成點擊的圖片child.imgMain.Source = (sender as Image).Source;//特地處理如果出現在左邊邊界或是上方邊界 就不如讓他貼齊double childDisplayX = (e.GetPosition(this).X - child.Width / 2 < 0)
? 0
: e.GetPosition(this).X - child.Width / 2;double childDisplayY = (e.GetPosition(this).Y - child.Height / 2 < 0)
? 0
: e.GetPosition(this).Y - child.Height / 2;//設定邊界child.Margin = new Thickness(childDisplayX, childDisplayY, 0, 0);child.Show();
}
這邊有一些地方要注意..
1.我只有處理左邊跟上面超過的問題，沒有處理左邊跟下面，我在寫Blog才發現..學長懶得加拉..自己保重..XD..
2.這方式我是用偷吃步的方式來做遮罩，用ChildWindows 時候會出現遮罩的方法來應用.
3.工越細，畫面會越好看，這是偷吃步的方法
4.為什麼要做到 e.GetPosition(this).X – child.Width /2 ，因為我取的你滑鼠之餘整個畫面的座標位置
讓ChildWindows 彈出位置在你點擊的中心，所以會這樣計算彈出的X and Y ..
最近真的爆忙..拖到現在才給你..Sorry拉..^^..有問題再msn問我吧…XD
預覽:
讚一下:
檔案下載:
訂閱：
張貼留言 (Atom)
0 意見:
張貼留言