稳扎稳打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>

系列文章导航:

稳扎稳打Silverlight(1) - 1.0实例之电子

稳扎稳打Silverlight(2) - 1.0实例之支持录音和回放的钢琴(Silverlight+ASP.NET AJAX+DLINQ)

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


Default.ASPx

 

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile
="Default.ASPx.cs"
    Inherits
="_10_Clock_Default" Title="电子" 
%>

<ASP:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

    
<script type="text/Javascript" src="../Silverlight.js"></script>

    
<script type="text/Javascript" src="Default.ASPx.js"></script>

    
<script type="text/Javascript" src="Clock.xaml.js"></script>

    
<script type="text/Javascript" src="Clock.js"></script>

    
<style type="text/css">
        .silverlightHost
        
{
            height
: 150px;
            width
: 180px;
        
}

    
</style>
</ASP:Content>
<ASP:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    
<div id="SilverlightControlHost" class="silverlightHost">

        
<script type="text/Javascript">
            createSilverlight();
        
</script>

    
</div>
</ASP:Content>

NET技术稳扎稳打Silverlight(1) - 1.0实例之电子表,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。