[Silverlight] 利用 ScrollViewer 製作 滑動效果..

2010/10/13

上一篇我寫了有關於 [Silverlight] 在Silverlight 中控制卷軸
現在就在用這案例寫下去小改寫一點就可以擁有滑動的效果..

一樣介紹一下畫面配置..
sshot-38


這一次不同的是.. 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;

我們設定讓他在每一次tick(0.5秒) 中去把卷軸 VerticalOffset +10

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();
}

而移出btnDown 時候停止 tmrDown
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();
        }
    }
}



預覽結果:

讚一下



檔案下載:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.