神刀安全网

Xamarin.Forms Views介绍(五)

SearchBar使用

SearchBar提供一个搜索框,方便用户实现搜索功能。

Xamarin.Forms Views介绍(五)
不同平台呈现效果

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’文件增加如下节点。

    Xamarin.Forms Views介绍(五)

    对应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>" };
    Xamarin.Forms Views介绍(五)
    Android运行效果

    显示本地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()"); };

    运行效果:

    Xamarin.Forms Views介绍(五)

    当WebView包含在StackLayout 或者RelativeLayout布局内时必须指定WebView的HeightRequest和WidthRequest属性,否则WebView将无法显示。

WebView事件

  • Navigated :页面跳转结束时触发。
  • Navigating :页面跳转开始时触发。

事件不多做介绍。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Xamarin.Forms Views介绍(五)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址