08. Web大前端时期之:HTML5+CSS3入门连串 ~ QQ空间时间轴

在线演示地址:Silverlight+WCF 新手实例 象棋
在线演示

Web大前端时期之:HTML5+CSS3入门种类:http://www.cnblogs.com/dunitian/p/5121725.html

演示已更新到此节介绍:Silverlight+WCF 新手实例 象棋
介绍III(二十三)

 大前端序列,主要就是应用CSS3.0来落实,注释小编一度打在代码里面了,直接看代码就足以了,后边会说一下CSS3.0体系,那么些就当贰个引入吧:

 

 

那节大家来促成在线用户区的显得,把上两节介绍那张图再弄来,看在线用户区是哪块:

简单易行版本:

葡京在线开户 1

葡京在线开户 2葡京在线开户 3

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            font-size: 100%;
            color: #7f8c97;
            font-family: '微软雅黑';
            background-color: #e9f0f5;
        }
        /*容器*/
        .paw-container {
            width: 90%;
            margin: 0 auto;
        }
        /*创建一条垂直线*/
        #paw-timeline {
            position: relative;
            padding: 2em 0;
            margin-top: 2em;
            margin-bottom: 2em;
        }

            #paw-timeline::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                height: 100%;
                width: 4px;
                background: rgba(0,0,0,0.1);
            }
        /*循环小容器*/
        .paw-timeline-block {
            position: relative;
            margin: 3em 0;
        }

            .paw-timeline-block:first-child {
                margin-top: 0;
            }

            .paw-timeline-block:last-child {
                margin-bottom: 0;
            }
        /*轴上的图标*/
        .paw-timeline-icon {
            position: absolute;
            top: 0;
            left: 50%;
            width: 1em;
            height: 1em;
            margin-left: -0.5em;
            border-radius: 50%;
            background: white;
            box-shadow: 0 0 0 3px rgba(9, 229, 34,0.5), 0 0 0 3px rgb(255,255,255);
        }
            /*光晕*/
            .paw-timeline-icon:hover {
                box-shadow: 0 0 0 5px rgba(9, 229, 34,0.5), 0 0 0 3px rgb(255,255,255);
            }
        /*日期*/
        .paw-timeline-datetime {
            position: absolute;
            margin-left: -6em;
            margin-top: -2em;
            width: 7em;
            font-weight: bold;
        }
        /*内容*/
        .paw-timeline-content {
            width: 45%;
            margin-left: 0;
            padding: 1em;
            background: white;
            border-radius: 0.5em;
            box-shadow: 0 3px 0 #d7e4ed;
            overflow: hidden;
            /*不加这个小尖角容易有点问题*/
            position: relative;
        }
            /*第一个元素*/
            .paw-timeline-content:first-child {
                margin-top: 0;
            }
            /*最后一个元素*/
            .paw-timeline-content:last-child {
                margin-bottom: 0;
            }
            /*标题颜色*/
            .paw-timeline-content h3 {
                color: #303e49;
            }
            /*阅读更多 按钮*/
            .paw-timeline-content .paw-read-more {
                float: left;
                color: white;
                border-radius: 0.25em;
                padding: 0.7em 1em;
                background-color: #424242;
                text-decoration: none;
            }
                /*阅读更多 按钮特效*/
                .paw-timeline-content .paw-read-more:hover {
                    background: #acb7c0;
                }
        /*小尖角*/
        .paw-timeline-main::before {
            content: '';
            top: 16px;
            height: 0;
            width: 0;
            left: 100%;
            position: absolute;
            border-left: 7px solid white;
            border: 7px solid transparent;
        }
        /*偶数个设置新样式*/
        .paw-timeline-content:nth-child(2n) {
            float: right;
        }
        /*清除浮动*/
        .paw-timeline-content:nth-child(2n+1) {
            clear: both;
        }

        .paw-timeline-content:nth-child(2n) .paw-read-more {
            float: right;
        }
        /*小尖角反向*/
        .paw-timeline-content:nth-child(2n) .paw-timeline-main::before {
            content: '';
            left: auto;
            right: 100%;
            border: 7px solid transparent;
            border-right: 7px solid white;
        }
    </style>
</head>
<body>
    <section id="paw-timeline" class="paw-container">
        <header><h2>2016年</h2></header>
        <!--循环-->
        <div>
            <h3>03月</h3>
            <!--循环-->
            <div class="paw-timeline-block">
                <!--时间-->
                <div class="paw-timeline-icon">
                    2016-03-17
                </div>
                <!--循环内容-->
                <div class="paw-timeline-content">
                    <header class="paw-timeline-main">
                        <h3>标题</h3>
                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>
                    </header>
                </div>
                <div class="paw-timeline-content">
                    <header class="paw-timeline-main">
                        <h3>标题</h3>
                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>
                    </header>
                </div>
                <div class="paw-timeline-content">
                    <header class="paw-timeline-main">
                        <h3>标题</h3>
                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>
                    </header>
                </div>
                <div class="paw-timeline-content">
                    <header class="paw-timeline-main">
                        <h3>标题</h3>
                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>
                    </header>
                </div>
            </div>
            <div class="paw-timeline-block">
                <!--时间-->
                <div class="paw-timeline-icon">
                    2016-03-16
                </div>
                <!--循环内容-->
                <div class="paw-timeline-content">
                    <header class="paw-timeline-main">
                        <h3>标题</h3>
                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>
                    </header>
                </div>
                <div class="paw-timeline-content">
                    <header class="paw-timeline-main">
                        <h3>标题</h3>
                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>
                    </header>
                </div>
                <div class="paw-timeline-content">
                    <header class="paw-timeline-main">
                        <h3>标题</h3>
                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>
                    </header>
                </div>
                <div class="paw-timeline-content">
                    <header class="paw-timeline-main">
                        <h3>标题</h3>
                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>
                    </header>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

一眼扫过看到了,是第六区,未来初步了,仍旧上次下棋区域一样的逻辑,往Index.xaml里拉1个Board控件,然后后台写两行代码代码一下。

View Code

当然了,得新建3个用户控件:就叫:OnlineUser.xaml,好,空白的在线用户建完了,上边照旧两步落成加载:

逆天版本:在线浏览:http://dnt.dkill.net/dnt/pawchina/temp/note.html

1:界面拖壹个Board到Index.xaml,今后界面上就有两行Board了:

 note.html

第1、个onlineUserBoard就是新添加进去的了。宽和高设置为230*260了。

葡京在线开户 4葡京在线开户 5

葡京在线开户 6葡京在线开户 7

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>欢迎来到PAW时光日记</title>
    <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
    <link rel="stylesheet" href="assets/css/common.css" />
    <link rel="stylesheet" href="assets/css/note.css" />
</head>
<body style="background: url('images/bg.jpg') repeat fixed center 0;">
    <div class="bg-fixed"></div>
    <!--时间轴导航-->
    <nav>
        <ul>
            <li>
                <a href="#2016" class="nav-year">2016年</a>
                <ul class="nav-month">
                    <li><a href="#201603">03月</a></li>
                    <li><a href="#201602">02月</a></li>
                </ul>
            </li>
            <li>
                <a href="#2015" class="nav-year">2015年</a>
                <ul class="nav-month">
                    <li><a href="#201503">03月</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <!--顶部标题-->
    <header class="time-header">
        <h1>欢迎来到PAW时光日记 Welcome to PAW the time diary</h1>
        <div class="time-header-links">
            <a class="fa fa-home" href="index.html" title="返回Home" target="_blank"></a>
            <a class="fa fa-mail-forward" href="index.html#pawnote" title="返回Note"></a>
        </div>
    </header>
    <!--每年循环-->
    <section class="paw-timeline paw-container">
        <div class="paw-timeline-icon">
            <h2><a name="2016">2016年</a></h2>
        </div>
        <!--每月循环-->
        <div class="paw-timeline-month">
            <div class="paw-timeline-icon">
                <h3><a name="201603">03月</a></h3>
            </div>
            <!--每天循环-->
            <div class="paw-timeline-block">
                <!--时间-->
                <div class="paw-timeline-icon">
                    2016-03-18
                </div>
                <!--循环内容-->
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 8" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 9" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 10" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 11" />
                    </div>
                </div>
            </div>
            <div class="paw-clear"></div>
            <!--每天循环-->
            <div class="paw-timeline-block">
                <!--时间-->
                <div class="paw-timeline-icon">
                    2016-03-17
                </div>
                <!--循环内容-->
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 12" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 13" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 14" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 15" />
                    </div>
                </div>
            </div>
            <div class="paw-clear"></div>
        </div>
        <!--每月循环-->
        <div class="paw-timeline-month">
            <div class="paw-timeline-icon">
                <h3><a name="201602">02月</a></h3>
            </div>
            <!--每天循环-->
            <div class="paw-timeline-block">
                <!--时间-->
                <div class="paw-timeline-icon">
                    2016-02-18
                </div>
                <!--循环内容-->
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 16" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 17" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 18" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 19" />
                    </div>
                </div>
            </div>
            <div class="paw-clear"></div>
            <!--每天循环-->
            <div class="paw-timeline-block">
                <!--时间-->
                <div class="paw-timeline-icon">
                    2016-02-17
                </div>
                <!--循环内容-->
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 20" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 21" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 22" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 23" />
                    </div>
                </div>
            </div>
            <div class="paw-clear"></div>
        </div>
    </section>
    <!--每年循环-->
    <section class="paw-timeline paw-container">
        <div class="paw-timeline-icon">
            <h2><a name="2015">2015年</a></h2>
        </div>
        <!--每月循环-->
        <div class="paw-timeline-month">
            <div class="paw-timeline-icon">
                <h3><a name="201503">03月</a></h3>
            </div>
            <!--每天循环-->
            <div class="paw-timeline-block">
                <!--时间-->
                <div class="paw-timeline-icon">
                    2015-03-18
                </div>
                <!--循环内容-->
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 24" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 25" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 26" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 27" />
                    </div>
                </div>
            </div>
            <div class="paw-clear"></div>
            <!--每天循环-->
            <div class="paw-timeline-block">
                <!--时间-->
                <div class="paw-timeline-icon">
                    2015-03-17
                </div>
                <!--循环内容-->
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 28" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 29" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 30" />
                    </div>
                </div>
                <div class="paw-timeline-content">
                    <a href="#" target="_blank">
                        <header class="paw-timeline-main">
                            <h3>标题</h3>
                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
                        </header>
                    </a>
                    <div>
                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="葡京在线开户 31" />
                    </div>
                </div>
            </div>
            <div class="paw-clear"></div>
        </div>
    </section>
    <hr />
    <footer class="copyright">
        Copyright &copy; 2015 All rightsAuthor:<a href="#">Paw & DNT</a>
    </footer>
    <!--返回顶部-->
    <div id="pawtop">
        <div class="top-1"></div>
        <div class="top-2"></div>
    </div>
    <!-- 脚本引入 -->
    <script src="assets/js/jquery.min.js"></script>
    <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
    <script src="assets/js/common.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.nav-month').eq(0).css('display', 'block');
        });
        $('.nav-year').click(function () {
            $('.nav-month').fadeOut();
            $(this).next('ul').css('display', 'block');
        });
    </script>
</body>
</html>

<Grid x:Name=”LayoutRoot” Background=”White”>
        <Border BorderBrush=”Silver” BorderThickness=”1″ Height=”544″ HorizontalAlignment=”Left” Margin=”10,10,0,0″ Name=”chessBoard” VerticalAlignment=”Top” Width=”522″></Border>
        <Border BorderBrush=”Silver” BorderThickness=”1″ Height=”260″ HorizontalAlignment=”Left” Margin=”756,10,0,0″ Name=”onlineUserBoard” VerticalAlignment=”Top” Width=”230″></Border>
    </Grid>

View Code

 

note.css

2:后台动态加载控件了,后台代码就两行,看今朝新加的那。

葡京在线开户 32葡京在线开户 33

葡京在线开户 34葡京在线开户 35

@import url("fonts.css");
@import url("font-awesome.min.css");

body {
    font-size: 100%;
    color: white;
    font-family: 'Source Sans Pro','微软雅黑', sans-serif;
    background-color: #e9f0f5;
}

.bg-fixed {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: url(../..icon/fixed.png) repeat;
}
/*时间轴导航*/
nav {
    right: 5%;
    z-index: 100;
    position: fixed;
    background: rgba(0,0,0,0.5);
}

ul {
    margin: 0;
    padding: 0.5em;
    list-style: none;
}

    ul a {
        color: white;
        font-family: '宋体';
        font-weight: bold;
        text-decoration: none;
    }

        ul a:hover {
            color: rgb(3, 151, 255);
        }

.nav-month {
    display: none;
}
.nav-month a{
    color:#dbdbdb;
}
.nav-month li{
    margin-bottom:0.5em;
}
.nav-month li:last-child{
    margin-bottom:0;
}
/*标题*/
.time-header {
    text-align: center;
    margin: 3em auto;
}

    .time-header h1 {
        font-weight: normal;
        letter-spacing: 0.1em;
    }

        .time-header h1 span {
            display: block;
            font-size: 60%;
            font-weight: 400;
            padding: 0.8em 0 0.5em 0;
            color: #dde1e5;
        }
/*超链接*/
.time-header-links {
    margin-top: -1em;
    margin-bottom: 0.5em;
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
    /*图标*/
    .time-header-links a {
        color: rgba(0,0,0,0.5);
        text-decoration: none;
        font-size: 1.5em;
        padding: 0.1em 0.4em;
    }

        .time-header-links a:hover {
            color: #2fa0ec;
        }
    /*中间的分隔符*/
    .time-header-links::after {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -1px;
        width: 2px;
        height: 100%;
        background: #dbdbdb;
        content: '';
        -webkit-transform: rotate3d(0,0,1,22.5deg);
        transform: rotate3d(0,0,1,22.5deg);
    }
/*容器*/
.paw-container {
    width: 90%;
    margin: 0 auto;
}
/*创建一条垂直线*/
.paw-timeline {
    position: relative;
    padding: 2em 0;
    margin-top: 2em;
    margin-bottom: 2em;
}

    .paw-timeline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        height: 100%;
        width: 4px;
        background: rgba(9, 138, 229, 0.68);
    }

/*年份容器*/
.paw-container .paw-timeline-icon h2 {
    position: absolute;
    margin-left: -1em;
    margin-top: -1.5em;
    width: 7em;
    color: rgba(0,0,0,0.7);
}
/*月份容器*/
.paw-timeline-month {
    margin-bottom: 5em;
}

    .paw-timeline-month:last-child {
        margin-bottom: -3em;
    }

    .paw-timeline-month .paw-timeline-icon {
        top: inherit;
    }

        .paw-timeline-month .paw-timeline-icon h3 {
            position: absolute;
            margin-left: -2.5em;
            margin-top: -3.5em;
            width: 7em;
            color: rgba(0,0,0,0.6);
        }
/*每天容器*/
.paw-timeline-block {
    position: relative;
    margin: 3em 0;
}

    .paw-timeline-block:first-child {
        margin-top: 0;
    }

    .paw-timeline-block:last-child {
        margin-bottom: 0;
    }
/*轴上的图标*/
.paw-timeline-icon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1em;
    height: 1em;
    margin-left: -0.5em;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 0 3px rgba(9, 138, 229, 0.68);
}
    /*光晕*/
    .paw-timeline-icon:hover {
        box-shadow: 0 0 0 5px rgba(9, 229, 34,0.5), 0 0 0 3px rgb(255,255,255);
    }
/*日期*/
.paw-timeline-datetime {
    position: absolute;
    margin-left: -5em;
    margin-top: -2em;
    width: 7em;
    font-weight: bold;
}
/*内容*/
.paw-timeline-content {
    width: 45%;
    padding: 1em;
    margin-left: 0;
    background: white;
    border-radius: 0.5em;
    box-shadow: 0 3px 0 #d7e4ed;
    /*不加这个小尖角容易有点问题*/
    position: relative;
}
    /*标题颜色*/
    .paw-timeline-content h3 {
        color: #303e49;
    }
    /*段落首行缩进*/
    .paw-timeline-content p {
        text-indent: 1em;
        line-height: 1.8em;
    }
    /*阅读更多 超链接*/
    .paw-timeline-content a {
        text-decoration: none;
        color: #7f8c97;
    }
        /*阅读更多 超链接*/
        .paw-timeline-content a:hover {
            color: #0094ff;
        }
    /*小尖角*/
    .paw-timeline-content .paw-timeline-main::before {
        content: '';
        top: 16px;
        height: 0;
        width: 0;
        left: 100%;
        position: absolute;
        border: 7px solid transparent;
        border-left: 7px solid white;
    }
/*展览图*/
.paw-timeline-block img {
    max-width: 100%;
    min-width: 100%;
}
/*偶数个设置新样式*/
.paw-timeline-content:nth-child(2n) {
    float: right;
}
/*清除浮动*/
.paw-timeline-content:nth-child(2n+1) {
    /*clear: right;*/
    margin-bottom: 2em;
}
/*小尖角反向*/
.paw-timeline-content:nth-child(2n) .paw-timeline-main::before {
    content: '';
    left: auto;
    right: 100%;
    border: 7px solid transparent;
    border-right: 7px solid white;
}

.paw-bottom-icon .paw-bottom-icon {
    top: inherit;
    bottom: 0;
}
/*动画效果*/
.paw-flash {
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
/*清除浮动*/
.paw-clear {
    clear: both;
}
/*分割线*/
hr {
    margin-top: -2em;
}
/*版权系列*/
.copyright {
    text-align: center;
    font-size: 1em;
    font-family: '微软雅黑';
}

    .copyright span {
        padding-left: 1.25em;
    }

    .copyright a {
        color: #d8d3d3;
        text-decoration: none;
    }

        .copyright a:hover {
            color: black;
        }

@media only screen and (max-width: 1170px) {
    /*时间轴*/
    .paw-timeline-icon, .paw-timeline::before {
        left: 0;
    }
    /*年份容器*/
    .paw-container .paw-timeline-icon h2 {
        margin-left: -1em;
        margin-top: -1.3em;
    }
    /*月份容器*/
    .paw-timeline-month .paw-timeline-icon h3 {
        margin-left: -0.7em;
        margin-top: -3em;
    }
    /*时间*/
    .paw-timeline-datetime {
        margin-left: 1.5em;
        margin-top: -2em;
    }

    .paw-timeline-content {
        width: 80%;
        position: relative;
        margin: 2em 3em;
    }

        .paw-timeline-content:nth-child(2n) {
            float: none;
        }

        .paw-timeline-content:nth-child(2n+1) .paw-timeline-main::before {
            right: 100%;
            left: auto;
            border: 7px solid transparent;
            border-right: 7px solid white;
        }

    .copyright span {
        display: block;
    }
}

public Index()
        {
            InitializeComponent();
            Chess chessControl=new Chess();//实例化控件
            chessBoard.Child = chessControl;//加载控件
            OnlineUser onlineUserControl = new OnlineUser();//前几日新加的在线用户
            onlineUserBoard.Child = onlineUserControl;
        }

View Code

 

 有网友须求,那本人就源码奉上了:http://pan.baidu.com/s/1jHKcBL8

OK,控件就一定于加载完了。接下来的任务就是要兑现OnlineUser控件里的始末显示了:

 

接下去大家回去OnlineUser.xaml里,改一下一体化宽和高为230*260:

<UserControl ..省略一堆.. d:DesignHeight=”260″ d:DesignWidth=”230″>
    
    <Grid x:Name=”LayoutRoot” Background=”White”>

    </Grid>
</UserControl>

 

下一场呢,往里放两个TextBlock和3个ListBox

葡京在线开户 36葡京在线开户 37

<Grid x:Name=”LayoutRoot” Background=”White”>
        <TextBlock Height=”23″ HorizontalAlignment=”Left” Margin=”9,10,0,0″ Name=”textBlock1″ Text=”小编的昵称:” VerticalAlignment=”Top” />
        <TextBlock Height=”23″ HorizontalAlignment=”Left” Margin=”71,10,0,0″ Name=”txtNickName” Text=”txtNickName” VerticalAlignment=”Top” Width=”164″ />
        <TextBlock Height=”23″ HorizontalAlignment=”Left” Margin=”9,39,0,0″ Name=”textBlock3″ Text=”在线人数:” VerticalAlignment=”Top” />
        <TextBlock Height=”23″ HorizontalAlignment=”Left” Margin=”71,39,0,0″ Name=”txtOnlineCount” Text=”1″ VerticalAlignment=”Top” Width=”71″ />
        <ListBox Height=”190″ HorizontalAlignment=”Left” Margin=”8,61,0,0″ Name=”lbUserList” VerticalAlignment=”Top” Width=”215″ />
    </Grid>

 

看这么些不太直观,照旧来张图:

葡京在线开户 38

以往见到布局景况了呢,界面布局就几乎了,接下去大家要博得服务端的用户列表,同时收到服务端的翻新通告。

 

于是,转入WCF服务端了,加多少个东东,贰个取得用户列表,三个回调公告用户更新。[和房间列表差不离五个样]

开拓I瑟维斯.cs,出席接口,我们只要房间内的用户列表就行了:

[OperationContract]
Dictionary<Guid, Player> GetPlayerList(int roomID);//获取用户列表

 

下一场扩张回调接口,有新用户进入时,要文告咱们的:

开拓ICallBack.cs接口,由于只有两行,就顺手复制出来了[回调目生的,回去再看报纸发布基础[十四–十七]那几节]:

通报用户那,由于用户有跻身和剥离,所以增加参数传递。

葡京在线开户 39葡京在线开户 40

interface ICallBack
    {
        [OperationContract(IsOneWay = true)]
        void NotifyRoomUpdate(Room room);
        [OperationContract(IsOneWay = true)]
        void NotifyUserUpdate(Player player, bool isEnter);//通告用户
    }

 

说了N次了,回调的是艺术是给客户端达成的,所以我们在服务端不已毕。

 

但我们那一个GetPlayerList依然得落实的,咱们回去Service.svc.cs,完结接口

看,代码拾贰分的简要不难吗,不可以,大家的存档结构Dictionary存的好。

葡京在线开户 41葡京在线开户 42

 #region IService 成员

        //获取房间用户列表
        public Dictionary<Guid, Player> GetPlayerList(int roomID)
        {
            if (playerList.ContainsKey(roomID))
            {
                return playerList[roomID];
            }
            return null;
        }

        #endregion

 

用户列表获取成功了,可是用户通报更新还没形成呢,那里一并处理了:

 

在用户进入房间和剥离房间的时候,大家要调用一下尤其回调公告房间内用户更新:

咱俩回到Notify类,上节有了3个通告房间更新的格局,那里我们添加三个用户更新的方法:

恐怕一样的很简短,用户不是协调,就通报更新。

葡京在线开户 43葡京在线开户 44

 internal static void User(Dictionary<int, Dictionary<Guid, Player>> playerList, Player player,bool isEnter)
        {
            //那里是前几天新加的,公告房间内用户更新用户
            foreach (KeyValuePair<Guid, Player> item in playerList[0])
            {
                if (item.Value.ID != player.ID)
                {
                    item.Value.CallBack.NotifyUserUpdate(player,isEnter);
                }
            }
        }

 

当今回到进入房间和剥离房间的方法里,调用下那么些方法吗:

措施太长,就不全复制,那里复制两行好了:

葡京在线开户 45葡京在线开户 46

public bool EnterRoom(Player player, int roomID)
        {
          //…省略一堆…

            //那里是原先用的,文告0房间的人[未进入房间的人]都更新此房间状态
            Notify.Room(playerList, room);
            //那里是昨日新扩张的,通告用户更新
            Notify.User(playerList, player, true);
          return true;
        }

 

同等的,退出房间方法里也有,也复制两行代码好了:

葡京在线开户 47葡京在线开户 48

public void OutRoom(Player player, int roomID)
        {
            if (roomID > 0)
            {
葡京在线开户,               //…省略一堆…

              //那里是在此以前加的,通告0房间的人[未进入房间的人]都更新此房间状态
                Notify.Room(playerList, room);
             //那里是今日新增添的,公告用户退出房间更新
                Notify.User(playerList, player, false);

            }
        }

 

从那之后,WCF服务端代码就完了了,剩下的就是客户端获取突显了。

 

再也指示,编绎WCF服务端项目,客户端更新引用引用

 

好了,大家回去OnlineUser.xaml.cs后台代码里,要开首获取数据了:

葡京在线开户 49葡京在线开户 50

public partial class OnlineUser : UserControl
    {
        public OnlineUser()
        {
            InitializeComponent();
            App.client.GetPlayerListCompleted += new EventHandler<GameService.GetPlayerListCompletedEventArgs>(client_GetPlayerListCompleted);
            App.client.GetPlayerListAsync(App.player.RoomID);
        }

        void client_GetPlayerListCompleted(object sender, GameService.GetPlayerListCompletedEventArgs e)
        {
            //这里是取得用户列表突显区
        }
    }

 

构造函数里大家调用了弹指间:GetPlayerListAsync,由于WCF都是异步的,所以都有3个风云来拍卖获取之后的举办方式:

在“e”的参数里,总是有大家要的数额:

接下去看看落成代码:

 

葡京在线开户 51葡京在线开户 52

void client_GetPlayerListCompleted(object sender, GameService.GetPlayerListCompletedEventArgs e)
        {
            //那里是取得用户列表显示区
            txtNickName.Text = App.player.NickName;
            if (e.Result != null)
            {
                txtOnlineCount.Text = e.Result.Count.ToString();
                lbUserList.Items.Clear();
                foreach (KeyValuePair<Guid, GameService.Player> item in e.Result)
                {
                    lbUserList.Items.Add(item.Value.NickName + “[” + item.Value.ID.ToString().Substring(1, 4) + “]”);
                }
            }
        }

 

1。先把温馨的昵称打进去,

2。判断若是得到到多少,

3。展现下在线用户数,

4。然后去掉下用户列表,

5。循环添加了,由于昵称可以重新,所以加个ID的前2个人在末端用于区分一下。

在线用户列表就突显完了,接下去贯彻新用户进入和退出的革新:

构造函数里添加一行文告事件代码:

葡京在线开户 53葡京在线开户 54

public OnlineUser()
        {
            //…那里大约刚才几行…
            App.client.NotifyUserUpdateReceived += new EventHandler<GameService.NotifyUserUpdateReceivedEventArgs>(client_NotifyUserUpdateReceived);
        }

        void client_NotifyUserUpdateReceived(object sender, GameService.NotifyUserUpdateReceivedEventArgs e)
        {
            //那里是兑现用户通报更新
        }

 

接下去一样已毕用户通报更新:

代码也很不难了,假若是跻身就增加,退出就删除,然后更新下在线用户数:

葡京在线开户 55葡京在线开户 56

   void client_NotifyUserUpdateReceived(object sender, GameService.NotifyUserUpdateReceivedEventArgs e)
        {
            //那里是完成用户通报更新
            if (e.isEnter)//进入
            {
                lbUserList.Items.Add(e.player.NickName + “[” + e.player.ID.ToString().Substring(1, 4) + “]”);
            }
            else
            {
                lbUserList.Items.Remove(e.player.NickName + “[” + e.player.ID.ToString().Substring(1, 4) + “]”);

            }
            txtOnlineCount.Text = lbUserList.Items.Count.ToString();
        }

 

于今,大家就折腾完了,只是没有文字指示用户进入和剥离,那些纠结了点。。。

就纠结了先吧,等下节大家落实在线聊天的时候,我们把文字往那边呈现去。

OK,一切就绪,如故F5运转:

葡京在线开户 57

用了多少个浏览器看了下效果,太阳,唯有列表出来,没有被用户通报更新,查一下代码先

查出来了,原来在Notify类里的用户通报的屋子号写错了,暗中认同从房间公告那里Copy来的,房间号写了0。

矫正一下代码:

葡京在线开户 58葡京在线开户 59

//把playerList[0]改成playerList[player.RoomID]
 internal static void User(Dictionary<int, Dictionary<Guid, Player>> playerList, Player player,bool isEnter)
        {
            //那里是新加的,公告0房间的人[未进入房间的人]都更新此房间状态
            foreach (KeyValuePair<Guid, Player> item in playerList[player.RoomID])
            {
                if (item.Value.ID != player.ID)
                {
                    item.Value.CallBack.NotifyUserUpdate(player,isEnter);
                }
            }
        }

 

 

OK,再度就绪,F5周转。

葡京在线开户 60

抑或多个浏览器,这一次符合规律了,OK,那节就到此停止了,下节再得以实以往线聊天,顺便把纠结的文字提醒放那边去显得。