不同凡響 windows phone (2) - Control（控件）

時間 2019-11-13

標籤不同凡響 windows phone control 控件欄目 Windows 简体版

原文原文鏈接

原文: 不同凡響 windows phone (2) - Control（控件）

[索引頁]
[源碼下載]

javascript

不同凡響 windows phone (2) - Control（控件）

做者：webabcd

介紹
不同凡響 windows phone 7.5 (sdk 7.1) 之控件html

Panorama - 全景圖控件
Pivot - 樞軸控件
Map - bing 地圖控件
WebBrowser - 內嵌瀏覽器控件
Other - 其餘可用控件

示例
一、Panorama 的 Demo
Panorama.xamljava

<phone:PhoneApplicationPage 
    x:Class="Demo.Controls.Panorama"
    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:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    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="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False"
    
    xmlns:sys="clr-namespace:System;assembly=mscorlib">

    <Grid x:Name="LayoutRoot">
        <!--
            Panorama - 全景圖控件
                Title - Panorama 的標題
                Background - Panorama 的背景
        -->
        <controls:Panorama x:Name="panorama" Title="Title">

            <controls:Panorama.Background>
                <ImageBrush ImageSource="/Controls/Assets/diandian.jpg"/>
            </controls:Panorama.Background>

            <!--
                PanoramaItem - Panorama 的項
                    Header - PanoramaItem 的標題 
                    Orientation - PanoramaItem 中的內容的排列方向（Vertical 或 Horizontal），默認值爲 Vertical
            -->
            <controls:PanoramaItem Header="Item 01">
                <Grid>
                    <StackPanel>
                        <TextBlock Text="我是文本，太長了的話會自動換行" Style="{StaticResource PhoneTextLargeStyle}" TextWrapping="Wrap"/>
                        <TextBlock Text="我是文本，太長了的話不會自動換行" Style="{StaticResource PhoneTextLargeStyle}" TextWrapping="NoWrap"/>
                    </StackPanel>
                </Grid>
            </controls:PanoramaItem>

            <controls:PanoramaItem Header="Item 02" Orientation="Horizontal">
                <Grid>
                    <Border BorderBrush="{StaticResource PhoneForegroundBrush}"
                            BorderThickness="{StaticResource PhoneBorderThickness}"
                            Background="#80808080">
                        <TextBlock Text="我是一段文本，個人顯示區域很寬很寬"
                                   Style="{StaticResource PhoneTextExtraLargeStyle}"
                                   HorizontalAlignment="Center" VerticalAlignment="Center" >
                        </TextBlock>

                    </Border>
                </Grid>
            </controls:PanoramaItem>

            <!--
                若是須要 PanoramaItem 中的內容支持左右拖動的話，須要將 Orientation 設置爲 Horizontal
                如下 PanoramaItem 中的內容能夠左右拖動，其中的 ListBox 可上下拖動
            -->
            <controls:PanoramaItem Header="Item 03" Orientation="Horizontal">
                <StackPanel Orientation="Horizontal">
                    <ListBox FontSize="{StaticResource PhoneFontSizeLarge}" Width="480">
                        <sys:String>a</sys:String>
                        <sys:String>b</sys:String>
                        <sys:String>c</sys:String>
                        <sys:String>d</sys:String>
                        <sys:String>e</sys:String>
                        <sys:String>f</sys:String>
                        <sys:String>g</sys:String>
                        <sys:String>h</sys:String>
                        <sys:String>i</sys:String>
                        <sys:String>j</sys:String>
                        <sys:String>k</sys:String>
                        <sys:String>l</sys:String>
                        <sys:String>m</sys:String>
                        <sys:String>n</sys:String>
                        <sys:String>o</sys:String>
                        <sys:String>p</sys:String>
                        <sys:String>q</sys:String>
                        <sys:String>r</sys:String>
                    </ListBox>
                    <TextBlock Text="webabcd" />
                </StackPanel>
            </controls:PanoramaItem>

        </controls:Panorama>
    </Grid>

</phone:PhoneApplicationPage>

Panorama.xaml.csweb

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 Demo.Controls
{
    public partial class Panorama : PhoneApplicationPage
    {
        public Panorama()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(Panorama_Loaded);
        }

        void Panorama_Loaded(object sender, RoutedEventArgs e)
        {
            /*
             * Panorama - 全景圖控件
             *     DefaultItem - 指定 Panorama 控件的第一項內容
             *     SelectionChanged - 選中項發生改變時所觸發的事件（左右滑動 Panorama，切換 item 則觸發此事件）
             *     SelectedIndex - 選中項的索引
             *     SelectedItem - 選中項
             */

            panorama.DefaultItem = panorama.Items[1];
        }
    }
}

二、Pivot 的 Demo
Pivot.xamlshell

<phone:PhoneApplicationPage 
    x:Class="Demo.Controls.Pivot"
    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:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    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="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    
    xmlns:sys="clr-namespace:System;assembly=mscorlib">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--
            Pivot - 樞軸控件
                Title - Pivot 的標題
                Background - Pivot 的背景
        -->
        <controls:Pivot Title="Title">

            <!--
                PivotItem - Pivot 的項
                    Header - PivotItem 的標題 
            -->
            <controls:PivotItem Header="Item 01">
                <Grid>
                    <TextBlock TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}">
                        <Run>webabcd</Run>
                        <LineBreak/>
                        <Run>windows phone</Run>
                    </TextBlock>
                </Grid>
            </controls:PivotItem>

            <controls:PivotItem Header="Item 02">
                <Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="{StaticResource PhoneBorderThickness}">
                    <Grid>
                        <TextBlock TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"
                                   Text="wp7" />
                    </Grid>
                </Border>
            </controls:PivotItem>

            <controls:PivotItem Header="Item 03">
                <Grid>
                    <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                        <sys:String>a</sys:String>
                        <sys:String>b</sys:String>
                        <sys:String>c</sys:String>
                        <sys:String>d</sys:String>
                        <sys:String>e</sys:String>
                        <sys:String>f</sys:String>
                        <sys:String>g</sys:String>
                        <sys:String>h</sys:String>
                        <sys:String>i</sys:String>
                        <sys:String>j</sys:String>
                        <sys:String>k</sys:String>
                        <sys:String>l</sys:String>
                        <sys:String>m</sys:String>
                        <sys:String>n</sys:String>
                        <sys:String>o</sys:String>
                        <sys:String>p</sys:String>
                        <sys:String>q</sys:String>
                        <sys:String>r</sys:String>
                    </ListBox>
                </Grid>
            </controls:PivotItem>

        </controls:Pivot>
    </Grid>

</phone:PhoneApplicationPage>

三、Bing Map 的 Demo
Map.xamlexpress

<phone:PhoneApplicationPage 
    x:Class="Demo.Controls.Map"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True"
    
    xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Orientation="Vertical">
            
            <!--
                Map - bing 地圖控件
            -->
            <my:Map x:Name="map" />

            <Button x:Name="btnZoomIn" Content="放大" Click="btnZoomIn_Click" />
            <Button x:Name="btnZoomOut" Content="縮小" Click="btnZoomOut_Click" />
            <Button x:Name="btnRoad" Content="平面圖" Click="btnRoad_Click" />
            <Button x:Name="btnAerial" Content="衛星圖" Click="btnAerial_Click" />

        </StackPanel>
    </Grid>
</phone:PhoneApplicationPage>

Map.xaml.cswindows

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 Microsoft.Phone.Controls.Maps;

namespace Demo.Controls
{
    public partial class Map : PhoneApplicationPage
    {
        public Map()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(Map_Loaded);
        }

        void Map_Loaded(object sender, RoutedEventArgs e)
        {
            /*
             * Map - bing 地圖控件
             *     Center - 地圖的中心點座標
             *     Mode - 地圖模式。RoadMode: 平面圖，AerialMode：衛星圖
             *     ZoomLevel - 地圖的放大級別
             */

            map.Center = new System.Device.Location.GeoCoordinate(39.9, 116.3);
            map.ZoomLevel = 10;
        }

        private void btnRoad_Click(object sender, RoutedEventArgs e)
        {
            map.Mode = new RoadMode();
        }

        private void btnAerial_Click(object sender, RoutedEventArgs e)
        {
            map.Mode = new AerialMode();
        }

        private void btnZoomIn_Click(object sender, RoutedEventArgs e)
        {
            map.ZoomLevel++;
        }

        private void btnZoomOut_Click(object sender, RoutedEventArgs e)
        {
            map.ZoomLevel--;
        }
    }
}

四、WebBrowser 的 Demo
WebBrowser.xaml瀏覽器

<phone:PhoneApplicationPage 
    x:Class="Demo.Controls.WebBrowser"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Orientation="Vertical">
            
            <!--
                WebBrowser - 內嵌瀏覽器控件
                    Source - 須要瀏覽器解析的頁面地址
            -->
            <phone:WebBrowser x:Name="webBrowser" Width="480" Height="480" Source="http://webabcd.cnblogs.com/" IsScriptEnabled="True" />
            
            <Button x:Name="btnNavigateRemoteUrl" Content="導航到一個互聯網頁面" Click="btnNavigateRemoteUrl_Click" />
            <Button x:Name="btnNavigateLocalUrl" Content="導航到一個項目內頁面" Click="btnNavigateLocalUrl_Click" />
            <Button x:Name="btnScript" Content="腳本交互" Click="btnScript_Click" />
            
        </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

WebBrowser.xaml.csapp

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.Resources;
using System.IO;

namespace Demo.Controls
{
    public partial class WebBrowser : PhoneApplicationPage
    {
        public WebBrowser()
        {
            InitializeComponent();

            webBrowser.ScriptNotify += new EventHandler<NotifyEventArgs>(webBrowser_ScriptNotify);
        }

        private void btnNavigateRemoteUrl_Click(object sender, RoutedEventArgs e)
        {
            /*
             * WebBrowser - 內嵌瀏覽器控件
             *     Source - 須要瀏覽器解析的頁面地址
             *     Navigate() - 導航到指定的地址，並解析（須要在 WebBrowser 控件 Loaded 以後才能調用此方法，不然會報錯）
             *     LoadCompleted - WebBrowser 中的頁面加載完成後所觸發的事件
             *     NavigateToString() - 解析指定的字符串
             *     SaveToString() - 獲取當前 WebBrowser 所顯示的 HTML 內容，返回一個字符串類型
             *     IsGeolocationEnabled - 指定是否可以使用設備的位置服務
             *     IsScriptEnabled - 指定是否須要支持腳本
             *     InvokeScript() - 調用當前 WebBrowser 所加載的 HTML 內容中的 JavaScript 腳本
             *     ScriptNotify - 當 WebBrowser 內的 JavaScript 以 「window.external.notify(string);」 的方式發送信息到 windows phone app 時所觸發的事件
             *         NotifyEventArgs - ScriptNotify 事件的事件參數
             *         NotifyEventArgs.Value - JavaScript 發送到 windows phone app 中的信息，即 「window.external.notify(string);」 中的字符串
             */

            webBrowser.Source = new Uri("http://msdn.microsoft.com/");
            // webBrowser.Navigate(new Uri("http://msdn.microsoft.com/"));
        }

        private void btnNavigateLocalUrl_Click(object sender, RoutedEventArgs e)
        {
            // 注意 WebBrowser 不能直接解析相似以下地址的項目內資源，由於對於 WebBrowser 來講這樣的相對地址指向的是獨立存儲（Isolated Storage）
            // webBrowser.Navigate(new Uri("Controls/readme.html", UriKind.Relative));

            StreamResourceInfo sr = Application.GetResourceStream(new Uri("Controls/readme.html", UriKind.Relative));
            using (BinaryReader br = new BinaryReader(sr.Stream))
            {
                byte[] data = br.ReadBytes((int)sr.Stream.Length);
                webBrowser.NavigateToString(System.Text.Encoding.UTF8.GetString(data, 0, data.Length));
            }
        }

        private void btnScript_Click(object sender, RoutedEventArgs e)
        {
            webBrowser.Navigate(new Uri("http://localhost:15482/ForWebBrowser.html"));
        }

        void webBrowser_ScriptNotify(object sender, NotifyEventArgs e)
        {
            // 顯示 JavaScript 發來的信息
            MessageBox.Show(e.Value);

            // 顯示 WebBrowser 調用 JavaScript 函數後返回的結果
            MessageBox.Show((string)webBrowser.InvokeScript("hello", "webabcd"));
        }
    }
}

ForWebBrowser.htmlasp.net

<script type="text/javascript">

    // 此函數用於演示：windows phone app 中的 WebBrowser 調用 JavaScript 函數
    function hello(name) {
        return "hello: " + name;
    }

    // 此方法用於演示：JavaScript 發信息給 windows phone app 中的 WebBrowser
    try {
        window.external.notify('哈哈哈');
    } catch (err) { } 
    
</script>

五、其餘可用控件的 Demo
Other.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Controls.Other"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <TextBlock TextWrapping="Wrap">
            <Run>其餘可用控件以下：（具體演示參考《穩紮穩打 Silverlight 系列文章》）</Run>
            <LineBreak />
            <Run>Border</Run>
            <LineBreak />
            <Run>Buton</Run>
            <LineBreak />
            <Run>Canvas</Run>
            <LineBreak />
            <Run>CheckBox</Run>
            <LineBreak />
            <Run>Grid</Run>
            <LineBreak />
            <Run>HyperlinkButon</Run>
            <LineBreak />
            <Run>Image</Run>
            <LineBreak />
            <Run>InkPresenter</Run>
            <LineBreak />
            <Run>ListBox</Run>
            <LineBreak />
            <Run>MediaElement</Run>
            <LineBreak />
            <Run>PasswordBox</Run>
            <LineBreak />
            <Run>MultiScaleImage</Run>
            <LineBreak />
            <Run>PasswordBox</Run>
            <LineBreak />
            <Run>ProgressBar</Run>
            <LineBreak />
            <Run>RadioButton</Run>
            <LineBreak />
            <Run>RichTextBox</Run>
            <LineBreak />
            <Run>ScrollViewer</Run>
            <LineBreak />
            <Run>Slider</Run>
            <LineBreak />
            <Run>StackPanel</Run>
            <LineBreak />
            <Run>TextBlock</Run>
            <LineBreak />
            <Run>TextBox</Run>
            <LineBreak />
        </TextBlock>
    </Grid>

</phone:PhoneApplicationPage>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。