Windows Phone Open URL(Website) Web Browser (WebBrowser,IsIndeterminate Progress) |
Windows Phone Open URL(Website) Web Browser (WebBrowser,IsIndeterminate Progress) ตัวอย่างบทความ Windows Phone การเขียนโปรแกรมบน Windows Phone เพื่อสร้าง Mini Web Browser ที่อยู่บน Application ของ Windows Phone โดยแนวคิดของตัวอย่างนี้คือ รับค่าจาก URL จากผู้ใช้ จากนั้นแสดงข้อมูลของ URL (Website)นั้น ๆ บน Web Browser ที่สร้างขึ้นบน Page ของ Windows Phone App ซึ่งตัวอย่างนี้จะได้แนวคิดในการประยุกต์กับการเขียนโปรแกรมบน Windows Phone ได้อย่างหลากหลาย
Windows Phone and Web Browser
ในการแสดง IsIndeterminate Progress ในขณะที่ Web Browser ของ Windows Phone กำลังทำงานนั้น สามารถใช้ Event ที่มีชื่อว่า Navigating (กำลังโหลดข้อมูล) และ Navigated (โหลดข้อมูลเรียบร้อยแล้ว)
Navigating
Private Sub WebBrowser1_Navigating(sender As Object, e As Microsoft.Phone.Controls.NavigatingEventArgs)
ProgressBar1.Visibility = Visibility.Visible
End Sub
แสดง ProgressBar ในขณะที่กำลังโหลดข้อมูล
Navigated
Private Sub WebBrowser1_Navigated(sender As Object, e As System.Windows.Navigation.NavigationEventArgs)
ProgressBar1.Visibility = Visibility.Collapsed
End Sub
ซ่อม ProgressBar เมื่อโหลดข้อมุลเรียบร้อยแล้ว
<ProgressBar Name="ProgressBar1" IsIndeterminate="True" />
เป็น ProgressBar แบบ IsIndeterminate โดยจะต้องกำหนด Attribute เป็น IsIndeterminate="True"
Example การแสดง Web Browser บน Windows Phone ง่าย ๆ และแสดง IsIndeterminate Progress ในขณะที่โหลดข้อมูล
ออกแบบ Layout Design ดังรูปนี้
<!--LayoutRoot contains the root grid where all other page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="30" HorizontalAlignment="Left" Margin="192,37,0,0" Name="txtTitle" Text="Input URL" VerticalAlignment="Top" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="2,73,0,0" Name="txtURL" VerticalAlignment="Top" Width="352" />
<Button Content="Go" Height="72" HorizontalAlignment="Left" Margin="354,73,0,0" Name="btnGo" VerticalAlignment="Top" Width="88" Click="btnGo_Click" />
<phone:WebBrowser HorizontalAlignment="Left" Margin="12,151,0,0" Name="WebBrowser1" VerticalAlignment="Top" Height="415" Width="420" />
<ProgressBar Height="26" HorizontalAlignment="Left" Margin="12,575,0,0" Name="ProgressBar1" VerticalAlignment="Top" Width="420" IsIndeterminate="True" />
</Grid>
</Grid>
XAML Layout Design
VB.NET
Partial Public Class MainPage
Inherits PhoneApplicationPage
' Constructor
Public Sub New()
InitializeComponent()
' AddHandler WebBrowser1
AddHandler WebBrowser1.Navigating, AddressOf Me.WebBrowser1_Navigating ' Loading
AddHandler WebBrowser1.Navigated, AddressOf Me.WebBrowser1_Navigated ' Load Finish
ProgressBar1.Visibility = Visibility.Collapsed
End Sub
Private Sub btnGo_Click(sender As System.Object, e As System.Windows.RoutedEventArgs)
Me.WebBrowser1.Source = New Uri(Me.txtURL.Text, UriKind.Absolute)
End Sub
Private Sub WebBrowser1_Navigating(sender As Object, e As Microsoft.Phone.Controls.NavigatingEventArgs)
ProgressBar1.Visibility = Visibility.Visible
End Sub
Private Sub WebBrowser1_Navigated(sender As Object, e As System.Windows.Navigation.NavigationEventArgs)
ProgressBar1.Visibility = Visibility.Collapsed
End Sub
End Class
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;
using System.Windows.Threading;
using Microsoft.Phone.Shell;
using System.Windows.Media.Imaging;
namespace PhoneAppCS
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
// AddHandler WebBrowser1
WebBrowser1.Navigating += this.WebBrowser1_Navigating;
// Loading
WebBrowser1.Navigated += this.WebBrowser1_Navigated;
// Load Finish
ProgressBar1.Visibility = Visibility.Collapsed;
}
private void btnGo_Click(object sender, System.Windows.RoutedEventArgs e)
{
this.WebBrowser1.Source = new Uri(this.txtURL.Text, UriKind.Absolute);
}
private void WebBrowser1_Navigating(object sender, Microsoft.Phone.Controls.NavigatingEventArgs e)
{
ProgressBar1.Visibility = Visibility.Visible;
}
private void WebBrowser1_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
ProgressBar1.Visibility = Visibility.Collapsed;
}
}
}
Code ที่เป็น VB.NET และ C# ที่จะควบคุมให้โปรแกรมทำงาน
Screenshot ทดสอบบน Emulator
ในขณะที่กำลังโหลดข้อมูลของเว็บไซต์ จะแสดงสถานะ ProgressBar แบบ IsIndeterminate สังเกตุมี แถบสีแดง ๆ ด้านล่าง กลิ้งไปมาในระหว่างทำงาน
เมื่อโหลด URL เรียบร้อยแล้ว IsIndeterminate ProgressBar ก็จะหายไป
|