与众不同 windows phone (2) - Control（控件）
原文:
与众不同 windows phone (2) - Control（控件）
与众不同 windows phone (2) - Control（控件）
作者：webabcd
介绍
与众不同 windows phone 7.5 (sdk 7.1) 之控件
- Panorama - 全景图控件
- Pivot - 枢轴控件
- Map - bing 地图控件
- WebBrowser - 内嵌浏览器控件
- Other - 其他可用控件
示例
1、Panorama 的 Demo
Panorama.xaml
<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.cs
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]; } } }
2、Pivot 的 Demo
Pivot.xaml
<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>
3、Bing Map 的 Demo
Map.xaml
<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.cs
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--; } } }
4、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.cs
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.html
<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>
5、其他可用控件的 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>
OK
[源码下载]