手把手教你做“迷你浏览器”

关注wp很久了，一直都想加入到wp开发的阵营中来，今天终于有了时间开始自己的wp开发之旅。下面是我的第一个wp7应用迷你浏览器

首先打开Microsoft Visual Studio 2010 Express for Windows Phone

开始新建项目

 

选择Silverlight for Windows Phone 然后选择 Windows PhoneApplication

我们把项目为起名为：MiniBrowser 点击确定会出现下面的窗体

 

我们选择 Windows Phone OS 7.1 

按下确定这样子工程就创建好了。下面开始我们的设计了。

1.设置标题的属性，选择我的应用程序

右键选中属性

 

把Text属性的值修改为“我的第一个Windows Phone 程序”

选中页面名称右键选中属性

 

把Text值修改为“迷你浏览器“

可以看到设计图变为

 

在迷你浏览器的下方添加一个TextBox控件

 

选中TextBox 右键选中属性

把下面的属性设置为

属性值

Texthttp://www.wpdever.com

HeightAuto

WidthAuto

HorizontalAlignmentStretch

VerticalAlignmentTop

在TextBox右边添加一个Button控件并把属性设为

属性值

ContentGo

HeightAuto

WidthAuto

HorizontalAlignmentRight

VerticalAlignmentTop

在TextBox控件的下方区域添加一个WebBrowser 控件，并填充满下方区域

添加完控件之后就完成了设计

下面是设计的图

 

双击按钮为按钮添加事件处理

在处理事件中添加如下代码

string s_site = textBox1.Text;

if (!s_site.Contains("http://"))

s_site = "http://"+s_site;

webBrowser1.Navigate(newUri(s_site, UriKind.Absolute));

这样整个工作就完成了。运行来看看

 

通过调整，我们看看横版的效果

附上代码

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
namespace MiniBrowser
{
publicpartialclassMainPage : PhoneApplicationPage
{
// 构造函数
publicMainPage()
{
InitializeComponent();
}
privatevoid button1_Click(objectsender, RoutedEventArgs e)
{
stringsite = textBox1.Text;
if(!site.Contains("http://"))
{
site = "http://"+ site;
}
webBrowser1.Navigate(newUri(site, UriKind.Absolute));
}
}
}
Xaml:

x:Class="MiniBrowser.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResourcePhoneFontFamilyNormal}"
FontSize="{StaticResourcePhoneFontSizeNormal}"
Foreground="{StaticResourcePhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

"LayoutRoot" Background="Transparent">

"173"/>
"595*"/>


"TitlePanel" Grid.Row="0" Margin="12,17,0,28">
"ApplicationTitle" Text="我的第一个Windows Phone 程序" Style="{StaticResource PhoneTextNormalStyle}"/>
"PageTitle" Text="迷你浏览器" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>


"ContentPanel" Grid.Row="1" Margin="12,0,12,0">
"Auto" HorizontalAlignment="Stretch" Margin="0,0,120,0" Name="textBox1" Text="http://www.wpdever.com/" VerticalAlignment="Top" />
"Go" Height="Auto" HorizontalAlignment="Right" Name="button1" VerticalAlignment="Top"
Width="Auto" Click="button1_Click"/>
"Stretch" Margin="0,84,0,0" Name="webBrowser1" VerticalAlignment="Stretch"
Height="Auto" Width="Auto" />

总结：

这是我的第一个wp程序，刚开始写的时候是参考msdn的教程来的，后来试着自己做了做，发现一个问题，在编辑框直接输入域名的时候程序会出错，但是加上了前缀“http://”就不会了，于是我把代码加上了一个判断

 

string s_site = textBox1.Text;
if (!s_site.Contains("http://"))
s_site = "http://"+s_site;
webBrowser1.Navigate(newUri(s_site, UriKind.Absolute));

 

当然这里没有加上大写判断。第一个程序就写这么多了。总的来说感觉还不错。