閱讀579 返回首頁    go 阿裏雲 go 技術社區[雲棲]

手把手教你做“迷你瀏覽器”

關注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 右鍵選中屬性

把下麵的屬性設置為

屬性值

Texthttps://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("https://"))

s_site = "https://"+s_site;

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

這樣整個工作就完成了。運行來看看

 

通過調整，我們看看橫版的效果

附上代碼

C#



    

  1. using System; 
    2. 

  2. using System.Collections.Generic; 
    3. 

  3. using System.Linq; 
    4. 

  4. using System.Net; 
    5. 

  5. using System.Windows; 
    6. 

  6. using System.Windows.Controls; 
    7. 

  7. using System.Windows.Documents; 
    8. 

  8. using System.Windows.Input; 
    9. 

  9. using System.Windows.Media; 
    10. 

  10. using System.Windows.Media.Animation; 
    11. 

  11. using System.Windows.Shapes; 
    12. 

  12. using Microsoft.Phone.Controls; 
    13. 

  13. namespace MiniBrowser 
    14. 

  14. { 
    15. 

  15. publicpartialclassMainPage : PhoneApplicationPage 
    16. 

  16. { 
    17. 

  17. // 構造函數 
    18. 

  18. publicMainPage() 
    19. 

  19. { 
    20. 

  20. InitializeComponent(); 
    21. 

  21. } 
    22. 

  22. privatevoid button1_Click(objectsender, RoutedEventArgs e) 
    23. 

  23. { 
    24. 

  24. stringsite = textBox1.Text; 
    25. 

  25. if(!site.Contains("https://")) 
    26. 

  26. { 
    27. 

  27. site = "https://"+ site; 
    28. 

  28. } 
    29. 

  29. webBrowser1.Navigate(newUri(site, UriKind.Absolute)); 
    30. 

  30. } 
    31. 

  31. } 
    32. 

  32. } 
    33. 

  33. Xaml: 
    34. 

  34. <phone:PhoneApplicationPage 
    35. 

  35. x:Class="MiniBrowser.MainPage" 
    36. 

  36. xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    37. 

  37. xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
    38. 

  38. xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
    39. 

  39. xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
    40. 

  40. xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
    41. 

  41. xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
    42. 

  42. mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
    43. 

  43. FontFamily="{StaticResourcePhoneFontFamilyNormal}" 
    44. 

  44. FontSize="{StaticResourcePhoneFontSizeNormal}" 
    45. 

  45. Foreground="{StaticResourcePhoneForegroundBrush}" 
    46. 

  46. SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" 
    47. 

  47. shell:SystemTray.IsVisible="True"> 
    48. 

  48. <!--LayoutRoot 是包含所有頁麵內容的根網格--> 
    49. 

  49. <Grid x:Name="LayoutRoot" Background="Transparent"> 
    50. 

  50. <Grid.RowDefinitions> 
    51. 

  51. <RowDefinition Height="173"/> 
    52. 

  52. <RowDefinition Height="595*"/> 
    53. 

  53. </Grid.RowDefinitions> 
    54. 

  54. <!--TitlePanel 包含應用程序的名稱和頁標題--> 
    55. 

  55. <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
    56. 

  56. <TextBlock x:Name="ApplicationTitle" Text="我的第一個Windows Phone 程序" Style="{StaticResource PhoneTextNormalStyle}"/> 
    57. 

  57. <TextBlock x:Name="PageTitle" Text="迷你瀏覽器" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
    58. 

  58. </StackPanel> 
    59. 

  59. <!--ContentPanel - 在此處放置其他內容--> 
    60. 

  60. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
    61. 

  61. <TextBox Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,120,0" Name="textBox1" Text="https://www.wpdever.com/" VerticalAlignment="Top" /> 
    62. 

  62. <Button Content="Go" Height="Auto" HorizontalAlignment="Right" Name="button1" VerticalAlignment="Top" 
    63. 

  63. Width="Auto" Click="button1_Click"/> 
    64. 

  64. <phone:WebBrowser HorizontalAlignment="Stretch" Margin="0,84,0,0" Name="webBrowser1" VerticalAlignment="Stretch" 
    65. 

  65. Height="Auto" Width="Auto" /> 
    66. 

  66. </Grid> 
    67. 

  67. </Grid> 
    68. 

  68. </phone:PhoneApplicationPage> 
    69. 








總結：



這是我的第一個wp程序，剛開始寫的時候是參考msdn的教程來的，後來試著自己做了做，發現一個問題，在編輯框直接輸入域名的時候程序會出錯，但是加上了前綴“https://”就不會了，於是我把代碼加上了一個判斷







 




    

  1. string s_site = textBox1.Text; 
    2. 

  2. if (!s_site.Contains("https://")) 
    3. 

  3. s_site = "https://"+s_site; 
    4. 

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




 



當然這裏沒有加上大寫判斷。第一個程序就寫這麼多了。總的來說感覺還不錯。


最後更新：2017-04-03 18:52:12
  上一篇：go 大話數據結構之二：算法
  下一篇：go 最棒的10款MySQL GUI工具