I'm writing a Windows 8 app and am trying to get live tiles working. Here's what I have so far (all in App.xaml.cs):
In OnLaunched():
Window.Current.VisibilityChanged += Current_VisibilityChanged;
The event handler for that:
void Current_VisibilityChanged(object sender, Windows.UI.Core.VisibilityChangedEventArgs e)
{
// create a string with the tile template xml
string tileXmlString = "<tile><visual><binding template=\"TileSquareBlock\">" + App.VM.GetImageLinks() + "</binding></visual></tile>";
// create a DOM
Windows.Data.Xml.Dom.XmlDocument tileDOM = new Windows.Data.Xml.Dom.XmlDocument();
// load the xml string into the DOM, catching any invalid xml characters
tileDOM.LoadXml(tileXmlString);
// create a tile notification
TileNotification tile = new TileNotification(tileDOM);
// send the notification to the app's application tile
TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
}
App.VM.GetImageLinks() returns:
<tile>
<visual>
<binding template=\"TileSquareBlock\">
<image id=\"1\">Assets/Img1.jpg</image>
<image id=\"2\">Assets/Img2.jpg</image>
<image id=\"3\">Assets/Img3.jpg</image>
</binding>
</visual>
</tile>
At the minute, I'm basically trying to just get these images to show on the start screen. My guess is that VisibilityChanged is the wrong event, because it seems to occur too often.
The XML being used is invalid, as the TileSquareBlock template doesn't contain any images. See the tile template catalog to see the various visual templates and their corresponding XML.
The NotificationsExtensions library (found in the MSDN tiles sample) provides an object model that maps the image and text fields to named properties. It provides more validation and may simplify your code.
Related
I run often into many problems which leads to refactoring my code...
That is why I want to ask for some recommendations.
The problems I'm running into are:
1) Providing data to XAML
Providing simple data to control value instead of using a value converter. For instance I have a color string like "#FF234243" which is stored in a class. The value for the string is provided by a web application so I can only specify it at runtime.
2) UI for every resolution
In the beginnings of my learning I got told that you can create a UI for every possible resolution, which is stupid.
So I've written a ValueConverter which I bind on an element and as ConverterParameter I give a value like '300' which gets calculated for every possible resolution... But this leads to code like this...
<TextBlock
Height={Binding Converter={StaticResource SizeValue}, ConverterParameter='300'}
/>
3) DependencyProperties vs. NotifyProperties(Properties which implement INotifyPropertyChanged) vs. Properties
I have written a control which takes a list of value and converts them into Buttons which are clickable in the UI. So I did it like this I created a variable which I set as DataContext for this specific Control and validate my data with DataContextChanged but my coworker mentioned that for this reason DependencyProperties where introduced. So I created a DependecyProperty which takes the list of items BUT when the property gets a value I have to render the buttons... So I would have to do something like
public List<string> Buttons
{
get { return (List<string>)GetValue(ButtonsProperty); }
set
{
SetValue(ButtonsProperty, value);
RenderButtons();
}
}
// Using a DependencyProperty as the backing store for Buttons. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ButtonsProperty =
DependencyProperty.Register("Buttons", typeof(List<string>), typeof(MainPage), new PropertyMetadata(""));
private void RenderButtons()
{
ButtonBar.Children.Clear();
ButtonBar.ColumnDefinitions.Clear();
if(Buttons != null)
{
int added = 0;
foreach (var item in Buttons)
{
var cd = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) };
var btn = new Button() { Content = item };
ButtonBar.ColumnDefinitions.Add(cd);
ButtonBar.Children.Add(btn);
Grid.SetColumn(btn, added);
}
}
}
And have to use it like this:
<Controls:MyControl
x:Name="ButtonBar" Button="{Binding MyButtons}">
</Controls:MyControl>
Since these are a lot of topics I could seperate those but I think that this is a pretty common topic for beginners and I have not found a got explanation or anything else
1. Providing data to XAML
There are two options: prepare data in the ViewModel or to use converter.
To my mind using converter is better since you can have crossplatform viewModel with color like you mentioned in your example and converter will create platform dependent color. We had similar problem with image. On android it should be converted to Bitmap class, while on UWP it's converted to BitmapImage class. In the viewModel we have byte[].
2. UI for every resolution
You don't need to use converter, since Height is specified in effective pixels which will suit all the required resolutions automatically for you. More info can be found at the following link:
https://learn.microsoft.com/en-us/windows/uwp/design/layout/layouts-with-xaml
There are two options how to deal with textblock sizes:
a) Use predefined textblock styles and don't invent the wheel (which is the recommended option):
https://learn.microsoft.com/en-us/windows/uwp/design/style/typography#type-ramp
Or
b) Specify font size in pixels. They are not pixels, but effective pixels. They will be automatically scaled on different devices:
https://learn.microsoft.com/en-us/windows/uwp/design/style/typography#size-and-scaling
Furthermore, use adaptive layout to have different Layout for different screen sizes.
3) DependencyProperties vs. NotifyProperties(Properties which implement INotifyPropertyChanged) vs. Properties
As per your code you can try to use ListView or ItemsControl and define custom item template.
DependencyProperties are created in DependencyObject and are accessible in xaml. All controls are inherited from DependencyObjects. Usually you create them when you want to set them in xaml. They are not stored directly in the objects, but in the global dictionary and resolved at runtime.
DependencyProperties were created long time ago and you can find lots of links which explain them in details:
http://www.wpftutorial.net/dependencyproperties.html
https://techpunch.wordpress.com/2008/09/25/wpf-wf-what-is-a-dependency-property/
When should I use dependency properties in WPF?
What is a dependency property? What is its use?
What is a dependency property?
INotifyPropertyChanged INPC are the central part of MVVM. You bind your view to viewModel which implements INPC and when you change value of the property control is notified and rereads the new value.
Download the following video in high resolution which explains MVVM in details (by Laurent Bugnion):
https://channel9.msdn.com/Events/MIX/MIX11/OPN03
MVVM: Tutorial from start to finish?
Normal properties are used in model classes or when there is no need to notify UI regarding changes.
So I have an xml as notification body witch includes audio element with source (src) attribute pointing to preset windows sound and it doesn't play the sound I want and instead plays the default system sound. My notification xml looks like this (I use this as a test message to send trough Azure notification hubs debug option)
<?xml version="1.0" encoding="utf-8"?>
<toast>
<visual>
<binding template="ToastText01">
<text id="1">Test message</text>
</binding>
</visual>
<audio src="ms-winsoundevent:Notification.Looping.Alarm" loop="false"/>
</toast>
I don't have any toast handling on my app (no background task is launched or anything). Funny thing is that my PC plays the sound it should when it recieves the notification, but phone plays default sound every time.
I need to at least play preset windows sound, but playing custom sound from local files would be ace (this doesn't work with custom sounds neither). Also if you know if there's a possibility to start playing music from background task triggered by toast notification let me know, I couldn't find any info on google on this matter.
This is the microsoft link that tells my xml is good (even though it doesn't work): https://msdn.microsoft.com/en-us/library/windows/apps/br230842.aspx
I don't have any toast handling on my app (no background task is launched or anything). Funny thing is that my PC plays the sound it should when it recieves the notification, but phone plays default sound every time.
Looks like all values which prefix is ms-winsoundevent:Notification.Looping will be replaced by system sound while set loop element to false. Based on my understanding, this should be an expected result, these values are for Looping audio, if you need to disable looping, use the first 5 values, for example: ms-winsoundevent:Notification.IM
but playing custom sound from local files would be ace (this doesn't work with custom sounds neither)
This is a known issue which was mentioned in this article
The reason is path parser has an issue to resolve ms-appx:/// path, so the audio src will be regarded as Invalid, then the default sound will be played.
The workaround is copying your wav audio file programmatically to LocalFolder and using the "ms-appdata:///local/" protocol, for example:
private async void Button_Click(object sender, RoutedEventArgs e)
{
Windows.Storage.StorageFile audioFile = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/sound.wav"));
Windows.Storage.StorageFolder localFolder = Windows.Storage.ApplicationData.Current.LocalFolder;
await audioFile.CopyAsync(localFolder);
AddNotification();
}
public void AddNotification()
{
ToastTemplateType toastTemplate = ToastTemplateType.ToastText02;
XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);
XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");
toastTextElements[0].AppendChild(toastXml.CreateTextNode("This is a Toast Message"));
IXmlNode toastNode = toastXml.SelectSingleNode("/toast");
((XmlElement)toastNode).SetAttribute("launch", "MainPage.xaml");
XmlElement audio = toastXml.CreateElement("audio");
audio.SetAttribute("src", "ms-appdata:///local/sound.wav"); //Here
toastNode.AppendChild(audio);
ToastNotification toast = new ToastNotification(toastXml);
ToastNotificationManager.CreateToastNotifier().Show(toast);
}
The following code worked when I followed the tutorial using a new project:
http://www.amazedsaint.com/2011/09/hellotiles-simple-c-xaml-application.html
However, I am unable to get the application's tile to update when I plug-in the same code to my real project.
I have rebuilt the package.
I have uninstalled and redeployed the app.
I have updated the wide logo image file.
I have verified that the same code works when creating a new project.
I have verified the app manifest as suggested by the linked tutorial.
How does this work fine in one solution but not the other?
public MainPage()
{
this.InitializeComponent();
ClearTileNotification();
SendTileTextNotification("Why isn't this working!");
}
void ClearTileNotification()
{
// the same TileUpdateManager can be used to clear the tile since
// tile notifications are being sent to the application's default tile
TileUpdateManager.CreateTileUpdaterForApplication().Clear();
}
void SendTileTextNotification(string text)
{
// Get a filled in version of the template by using getTemplateContent
var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
// You will need to look at the template documentation to know how many text fields a particular template has
// get the text attributes for this template and fill them in
var tileAttributes = tileXml.GetElementsByTagName("text");
tileAttributes[0].AppendChild(tileXml.CreateTextNode(text));
// create the notification from the XML
var tileNotification = new TileNotification(tileXml);
// send the notification to the app's default tile
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
}
I'm trying to use tiles templates(a tile which shows an image and switches to show text)
http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx#TileSquarePeekImageAndText04
The question is: where do I put this XML and how can I call it in XAML?
You don't call it in XAML, you provide it to a TileUpdater instance, as you can see from the documentation for TileUpdateManager below. This simplistic scenario handles a local notification (but there are also scheduled, periodic, and push notifications you can leverage).
Take a look at the App tiles and badges and Push and periodic notifications samples for guidance.
function sendTileTextNotification() {
var Notifications = Windows.UI.Notifications;
// Get an XML DOM version of a specific template by using getTemplateContent.
var tileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileWideText03);
// You will need to look at the template documentation to know how many text fields a particular template has.
// Get the text attribute for this template and fill it in.
var tileAttributes = tileXml.getElementsByTagName("text");
tileAttributes[0].appendChild(tileXml.createTextNode("Hello World!"));
// Create the notification from the XML.
var tileNotification = new Notifications.TileNotification(tileXml);
// Send the notification to the calling app's tile.
Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
}
I have a gadget that is a glossary with a number of different pages. users can upload new words to the data source and those words will be pulled into the glossary through an AJAX call.
I want to resize the gadget window everytime the window is re-sized OR a new letter is selected and the page height changes (ie the gadget html block height).
Google developers has posted this on their website. However, this clearly is not working for me. The scrolling is not registering on the iframe and the height is not adjusting when the window is resized.
Here are my ModulePrefs
title="Climate Policy and Science Glossary"
description="Paragraph format"
height="300"
scrolling="true">
<Require feature="dynamic-height"/>
<Require feature="opensocial-0.8" />
Here is the gadget's script telling it to adjust:
window.onresize = adjust;
function adjust() {
var wndwH = gadgets.window.getViewportDimensions().height,
wgtH = $('#_glossary').closest('html').height,
h = Math.min(wndwH, wgtH);
gadgets.window.adjustHeight(h);
}
gadgets.util.registerOnLoadHandler(adjust);
What's going on? Am I doing something wrong or is there anyone else out there having trouble with Google's dynamic height??
The adjust function really only needs:
function adjust() {
gadgets.window.adjustHeight();
}
That should fit everything automatically.