从零开始Windows Phone开发(四):第四个练习Stopwatch

原创 2013年12月02日 22:33:36

今天的任务是完成一个Stopwatch的练习,涉及到的知识点有:

  1. User Control的设计和使用
  2. 进度条的使用
  3. 网格视图
  4. 动态更改/添加控件

1 User Control的设计和使用

1.1 添加自己的User Control

右击解决方案,选择添加新建项,选择User Control,就得到了一个.xaml文件盒一个.cs文件,下面就开始设计这个自定义控件。

1.2 设计自己的User Control

<UserControl x:Class="Stopwatch.WindowsStopWatch"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    VerticalAlignment="Center">
    <StackPanel x:Name="LayoutRoot" Orientation="Horizontal"></StackPanel>
</UserControl>

去掉不必要的所有元素,为了将来放进主界面后能与主界面的风格保持一致。

using System;
using System.Windows;
using System.Windows.Controls;
using System.ComponentModel;

namespace Stopwatch
{
    public partial class WindowsStopWatch : UserControl
    {
        TimeSpan time;
        int digitWidth;
        public WindowsStopWatch()
        {
            InitializeComponent();

            if (DesignerProperties.IsInDesignTool)
                this.LayoutRoot.Children.Add(new TextBlock { Text = "0:00.0"});
        }

        public int DigitWidth
        { 
            get { return this.digitWidth; }
            set
            {
                this.digitWidth = value;
                this.Time = this.time;
            }
        }

        public TimeSpan Time 
        {
            get { return this.time; }
            //在set中需要更新每次时间变化的界面
            set
            {
                //更新前先清除原先的内容
                this.LayoutRoot.Children.Clear();

                //分别解析出分钟,秒,和毫秒
                string strMinutes = value.Minutes.ToString();
                for (int i = 0; i < strMinutes.Length; i++)
                {
                    AddDigits(strMinutes[i].ToString());
                }

                this.LayoutRoot.Children.Add(new TextBlock { Text = ":" });

                AddDigits((value.Seconds / 10).ToString());
                AddDigits((value.Seconds % 10).ToString());

                this.LayoutRoot.Children.Add(new TextBlock { Text = "." });

                AddDigits((value.Milliseconds / 100).ToString());

                this.time = value;                
            }
        }

        //向StackPanel中添加数字
        public void AddDigits(string digitString)
        {
            TextBlock tb = new TextBlock { Text = digitString, HorizontalAlignment = System.Windows.HorizontalAlignment.Center };
            this.LayoutRoot.Children.Add(tb);
        }
    }
}

1.3 使用自己的User Control

在主页面的命名空间生命中添加对自身程序的引用(项目名称叫做Stopwatch)

    xmlns:local="clr-namespace:Stopwatch"

接下来就可以在代码中使用local域中的控件来使用了。

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <local:WindowsStopWatch />
        </Grid>

2 设计主界面

    <Grid x:Name="LayoutRoot" Background="Transparent" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="4*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="3*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        
        <!--Title -->
        <TextBlock Grid.ColumnSpan="2" Text="STOPWATCH"  FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                    FontSize="{StaticResource PhoneFontSizeMedium}"/>
        <!--Current lap -->
        <TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="Current Lap" TextAlignment="Right" FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                    FontSize="{StaticResource PhoneFontSizeMedium}"/>
        
        <!--lap time-->
        <local:WindowsStopWatch x:Name="CurrentLapTimeDisplay" Grid.Row="2" Grid.ColumnSpan="2" FontSize="{StaticResource PhoneFontSizeLarge}" HorizontalAlignment="Right"
                                 DigitWidth="18"/> 
        
        <!--Progress Bar-->
        <ProgressBar x:Name="LapProgressBar" Grid.Row="3" Grid.ColumnSpan="2" IsIndeterminate="False" VerticalAlignment="Top" Foreground="{StaticResource PhoneAccentBrush}" />

        <!--Total time-->
        <local:WindowsStopWatch x:Name="TotalTimeDisplay" Grid.Row="4" Grid.ColumnSpan="2" FontSize="108" FontFamily="Segoe WP Black"  HorizontalAlignment="Center" Foreground="{StaticResource PhoneAccentBrush}"/>
        
        <!--four buttons-->
        <Button Name="StartButton" Grid.Row="5" Grid.Column="0"  Content="start" Foreground="White" Background="{StaticResource PhoneAccentBrush}" Click="StartButton_Click"/>
        <Button Name="StopButton" Grid.Row="5" Grid.Column="0"  Content="stop" Foreground="White" Background="{StaticResource PhoneAccentBrush}" Click="StartButton_Click" Visibility="Collapsed"/>
        <Button Name="LapButton" Grid.Row="5" Grid.Column="1"  Content="lap" Foreground="White" Background="{StaticResource PhoneAccentBrush}" Click="StartButton_Click"/>
        <Button Name="ResetButton" Grid.Row="5" Grid.Column="1"  Content="reset" Foreground="White" Background="{StaticResource PhoneAccentBrush}" Click="StartButton_Click" Visibility="Collapsed"/>
        
        <!--list of laps-->
        <ScrollViewer Grid.Row="6" Grid.ColumnSpan="2" FontSize="{StaticResource PhoneFontSizeLarge}">
            <StackPanel x:Name="ListStackPanel" />
        </ScrollViewer>
    </Grid>

效果是这样的:

3 实现动态替换应用栏图标

引入命名空间:

using Microsoft.Phone.Shell;
定义IApplicationBarIconButton对象:

IApplicationBarIconButton LockScreenButton;
使用该对象操作

this.LockScreenButton = this.ApplicationBar.Buttons[0] as IApplicationBarIconButton;

以及

            if (this.LockScreenButton.Text == "Unlock")
            {
                this.LockScreenButton.IconUri = new Uri("/Images/appbar.transport.pause.rest.png", UriKind.Relative);
                this.LockScreenButton.Text = "Lock";
            }

4 实现时间业务

        void timer_Tick(object sender, EventArgs e)
        {
            //throw new NotImplementedException();
            TimeSpan delta = DateTime.UtcNow - this.PreviousTick;
            this.PreviousTick += delta;

            this.TotalTime += delta;
            this.CurrentLapTime += delta;

            ShowCurrentTime();
        }

        public void InsertLapstoList()
        {
            int lapNumber = this.ListStackPanel.Children.Count + 1;
            Grid grid = new Grid();
            grid.Children.Add(new TextBlock { Text = "lap " + lapNumber, Margin = new Thickness( 24, 0, 0, 0 ) });

            WindowsStopWatch watch = new WindowsStopWatch { Time = this.CurrentLapTime, HorizontalAlignment = System.Windows.HorizontalAlignment.Right, DigitWidth = 18, Margin = new Thickness ( 0, 0, 24, 0 ) };
            grid.Children.Add(watch);

            this.ListStackPanel.Children.Insert(0, grid);
        }

        public void ShowCurrentTime()
        {
            this.TotalTimeDisplay.Time = this.TotalTime;
            this.CurrentLapTimeDisplay.Time = this.CurrentLapTime;

            this.LapProgressBar.Maximum = this.PreviousLapTime.TotalSeconds;
            this.LapProgressBar.Value = this.CurrentLapTime.TotalSeconds;
        }


win 10 mobile VS2015 开发环境搭建【App开发】

下载VS2015 community英文版,并安装,选择安装windows 10 mobile emulator,模拟器启动后如下:...
  • code_style
  • code_style
  • 2015年10月21日 16:46
  • 3572

Windows Phone下的Socket编程

讨论下有关于Windows Phone下的Socket编程方面的知识。 Socket就是通常所称的套接字,用于描述IP地址和端口,是一个通信链的句柄。应用程序通常通过Socket向网络发出请求或者应...
  • two_bin
  • two_bin
  • 2013年03月16日 23:04
  • 1002

Windows PHONE 7从零开始开发

对于有SL的基础来说,针对SL开发。   http://schemas.microsoft.com/windowsphone/2009/deployment" AppPlatformVersi...
  • wlanye
  • wlanye
  • 2011年11月30日 13:06
  • 612

Windows 8.1 下 Windows Phone 开发环境的搭建流程

转载:Windows 8.1 下 Windows Phone 开发环境的搭建流程 Windows 8.1 下 Windows Phone 开发环境的搭建流程...
  • LH806732
  • LH806732
  • 2014年04月14日 19:24
  • 3802

Windows Phone 8 开发快速入门(八)

 主要内容:推送通知 推送通知 推送通知为开发者提供了定期将信息传递给应用的功能,即使应用没有启动。图块可以为用户显示最关注的信息 推送通知数据流 Notifications ser...
  • u011597415
  • u011597415
  • 2014年06月21日 14:43
  • 566

从零开始Windows Phone开发(三):第三个练习-IN_CASE_OF_EMERGENCY

今天的练习是创建一个“紧急状况”的项目,涉及到的知识点有:屏幕的旋转,SIP(屏幕键盘)及处理按键时间,滚动视图,电话启动器。 1 界面设计 我们希望设计出来的界面是这样的: 当单击页面红色...
  • asinta2011
  • asinta2011
  • 2013年11月28日 21:20
  • 603

从零开始Windows Phone开发(二):第二个练习-Flashlight

今天我们在WP上来实现一个“闪光灯”,WP7上是不能控制手机自带的硬件闪光灯的,但是我们可以通过将手机屏幕设置成全白色来模拟闪光灯的效果。在这个练习里我们将实现若干种不同颜色的闪光灯,以及SOS莫斯代...
  • asinta2011
  • asinta2011
  • 2013年11月27日 22:20
  • 682

从零开始Windows Phone开发(一):综述及第一个练习

写在开头:本系列文章基于Adam Nathan的书《101 Windows Phone 7 Apps》,需要有一定的C#基础,对XAML语法和Silverlight的了解,以及对WP编程一个总体上的认...
  • asinta2011
  • asinta2011
  • 2013年11月26日 22:13
  • 746

从零开始Windows Phone开发(五):第五个练习——BabySignLanguage

本来按顺序应该轮到那个直尺的应用了,但是昨晚实在是忙活了半天还是没搞出来,留着继续研究研究。。。今天开始的应用算是到目前为止实用技术最多的一个。 涉及到的知识点有: Data BindingData...
  • asinta2011
  • asinta2011
  • 2013年12月04日 21:46
  • 784

注册成为Windows Phone开发者并且解锁Windows Phone 8.1手机

上篇文章介绍了如何使用Qt Creator和Visual Studio构建Windows Phone 8.1应用并且在Windows Phone 8.1模拟器上运行。当然了,能够运行在模拟器只能算第一...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2014年08月28日 13:02
  • 3699
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:从零开始Windows Phone开发(四):第四个练习Stopwatch
举报原因:
原因补充:

(最多只允许输入30个字)