[Silverlight] 利用 ScrollViewer 製作 滑動效果..
2010/10/13
上一篇我寫了有關於 [Silverlight] 在Silverlight 中控制卷軸
現在就在用這案例寫下去小改寫一點就可以擁有滑動的效果..
一樣介紹一下畫面配置..
這一次不同的是.. btnUp 和 btnDown 不是透過Click 而是透過MouseEnter 還有 MouseLeave
XAML Code 如下:
<UserControl x:Class="StackPanelDemo1.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="600" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded"> <ScrollViewer Name="scrollViewer1" VerticalScrollBarVisibility="Hidden" VerticalAlignment="Top" HorizontalAlignment="Left" Height="600" Width="251" Margin="0,0,148,0"> <StackPanel Name="stkpnlImage" /> </ScrollViewer> <Button Content="往上" Height="23" HorizontalAlignment="Left" Margin="286,136,0,0" Name="btnUp" VerticalAlignment="Top" Width="75" FontSize="14" MouseEnter="btnUp_MouseEnter" MouseLeave="btnUp_MouseLeave" /> <Button Content="往下" FontSize="14" Height="23" HorizontalAlignment="Left" Margin="286,231,0,0" Name="btnDown" VerticalAlignment="Top" Width="75" MouseEnter="btnDown_MouseEnter" MouseLeave="btnDown_MouseLeave" /> </Grid> </UserControl>
我把 btnUp and btnDown 加入了 MouseEnter 還有 MouseLeave事件..
我講解 btnDown就好了…
首先 我宣告一個
private DispatcherTimer tmrDown;
這就像是timer 的東西..
別忘記要先
using System.Windows.Threading;
在LayoutRoot Loaded 把它給 initialize 起來
tmrDown=new DispatcherTimer(); tmrDown.Interval = new TimeSpan(500); tmrDown.Tick += tmrDown_Tick;
void tmrDown_Tick(object sender, EventArgs e) { scrollViewer1.ScrollToVerticalOffset(scrollViewer1.VerticalOffset + 10); }
這樣我們只需要去設定 btnDown 滑鼠進入時候啟動 tmrDown
private void btnDown_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e) { tmrDown.Start(); }
private void btnDown_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e) { tmrDown.Stop(); }
C# Code :
using System; using System.Windows.Controls; using System.Windows.Media.Imaging; using System.Windows.Threading; namespace StackPanelDemo1 { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } private DispatcherTimer tmrDown; private DispatcherTimer tmrUp; private void LayoutRoot_Loaded(object sender, System.Windows.RoutedEventArgs e) { for(int i=0;i<=30;i++) { Image imgItem = new Image(); imgItem.Width = 100; imgItem.Height = 100; //如果是雙數就放另外一張圖 if(i%2==0) { imgItem.Source = (new BitmapImage(new Uri("a.jpg", UriKind.Relative))); } else { imgItem.Source = (new BitmapImage(new Uri("b.jpg", UriKind.Relative))); } this.stkpnlImage.Children.Add(imgItem); } //Init tmrDown tmrDown=new DispatcherTimer(); //每500毫秒跑一次 tmrDown.Interval = new TimeSpan(500); //加入每次tick的事件 tmrDown.Tick += tmrDown_Tick; tmrUp=new DispatcherTimer(); tmrUp.Interval=new TimeSpan(500); tmrUp.Tick += tmrUp_Tick; } void tmrUp_Tick(object sender, EventArgs e) { //將VerticalOffset -10 scrollViewer1.ScrollToVerticalOffset(scrollViewer1.VerticalOffset - 10); } void tmrDown_Tick(object sender, EventArgs e) { //將 VerticalOffset +10 就會往下 scrollViewer1.ScrollToVerticalOffset(scrollViewer1.VerticalOffset + 10); } //向下的滑鼠進入事件 private void btnDown_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e) { tmrDown.Start(); } //向下的滑鼠移開事件 private void btnDown_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e) { tmrDown.Stop(); } //向上的滑鼠進入事件 private void btnUp_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e) { tmrUp.Start(); } //向上的滑鼠移開事件 private void btnUp_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e) { tmrUp.Stop(); } } }
預覽結果:
讚一下
檔案下載:
標籤:
視覺設計,
程式心理學,
Silverlight
|
This entry was posted on 下午4:12
and is filed under
視覺設計
,
程式心理學
,
Silverlight
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
訂閱:
張貼留言 (Atom)
0 意見:
張貼留言