SearchBar使用
SearchBar提供一个搜索框,方便用户实现搜索功能。
SearchBar提供属性
- CancelButtonColor :设置Cancel颜色。
- Placeholder :SearchBar默认显示文本,Text为空时显示。
- Text :SearchBar输入的文本。
- SearchCommand :用于Data Binding。
- SearchCommandParameter :用于SearchCommand的参数。
SearchBar提供事件
- SearchButtonPressed :用户按下搜索按钮时触发。
- TextChanged :Text属性改变时触发该事件。
具体使用不做介绍,实际情况会结合ListView来显示搜索结果,SearchCommand和SearchCommandParameter两个属性又涉及数据绑定相关知识,故先跳过。
WebView使用
提供简易浏览器功能来访问Html页面,可以是网络页面也可以是本地Html文件或任何通过WebView查看的文档,也可以直接显示Html字符串。WebView不支持多点触碰手势,无法缩放网页。
WebView属性
- CanGoBack :返回bool类型,表示当前页面是否可以返回到上一页。
- CanGoForward :返回bool类型,表示当前页面是否可以跳转到下一页。
-
Source :WebViewSource类型,表示WebView显示资源。
显示网路页面:
指定WebView的Source属性为要显示的页面地址(必须是完整的URL地址,包含协议)。
<WebView Source="https://www.baidu.com" />
运行iOS项目,网页无法显示。查看应用程序输出NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9802)
,解决方案,修改'info.plist'文件增加如下节点。
对应xml节点为:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
详情查看:http://www.jianshu.com/p/b671d2ee4458
借助HtmlWebViewSource
显示Html字符串,显示一个Html font元素:
webView.Source = new HtmlWebViewSource()
{
Html = "<font size=\"3\" face=\"Times\">This is another paragraph.</font>"
};
显示本地Html文件:将Html文件和相关的CSS文件、图片等复制到平台项目中(不是PCL项目),iOS添加到Resources目录下设置Build Action 为BundleResource,Android添加到Asset目录下设置Build Action为AndroidAsset,Windows Phone赋知道项目跟目录设置Build Action为Content。通过
DependencyService
获取Html文件内容并赋值给HtmlWebViewSource的Html属性,同时指定HtmlWebViewSource的BaseUrl属性。iOS通过NSBundle.MainBundle.BundlePath
获取,Android指定为"file:///android_asset/"
,Windows Phone指定为""
。文件读取涉及到Platform-specific API calls 相关知识先不做介绍。
WebView方法
- GoBack :返回到上一页。
- GoForward :跳转到下一页。
-
Eval :调用javascript方法。
WebView调用JavaScript示例:
修改布局代码:
<StackLayout>
<Button x:Name="button" Text="call javascript" HorizontalOptions="Center" VerticalOptions="Start"/>
<WebView x:Name="webView" HeightRequest="1000" WidthRequest="1000" />
</StackLayout>
增加CS代码:
webView.Source = new HtmlWebViewSource()
{
Html = "<html>\n <script>\n function buttonClick(){\n alert(\"clicked\");\n }\n </script>\n <head>\n <title>Html Title</title>\n </head>\n " +
"<body>\n <h1>Xamrin.Forms</h1>\n <button type=\"button\" onClick=\"buttonClick()\">clicked me</button>\n </body>\n</html>"
};
button.Clicked += (sender, e) =>
{
webView.Eval("buttonClick()");
};
运行效果:
当WebView包含在StackLayout 或者RelativeLayout布局内时必须指定WebView的HeightRequest和WidthRequest属性,否则WebView将无法显示。
WebView事件
- Navigated :页面跳转结束时触发。
- Navigating :页面跳转开始时触发。
事件不多做介绍。