How to add tooltip in map windows phone 8? - windows-phone-8

My windows 8 phone app programatically add an image (as a pin) to a specific coordinataion in map using mapoverlay. And now i would like to add a tooltip to the image (pin) after tapping on it. Does anyone know how to fix this?
pinIMG = new Image();
pinIMG.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("/Assets/pin.png", UriKind.Relative));
MapOverlay myLocationOverlay = new MapOverlay();
myLocationOverlay.Content = pinIMG;
myLocationOverlay.PositionOrigin = new Point(0.5, 0.5);
myLocationOverlay.GeoCoordinate = new GeoCoordinate(57.724611, 12.938945);
MapLayer myLocationLayer = new MapLayer();
myLocationLayer.Add(myLocationOverlay);
MyMap.Layers.Add(myLocationLayer);

Instead of adding an Image to the MapOverlay, consider adding an ExpanderView control that expands to add additional data. You'll need to download the Windows Phone Toolkit to get the ExpanderView control. While you're at it you might want to switch over to using Map Extensions Pushpins to get databinding support.
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
MapLayer myLayer = new MapLayer();
MapOverlay myOverlay = new MapOverlay()
{
GeoCoordinate = new GeoCoordinate(-17, 133)
};
ExpanderView expander = new ExpanderView();
expander.Header = new Image()
{
Source = new BitmapImage(new Uri("Assets/ApplicationIcon.png", UriKind.Relative)),
Width = 200
};
expander.ItemsSource = new[]
{
new TextBlock{ Text = "HELLO"}
};
;
myOverlay.Content = expander;
myLayer.Add(myOverlay);
myMap.Layers.Add(myLayer);
}
When we run this sample we can see the following icon over australia:
And once we click ti we can see our "Hello" text show up:
A few ceavets: the code sample above is terrible. ExpanderView is meant to use both ItemSource and IteTemplate for multiple items databinding. Using it for a single item isn't great. The above code sample is also terrible since it creates UI elements in C# code whereas using Map Extensions could have placed this code in XAML.

Related

Xamarin.Forms WindowsPhone Landscape NavigationPage shows black area

I have a strange behaviour in my Xamarin.Forms app on the WinPhone client.
My MainPage is a NavigationPage. And when I navigate to the second page and turn the phone to landscape (also happens on the other way), the page shows a black area on the right side. It seems that the height and width properties don't get re-calculated on the device orientation change.
To reproduce this, just create a new Xamarin.Forms Blank App (Visual Studio 2013 template), Update the Xamarin.Forms nuget to the newest verson (in my case: 2.0.0.6490), and add the following to the App-Constructor:
var second = new ContentPage
{
BackgroundColor = Color.Green,
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Children = {
new Label {
XAlign = TextAlignment.Center,
Text = "Second Page"
}
}
}
};
var button = new Button {Text = "Show Second"};
button.Clicked += async (sender, args) => { await ((NavigationPage) MainPage).PushAsync(second); };
var firstpage = new ContentPage
{
BackgroundColor = Color.Blue,
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Children = {
new Label {
XAlign = TextAlignment.Center,
Text = "First Page"
},
button
}
}
};
// The root page of your application
MainPage = new NavigationPage(firstpage);
Is this a bug in Xamarin.Forms? Or miss I just something? Thanks in advance
I cant see any existing filed bugs on this. If it is easily reproducible as described, then create a small repro project and submit to bugzilla.xamarin.com. It will be a xf regression bug.
Thanks #Joehl - I obviously am not too great at searching bugzilla on my mobile. As mentioned this is the bug report: https://bugzilla.xamarin.com/show_bug.cgi?id=36477

How to update a custom image Live Tile every minute in Windows Phone 8.1?

There are quite a few Windows Phone 8.1 apps (e.g. Clock hub, Analog Clock Tile, etc.) which allow you to pin an analog clock on the main screen.
I am trying to do the same by following this sample which shows me how to update an XML document every minute.
But if I am going to create an analog clock tile then it needs to be an image.
I have tried to use XamlRenderingBackgroundTask with RenderTargetBitmap to generate the image, this bit works. What I am not sure is how can I update this image every minute.
Any help wold be greatly appreciated!
I took the sample you provided and modified it to generate a custom image live tile every minute.
I've tested it on my phone and it seems to be working OK. You might need to do more testing such as memory usage testing to make sure it doesn't go over the cap (maybe can reduce planTill to 30 minutes to generate less tiles in the loop?).
The UserControl xml file SquareFrontTile1.xml
<Border Height="360" Width="360" Background="#00b2f0" xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'>
<TextBlock Text="{0}" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="White" FontSize="50.667" />
</Border>
The code
public static async void UpdateAsync(BackgroundTaskDeferral deferral)
{
TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
IReadOnlyList<ScheduledTileNotification> plannedUpdated = tileUpdater.GetScheduledTileNotifications();
string language = GlobalizationPreferences.Languages.First();
CultureInfo cultureInfo = new CultureInfo(language);
DateTime now = DateTime.Now;
DateTime planTill = now.AddHours(1);
DateTime updateTime = new DateTime(now.Year, now.Month, now.Day, now.Hour, now.Minute, 0).AddMinutes(1);
if (plannedUpdated.Count > 0)
updateTime = plannedUpdated.Select(x => x.DeliveryTime.DateTime).Union(new[] { updateTime }).Max();
StorageFolder folder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync("Assets");
StorageFile file = await folder.GetFileAsync("SquareFrontTile1.xml");
string xml = await Windows.Storage.FileIO.ReadTextAsync(file);
string startXml = string.Format(xml, now.ToString(cultureInfo.DateTimeFormat.ShortTimePattern));
XmlDocument tileDocumentNow = await GetTileXmlDocument(startXml);
TileNotification notification = new TileNotification(tileDocumentNow) { ExpirationTime = now.AddMinutes(1) };
tileUpdater.Update(notification);
for (var startPlanning = updateTime; startPlanning < planTill; startPlanning = startPlanning.AddMinutes(1))
{
Debug.WriteLine(startPlanning);
Debug.WriteLine(planTill);
try
{
string updateXml = string.Format(xml, startPlanning.ToString(cultureInfo.DateTimeFormat.ShortTimePattern));
XmlDocument updatedTileDocument = await GetTileXmlDocument(updateXml);
ScheduledTileNotification scheduledNotification = new ScheduledTileNotification(updatedTileDocument, new DateTimeOffset(startPlanning)) { ExpirationTime = startPlanning.AddMinutes(1) };
tileUpdater.AddToSchedule(scheduledNotification);
Debug.WriteLine("schedule for: " + startPlanning);
}
catch (Exception e)
{
Debug.WriteLine("exception: " + e.Message);
}
}
deferral.Complete();
}
private static async Task<XmlDocument> GetTileXmlDocument(string xml)
{
Border tileUIElement = XamlReader.Load(xml) as Border;
string liveTileImageName = string.Format("UpdatedLiveTile_{0}.png", DateTime.Now.Ticks.ToString());
if (tileUIElement != null)
{
RenderTargetBitmap rtb = new RenderTargetBitmap();
await rtb.RenderAsync(tileUIElement, 150, 150);
IBuffer pixels = await rtb.GetPixelsAsync();
DataReader dReader = Windows.Storage.Streams.DataReader.FromBuffer(pixels);
byte[] data = new byte[pixels.Length];
dReader.ReadBytes(data);
var outputFile = await Windows.ApplicationModel.Package.Current.InstalledLocation.CreateFileAsync(liveTileImageName, Windows.Storage.CreationCollisionOption.ReplaceExisting);
var outputStream = await outputFile.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);
BitmapEncoder enc = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, outputStream);
enc.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied, 150, 150, 96, 96, data);
await enc.FlushAsync();
}
var tileDocument = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150Image);
var tileImageAttributes = tileDocument.GetElementsByTagName("image");
XmlElement tmp = tileImageAttributes[0] as XmlElement;
tmp.SetAttribute("src", liveTileImageName);
return tileDocument;
}
I am not going to fully answer the question since I am myself trying to get this working at present. However I will set you in right direction. I have done this in past with windows 8.
What you need to do is create Tile Updater and schedule tiles updates every so often.. in this case one every minute. The tile schema chosen can have be image or text or a combination of both.
you can find the TileSchema catalogue here
http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx
and details of Tile Schema here
http://msdn.microsoft.com/en-us/library/windows/apps/br212859.aspx
Here is a Windows 8 sample
http://code.msdn.microsoft.com/windowsapps/scheduled-notifications-da477093
Here is a snippet from my code which isn't working correctly so far.. tile is blank
TileUpdater updater = TileUpdateManager.CreateTileUpdaterForApplication();
XmlDocument document = new XmlDocument();
document.LoadXml(str2);
ScheduledTileNotification notification2 = new ScheduledTileNotification(document, new DateTimeOffset(time4));
notification2.ExpirationTime = (new DateTimeOffset?((DateTimeOffset)time4.AddMinutes(1.0)));
ScheduledTileNotification notification = notification2;
updater.AddToSchedule(notification);
Once I finish this, I will write up a blog post and add a link here
I have created a repro project that tries to do this from within sample app (not background task).
http://1drv.ms/1nai8nn
The sample work for me, I add to Windows Phone Silverlight 8.1. You must change Notification Services from MPN to WNS in WMAppManifest.xml and add Background task, tick System event, Timer in Package.appxmanifest (Declarations tab).
#Justin XL: your code not work for me, error in line
Border tileUIElement = XamlReader.Load(xml) as Border;
Error: The application called an interface that was marshalled for a different thread.

Crop an Image in nokia Imaging SDK 1.2?

Can you give me a sample code for crop an Image using Nokia Imaging SDK 1.2 ? As you know the "Editing Session" class, that I use for cropping Image has gone in SDK 1.2.
Thanks for your attention.
This is an excerpt from the nokia api reference documentation which can be found here:
http://developer.nokia.com/resources/library/Imaging_API_Ref/nokiagraphicsimaging-namespace/cropfilter-class.html
This sample takes CameraCaptureTask result photo and applies a [crop] filter to it.
async void CaptureTask_Completed(object sender, PhotoResult e)
{
// Create a source to read the image from PhotoResult stream
using (var source = new StreamImageSource(e.ChosenPhoto))
{
// Create effect collection with the source stream
using (var filters = new FilterEffect(source))
{
// Initialize the filter
var sampleFilter = new CropFilter(new Windows.Foundation.Rect(0, 0, 500, 500));
// Add the filter to the FilterEffect collection
filters.Filters = new IFilter[] { sampleFilter };
// Create a target where the filtered image will be rendered to
var target = new WriteableBitmap((int)ImageControl.ActualWidth, (int)ImageControl.ActualHeight);
// Create a new renderer which outputs WriteableBitmaps
using (var renderer = new WriteableBitmapRenderer(filters, target))
{
// Render the image with the filter(s)
await renderer.RenderAsync();
// Set the output image to Image control as a source
ImageControl.Source = target;
}
}
}
}

Refresh an ObservableCollection when Item's property changed

I have a observableCollection which is loaded with elements and displayed on the UI .At the same time the app is downloading one Icon for each element of the observable collection.I would like to display each Icon when its download finishes...
My code is working but i guess it's not the best pratice because I bind my collection to the Ui control 2 times...I am pretty convinced that it shouldn't be necessary ...I try to implement the InotifypropertyChanged on the element's Icon property but I still have to add those lines of code to display the Icons:
listDocsLibs = new ObservableCollection<BdeskDocLib>(listBoxGetDocsLibs);
llslistDocslibs.ItemsSource = listDocsLibs;
Below the function which dowload the Icons
List<BdeskDocLib> listBoxGetDocsLibs = new List<BdeskDocLib>();
ObservableCollection<BdeskDocLib> listDocsLibs = new ObservableCollection<BdeskDocLib>();
private async void LoadIconDocLibs()
{
foreach (var doclib in listBoxGetDocsLibs)
{
byte[] Icon = await ServerFunctions.GetDocLibsIcon(doclib);
if (Icon != null)
{
{
var ms = new MemoryStream(Icon);
BitmapImage photo = new BitmapImage();
photo.DecodePixelHeight = 64;
photo.DecodePixelWidth = 92;
photo.SetSource(ms);
doclib.Icon = photo;
}
}
else if (Icon == null)
{
doclib.Icon = new BitmapImage();
doclib.Icon.UriSource = new Uri("/Images/BDocs/ico_ext_inconnu.png", UriKind.Relative);
}
}
}
//IM PRETTY SURE The following code IS NOT NECESSARY BUT WHY MY UI IS NOT REFRESHING WITHOUT ?
listDocsLibs = new ObservableCollection<BdeskDocLib>(listBoxGetDocsLibs);
llslistDocslibs.ItemsSource = listDocsLibs;
}

How to show map with pushpin for given latitude and longitude in windows phone 8

I'm new to windows phone 8 application. Could you please help me how to show a Map with pushpin for the given Latitude and Longitude in windows phone 8.
Thanks
To learn about maps and navigation click here
this is the official document from windows phone dev center. If you are trying to add some UI element to the maps refer this document click here.
This will use a Grid inside a MapOverlay, and works pretty well...
var textGrid = new Grid();
textGrid.ColumnDefinitions.Add(new ColumnDefinition(){Width = GridLength.Auto});
textGrid.Background = new SolidColorBrush(Colors.Black){Opacity = 0.7};
var distText = new TextBlock();
distText.Margin = new Thickness(8,4,8,4);
distText.Text = <your text>;
distText.Foreground = new SolidColorBrush(Colors.White);
textGrid.Children.Add(distText);
var textOverlay = new MapOverlay { Content = textGrid, GeoCoordinate = midwayCoord };
var layer = new MapLayer();
layer.Add(textOverlay);
Map.Layers.Add(layer);
Map.MapElements.Add(line);