Metro ui: how to play audio stream in background mode - windows-8

I am implementing audio player that will should be able play real time PCM stream while application goes to background mode. All solutions (XAudio2, IAudioClient2) I have tried so far stop playback as soon as app goes into background.
Any help is appriciated. Thanks.

i am sure this should be possible.. it is in WP7 so don't see why Win8 would be impossible. quick search yields http://blogs.msdn.com/b/windowsappdev/archive/2012/05/16/being-productive-when-your-app-is-offscreen.aspx which has a link to Build (yes Build) to Background audio.
Here's a link to WinRT c# sample http://code.msdn.microsoft.com/windowsapps/Background-Audio-in-WinRT-344bcf4d
Another one here by which shows you how easy it is to configure Media Element to do background audio
http://babaandthepigman.wordpress.com/2012/03/17/metro-background-audio-c-consumer-preview/

You need to use a MediaElement with the AudioCategory=BackgroundCapable property. It needs to be instantiated on a XAML page.
Apply this style to your root frame:
<Style x:Key="RootFrameStyle" TargetType="Frame">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Frame">
<Grid>
<MediaElement x:Name="MediaPlayer" AudioCategory="BackgroundCapableMedia" AutoPlay="True" />
<ContentPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then you can play media like this:
var rootGrid = VisualTreeHelper.GetChild(Window.Current.Content, 0);
var mediaElement = (MediaElement)VisualTreeHelper.GetChild(rootGrid, 0);
mediaElement.Source = new Uri("ms-appx:///relative/path/to/file.mp3");
You then need to declare your app capable of background audio in the app manifest.
Full explanation on my blog here: http://rikk.it/2012/10/background-audio-in-a-metro-c-sharp-app/

Related

How to change font family for Xamarin Shell FlyoutItem

Is there any way to change the font family of contents inside FlyoutItem in Xamarin Forms Shell?
I've already added custom .ttf fonts in shared project as embedded resource and also registered the font file with the assembly using the file, AssemblyInfo.cs.
Any help would be appreciated.
For Shell Flyout content (Flyout Items + menu items) you can use a style with FlyoutItemLabelStyle class:
<Style ApplyToDerivedTypes="True" Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="FontFamily" Value="YourFontExportName"/>
</Style>
From docs Style FlyoutItem and MenuItem objects.
Related questions
How to use Font Awesome icons in project as an icon of ImageButton
Using Material Design Icons with Xamarin Forms - What Am I Missing?
Like Cfun said, you could set the Shell Flyout items font with the FlyoutItemLabelStyle.
Add the font to your Xamarin.Forms shared project as an embedded resource (Build Action: EmbeddedResource).
Register the font file with the assembly, in a file such as AssemblyInfo.cs, using the ExportFont attribute. An optional alias can also be specified.
AssemblyInfo.cs:
[assembly: ExportFont("Trashtalk.ttf", Alias = "Trashtalk")]
Add this Font in your style.
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="FontFamily" Value="Trashtalk" />
</Style>
Screenshot:

Metro modal flyout disables itself

I have used metro mahhapps flyout like this:
<Grid>
<Controls:FlyoutsControl>
<Controls:Flyout IsModal="True" IsOpen="True" Header="Flyout" Position="Right" Width="200">
<!-- Your custom content here -->
</Controls:Flyout>
</Controls:FlyoutsControl>
</Grid>
and it disables everything, even itself - I can not close it, nor can I close my application.
Am I doing something wrong?
The Flyouts container must be located on MetroWindow level.
<Controls:MetroWindow.Flyouts>
<Controls:FlyoutsControl>
<Controls:Flyout IsModal="True" IsOpen="True" Header="Flyout" Position="Right" Width="200">
<!-- Your custom content here -->
</Controls:Flyout>
</Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>

Xamarin Forms image binding on url with default on embedded resource

i have a Xamarin ListView with images from internet. I would to show a default image (from embedded resource), and, when present, the image from an url.
I've tryied with this code but works only with UriImageSource, not for the embedded resource:
<ListView ItemsSource="{Binding Data}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Image>
<Image.Source>
<!-- does not works
<ImageSource>
{utils:ImageResource Namespace.Assets.img-placeholder.png}
</ImageSource>
-->
<UriImageSource Uri="{Binding ImageUri}"></UriImageSource>
</Image.Source>
</Image>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
if i use
<Image Source="{utils:ImageResource Namespace.Assets.img-placeholder.png}" />
this works showing the embedded resource default image
The model:
public Uri ImageUri => Image != null ?
new Uri($"http://www.example.com/{Image}")
: null;
Any help? Thanks
You can use FFImageLoading library.
According to its documentation:
LoadingPlaceholder
ImageSource property. If set, a loading placeholder is shown while
loading. It supports UriImageSource, FileImageSource and
StreamImageSource.
ErrorPlaceholder
ImageSource property. If set, if error occurs while loading image, an
error placeholder is shown. It supports UriImageSource,
FileImageSource and StreamImageSource.
You don't have to make it that complicated. From your viewmodel you simply provide a string ImageUri and bind it to Image.Source
<Image Source="{Binding ImageUri}" />
this works for images from the web as well as resources, but they have to live in your platform projects. For Android you'll have to put them to Resources\drawable (or the respective folders for other resolutions) and set the build action to AndroidResource, for iOS to Resources (in different sizes with the #2x, #3x suffices, e.g. img-placeholder#2x.png) and set the build action to bundle resource. You can now set the placeholder from your viewmodel:
if(!HasRemoteImage(response))
{
ImageUri = "img-placeholder.png";
}
Xamarin.Forms will create the ImageSource automatically for you.
One main advantage over resources you load directly is, that you don't have to care which image is the right one for the current resolution. Xamarin/Xamarin.Forms does that automatically for you.

XAML MediaElement Play() method not working in code

Hi I have a Windows Phone app with a MediaElement window defined in XAML to play a video file:
<MediaElement x:Name="mediaWindow" MediaEnded="mediaWindow_MediaEnded" Stretch="UniformToFill" HorizontalAlignment="Left" Height="225" Margin="15,127,0,0" VerticalAlignment="Top" Width="450" AutoPlay="True"/>
When I call this in C# code it play fine:?
mediaWindow.Source = new Uri(loc, UriKind.Relative);
But something strange is happening eg when the user navigates to a new page a MediaElement on that page should kickin and play an audio file but I doesn't. If I comment out the code above which play the video then the audio file on the navigated to page works OK.
I've tried using in XAML:?
<MediaElement x:Name="mediaWindow" MediaEnded="mediaWindow_MediaEnded" Stretch="UniformToFill" HorizontalAlignment="Left" Height="225" Margin="15,127,0,0" VerticalAlignment="Top" Width="450" AutoPlay="False"/>
and in C#:
mediaWindow.Source = new Uri(loc, UriKind.Relative);
mediaWindow.Play();
But this just shows a black screen!?
These is another MediaElement defined in XAML on the original page which I use to play an audio file, could this be the problem? If so what can I do to play the audio file and a video file on the same page? I've read I could use MediaPlayer for the audio file but I tried defining that in c# code but it does not exixt in namespace even though I have included:
using System.Windows.Media;
This is driving me crazy, new to C#, help appreciated here.
Many thanks
Did you try giving the source of the video within the XAML? and make the AutoPlay to false.
<MediaElement x:Name="mediaSimple"
Source="Videos/video1.mp4"
Stretch="UniformToFill" AutoPlay="False"/>
and give the mediaSimple.Play() within a button click event handler.

Windows Phone ApplicationBar BackgroundColor property style XamlParseException

I had a lot of pages in my application and I had decided to make a global ApplicationBar style in App.Resources:
<Style TargetType="shell:ApplicationBar">
<Setter Property="BackgroundColor" Value="#006699" />
</Style>
However, when I tried to start the app, VS gave me an error:
The property 'BackgroundColor' was not found in type 'Microsoft.Phone.Shell.ApplicationBar'.
This isn't true - ApplicationBar.BackgroundColor Property. What's the problem?
I believe, ApplicationBar properties cannot use Binding or styling the way you're trying, as it is not a silverlight control. Although you can put the whole applicationbar as a resource. Like so
<shell:ApplicationBar x:Key="MyAppBar" IsVisible="True" BackgroundColor="#006699">
<shell:ApplicationBarIconButton IconUri="/Images/image.png" Text="image" IsEnabled="True"/>
</shell:ApplicationBar>
EDIT:
Or you could just put this in the resource if you want your application bar color to change.
<shell:ApplicationBar x:Key="MyAppBar" IsVisible="True" BackgroundColor="#006699">
</shell:ApplicationBar>
And add buttons from code behind. although, I haven't come across a scenario where this would help.