如何在Xamarin Form Header上顯示動態圖像？

我正在使用Xamarin格式，其中標題標題右側會顯示天氣溫度和天氣圖標。如何在Xamarin Form Header上顯示動態圖像？

例如

紐約60' F SunnyIcon

我使用openweather API來獲取數據。

問題是，我無法在Xamarin表格頁眉上創建動態圖像保存器。

如何在Xamarin表格頁眉上顯示動態圖像？

附上對此我根據我從GitHub下載源代碼工作的一個示例應用程序...

來源

2017-03-04 goofyui

你是什麼意思的「標題」？導航欄？或者是其他東西？標題在XF中沒有任何特定的含義。 – Jason

@jason，是的，我提到關於導航欄。 – goofyui

@Jason，我已附上我的示例應用程序的屏幕截圖..其中你可以看到天氣圖標在溫度場..，我需要顯示該圖標以及城市名稱，溫度後跟圖標 – goofyui

我不知道你的意思是「頭」，但如果

public myPage() 
    { 
     InitializeComponent(); 
     ToolbarItems.Add(new ToolbarItem("Weather", "WeatherIcon.png", async() => 
     { 
      //Code to Execute when Icon is tapped 
     })); 
    }

當添加ToolbarItem，第一PARAMET：你想添加一個圖標到Navigation Bar，您可以在您的網頁這樣的構造函數調用ToolbarItems.add()做er是項目的名稱，第二個是將在導航欄末尾顯示的圖像的名稱，最後一個是可選的，它會創建一個在輕擊圖標時執行的方法。

如果您需要的圖標是根據當前的天氣不同，可以是這樣做的：

public myPage() 
    { 
     InitializeComponent(); 

     string weatherIconString = ""; 
     if(weather.isSunny) // Edit contition however you need 
      weatherIconString = "SunnyIcon.png"; 
     else 
      weatherIconString = "CloudyIcon.png"; 

     ToolbarItems.Add(new ToolbarItem("Weather", weatherIconString)); 
    }

來源

2017-03-05 18:48:23 cvanbeek

我提到了標題，這是我們提到Page.Title的地方。我需要包含天氣圖標和Page.Title。我們在哪裏可以有後退箭頭圖標或漢堡包圖標...但是，我沒有靜態圖像的問題。我只有動態圖像的問題.. – goofyui

你提到的標題是導航欄，如果你只是想添加一張圖片，你可以使用這段代碼並刪除第三個構造函數，因此點擊時不會發生任何事情。 – cvanbeek

您的意思是說有不同的圖像可以放在導航欄中嗎？如果是這樣，你可以編寫if語句來改變圖片的值。我將編輯我的帖子以顯示此內容。 – cvanbeek

您必須編寫自定義呈現這樣的：和結果：

public class CustomNavigationPageRenderer : NavigationRenderer 
{ 

    public override void ViewDidLoad() 
    { 
     //I'm getting width and height so i can rescale the image 
     nfloat navigationBarWidth = NavigationBar.Frame.Width; 
     nfloat navigationBarHeight = NavigationBar.Frame.Height; 

     //you can load image from your bundle,so you can add your weather icons on bundle -> under Resources folder 
     var img = UIImage.FromBundle("navigationbarbackground.jpg"); 
     //create image context to draw image 
     UIGraphics.BeginImageContextWithOptions(new CGSize(navigationBarWidth, navigationBarHeight), true, 0); 
     //I'm filling the background with a color so it is the same as with my background image color  
     UIColor.FromRGB(54, 60, 65).SetFill(); 
     UIGraphics.RectFill(new CGRect(0, 0, navigationBarWidth, navigationBarHeight)); 
     //draw your image according to the coordinates of the navigation bar, i put it to the right top with a small right padding, 
     //you have to play with coordinates according to your needs 
     img.Draw(new CGRect(navigationBarWidth - navigationBarHeight - 30,//move 30px to the left (do not paste to right border :)) 
      0, navigationBarHeight, navigationBarHeight)); 
     UIImage backgroundImage = UIGraphics.GetImageFromCurrentImageContext(); 
     UIGraphics.EndImageContext(); 
     NavigationBar.SetBackgroundImage(backgroundImage, UIBarMetrics.Default); 

     //bonus :) change your title color 
     UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes() 
     { 
      TextColor = UIColor.White, 
     }); 

     base.ViewDidLoad(); 
    } 
}

來源

2017-03-15 09:33:05

謝謝..我會嘗試並將更新你.. – goofyui

如何在Xamarin Form Header上顯示動態圖像？

回答

相關問題