给 Xamarin.Form For Windows Phone APP 加个漂亮的 "头"

Windows Phone 是那个1%, 我也是那个1%, 不喜勿喷.
WP 向来给 android / ios 的粉们一个最直观的印象: 丑.
其实"丑"这个东西会一直下去,而且是个解不开的死循环.

WP 下, 做的华丽的, 目前我用过的只有少数几个, 网易云音乐 和 智机社区, 做的漂亮而且流畅, 其它的只能用渣渣来形容.

Xamarin.Form 的 APP 在 Android 和 IOS 下默认都会有一个"头", 用于显示页面名称和导航按钮.
在 WP 下却没有, 像这样:

Xamarin.Form 在 WP 的 MainPage.xaml.cs 中这样定义:

public partial class MainPage : FormsApplicationPage{
...
        public MainPage() {
            InitializeComponent();
            SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;

            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new LBC.Mobi.App());
        }

FormsApplicationPage.LoadApplication 方法的定义:

     protected void LoadApplication(Xamarin.Forms.Application application)
     {
       Xamarin.Forms.Application.Current = application;
       application.PropertyChanged += new PropertyChangedEventHandler(this.ApplicationOnPropertyChanged);
       this.application = application;
       application.SendStart();
       this.SetMainPage();
     }

     private void SetMainPage()
     {
       if (this.platform == null)
         this.platform = new Platform((PhoneApplicationPage) this);
       this.platform.SetPage(this.application.MainPage);
       if (this.Content == this.platform)
         return;
       this.Content = (UIElement) this.platform;
     }

这样一个调用链:

LoadApplication -> SetMainPage -> 直接给整个页面的 Content 赋值.

所以, 无论你在 MainPage.xaml 中写什么内容, 最终都是无法显示的.

为了达成目的, 我们需要修改 SetMainPage 方法 , 使 this.platform 只作为 MainPage  的一部分, 而不是整个 Content.

但是反编译一下, 可以看到 Xamarin.Form 的封装很蛋疼, 很多都是 internal , private, 不带 virtual, 所以, 通过正常手段是无法对 Xamarin.Form 进行扩展的.

还好, Xamarin 对反射支持的很到位, 无法正常通过继承/重写来实现, 我们照样可以用反射来完成它.

1, 在 MainPage.xaml.cs 中新增方法 LoadApplication:

         new protected void LoadApplication(Xamarin.Forms.Application application) {
             //Xamarin.Forms.Application.Current = application;
             typeof(Xamarin.Forms.Application).GetProperty("Current", BindingFlags.Static | BindingFlags.Public)
                 .SetValue(Xamarin.Forms.Application.Current, application);

             application.PropertyChanged += new PropertyChangedEventHandler(this.ApplicationOnPropertyChanged);
             typeof(FormsApplicationPage).GetField("application", BindingFlags.NonPublic | BindingFlags.Instance)
                 .SetValue(this, application);

             //application.SendStart();
             application.GetType().GetMethod("SendStart", BindingFlags.NonPublic | BindingFlags.Instance)
                 .Invoke(application, null);

             this.SetMainPage();

17             var mp = (Xamarin.Forms.NavigationPage)application.MainPage;
18             mp.PropertyChanged += MainPage_PropertyChanged;
19             this.Title = mp.Title;
         }

为了能显示当前页的标题, 我在上面的方法中加了一段(红色标注), 实际中, 你的 application.MainPage 可能不是 NavigationPage,  需要自行修改.

2,

         void MainPage_PropertyChanged(object sender, PropertyChangedEventArgs e) {
             if (e.PropertyName.Equals("CurrentPage")) {
                 this.Title = ((Xamarin.Forms.NavigationPage)sender).CurrentPage.Title;
                 this.PropertyChanged(this, new PropertyChangedEventArgs("Title"));
             }
         }

3, 在 MainPage.xaml.cs 中添加 SetMainPage :

         private void SetMainPage() {
             if (this.Platform == null) {
                 this.Platform = new Platform((PhoneApplicationPage)this);
             }

             this.Platform.SetPage(Xamarin.Forms.Application.Current.MainPage);
             if (this.mainBody.Content != null && this.mainBody.Content.Equals(this.Platform))
                 return;
             this.mainBody.Content = (UIElement)this.Platform;
         }

4, 修改 MainPage.xaml

 <winPhone:FormsApplicationPage
     x:Class="Discuz.WinPhone.MainPage"
     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"
     xmlns:winPhone="clr-namespace:Xamarin.Forms.Platform.WinPhone;assembly=Xamarin.Forms.Platform.WP8"
     xmlns:local="clr-namespace:Discuz.WinPhone"
     mc:Ignorable="d"
     FontFamily="{StaticResource PhoneFontFamilyNormal}"
     FontSize="{StaticResource PhoneFontSizeNormal}"
     Foreground="{StaticResource PhoneForegroundBrush}"
     SupportedOrientations="Portrait" Orientation="Portrait"
     shell:SystemTray.IsVisible="True"
     shell:SystemTray.Opacity="0"
     Background="#1e5263"
     >
     <!--shell:SystemTray.BackgroundColor="#2ba9d3"-->

     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="15" /><!-- for SystemTray -->
             <RowDefinition Height="auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
         <local:TilePanel TileWidth="5" TileHeight="5" Height="65" Grid.Row="0" Grid.RowSpan="2">
             <local:TilePanel.Image>
                 <ImageBrush ImageSource="texture.png" />
             </local:TilePanel.Image>
         </local:TilePanel>
         <StackPanel Orientation="Horizontal" Margin="10,0" Grid.Row="1" VerticalAlignment="Center">
             <Image Source="icon.png" Width="40" Height="40" Margin="0,0,10,0" />
             <TextBlock Text="{Binding Title}" VerticalAlignment="Center" />
         </StackPanel>

         <ContentPresenter x:Name="mainBody" Grid.Row="2" />
     </Grid>

 </winPhone:FormsApplicationPage>

好啦, 一个带标题的 XF For WP 的 APP 改造完了.

最终效果:

具体参见:

https://github.com/gruan01/Discuz.Mobi/tree/master/Discuz/Discuz.WinPhone

--------------------

OK, 完