穩扎穩打Silverlight(1) - 1.0實例之電子表

作者: webabcd  來源: 博客園  發布時間: 2008-10-27 14:40  閱讀: 8694 次  推薦: 0   原文鏈接   [收藏]  
 
[1] 穩扎穩打Silverlight(1) - 1.0實例之電子表
[2] 穩扎穩打Silverlight(1) - 1.0實例之電子表

系列文章導航：

穩扎穩打Silverlight(1) - 1.0實例之電子表

穩扎穩打Silverlight(2) - 1.0實例之支持錄音和回放的鋼琴(Silverlight+ASP.NET AJAX+DLINQ)

穩扎穩打Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox

 

介紹
用Silverlight 1.0實現一個基于客戶端系統時間的電子表。
參考：http://silverlight.net/community/communitygallery.aspx

示例
Clock.xaml（用Expression Blend開發）

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="180" Height="150"
    Background="#0030628D"
    x:Name="Page" Loaded="enableClock"
    >
    <Rectangle x:Name="Frame" Width="180" Height="150" Stroke="#FF000000"
StrokeThickness="1" RadiusX="20" RadiusY="15">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1.1" StartPoint="0.5,-0.1">
                <GradientStop Color="#FF259888" Offset="0"/>
                <GradientStop Color="#FF259888" Offset="0.981"/>
                <GradientStop Color="#FFC87947" Offset="0.416"/>
                <GradientStop Color="#FFC87947" Offset="0.636"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle x:Name="Panel" Width="164" Height="134" Fill="#7F91B52C" Stroke="#FFA2AEBF"
 RadiusX="50" RadiusY="15" Canvas.Left="8" Canvas.Top="8" StrokeThickness="2"/>

    <Path x:Name="Line1" Width="163" Height="1" Fill="#FF100888" Stretch="Fill"
Stroke="#FF1B510C" Canvas.Left="8" Canvas.Top="92"
Data="M33.50029,83.29705 L161.89657,83.297051"/>
    <Path x:Name="Line2" Width="1" Height="49" Fill="#FF100888" Stretch="Fill"
Stroke="#FF1B510C" Canvas.Left="63" Canvas.Top="92"
Data="M81.450752,138.29705 L81.450752,90.29705"/>
    <Path x:Name="Line3" Width="1" Height="49" Fill="#FF100888" Stretch="Fill"
Stroke="#FF1B510C" Canvas.Left="119" Canvas.Top="92"
Data="M118.30501,164.29698 L118.30501,116.29699"/>
    <TextBlock x:Name="Month" Width="16" Height="19" Canvas.Left="32.5" Canvas.Top="92"
TextWrapping="Wrap" Foreground="#FF100888" Text="M"/>
    <TextBlock Width="16" Height="19" Canvas.Left="87" Canvas.Top="92" TextWrapping="Wrap"
x:Name="Day" Foreground="#FF100888" Text="D"/>
    <TextBlock Width="16" Height="19" Canvas.Left="136" Canvas.Top="92" TextWrapping="Wrap"
x:Name="Week" Foreground="#FF100888" Text="W"/>

    <TextBlock x:Name="txtMonth" Width="19" Height="19" Canvas.Left="29" Canvas.Top="111"
TextWrapping="Wrap" Foreground="#FF100888" Text="12"/>
    <TextBlock x:Name="txtDay" Width="20.5" Height="19" Canvas.Left="83.5" Canvas.Top="111"
TextWrapping="Wrap" Foreground="#FF100888" Text="31"/>
    <TextBlock x:Name="txtWeek" Width="32.5" Height="19" Canvas.Left="130" Canvas.Top="111"
TextWrapping="Wrap" Foreground="#FF100888" Text="Sun"/>

    <TextBlock x:Name="txtHour" Width="48" Height="48" Canvas.Left="14.5" Canvas.Top="38"
TextWrapping="Wrap" FontSize="36" Foreground="#FF100888" Text="23"/>
    <TextBlock x:Name="txtMinute" Width="48" Height="48" Canvas.Left="68.5" Canvas.Top="38"
TextWrapping="Wrap" FontSize="36" Foreground="#FF100888" Text="59"/>
    <TextBlock x:Name="txtSecond" Width="49" Height="48" Canvas.Left="122" Canvas.Top="38"
TextWrapping="Wrap" FontSize="36" Foreground="#FF100888" Text="59"/>

    <TextBlock x:Name="Colon1" Width="9.5" Height="27" Canvas.Left="62.5" Canvas.Top="48"
TextWrapping="Wrap" Foreground="#FF100888" Text=":" FontSize="20"/>
    <TextBlock x:Name="Colon2" Width="12" Height="27" Canvas.Left="116.5" Canvas.Top="48"
TextWrapping="Wrap" Foreground="#FF100888" Text=":" FontSize="20"/>

    <TextBlock x:Name="Copyright" Width="88" Height="16" Canvas.Left="16" TextWrapping="Wrap"
FontSize="12" Canvas.Top="22" Foreground="#FF100888" Text="webabcd clock"
MouseLeftButtonDown="MouseLeftButtonDown" MouseMove="MouseMove"
MouseLeave="MouseLeave"/>
    <TextBlock x:Name="FullScreen" Width="88" Height="16" Canvas.Left="106"
TextWrapping="Wrap" FontSize="12" Canvas.Top="22" Foreground="#FF100888" Text="FullScreen"
MouseLeftButtonDown="toggle_fullScreen" MouseMove="MouseMove" MouseLeave="MouseLeave"/>
</Canvas>


Clock.xaml.js

if (!window.Clock)
    window.Clock = {};

Clock.Page = function() 
{
}

Clock.Page.prototype =
{
    handleLoad: function(control, userContext, rootElement) 
    {
        this.control = control;
        
        // Sample event hookup:    
        rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this,
this.handleMouseDown));
    },
    
    // Sample event handler
    handleMouseDown: function(sender, eventArgs) 
    {
        // The following line of code shows how to find an element by name and call a method on it.
        // this.control.content.findName("Timeline1").Begin();
    }
}

// TextBlock的MouseLeftButtonDown調用的方法
function MouseLeftButtonDown(sender, args) 
{
    window.open("http://webabcd.cnblogs.com");
}

// TextBlock的MouseMove調用的方法
function MouseMove(sender, args) 
{
    // TextBlock.foreground
    sender.foreground = "red";
    // TextBlock.textDecorations
    sender.textDecorations = "underline";
}

// TextBlock的MouseLeave調用的方法
function MouseLeave(sender, args) 
{
    // TextBlock.foreground
    sender.foreground = "#FF100888";
    // TextBlock.textDecorations
    sender.textDecorations = "none";
}

 

繼續>>下一頁
[第1頁][第2頁]
0
0
 
標簽：Silverlight
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()