How to change font family for Xamarin Shell FlyoutItem - xaml

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:

Related

Implementing TeachingTip control for a UWP App

To install the TeachingTip-control in my UWP app, I've done the following stepts:
installed Microsoft.UI.Xaml package via Nuget in my project
Added <XamlControlsResources xmlns = "using:Microsoft.UI.Xaml.Controls" /> into App.xaml.
Imported Namespace xmlns:controls="using:Microsoft.UI.Xaml.Controls"
I implemented the TeachingTip-control as follows:
<Button x:Name="BackButton"
Background="{x:Null}"
Content="Back"
Click="BackButton_Click">
<Button.Resources>
<controls:TeachingTip x:Name="ToggleThemeTeachingTip"
Target="{x:Bind BackButton}"
Title="Change themes without hassle"
Subtitle="It's easier than ever to see control samples in both light and dark theme!"
CloseButtonContent="Got it!">
</controls:TeachingTip>
</Button.Resources>
</Button>
<Button x:Name="TeachingTipButton"
Click="TeachingTipButton_OnClick">
</Button>
private void TeachingTipButton_OnClick(object sender, RoutedEventArgs e)
{
ToggleThemeTeachingTip.IsOpen = true;
}
When I call the function I get the following DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION error (probably UI error), which I do not understand:
What could be the problem? Why does not my code work?
Edit:
I have now determined that the error is due to App.xaml. After I've installed the Nuget package Microsoft.UI.Xaml, it's expected to add the following code in App.xaml:
But I have already in App.xaml other settings and resources:
When I try to add only the line in App.xaml a key error occurs:
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
If I give the resource entry a key like this:
<XamlControlsResources x: Key = "XamlControlsResources" xmlns = "using: Microsoft.UI.Xaml.Controls" />
 It comes to a completely different error:
Windows.UI.Xaml.Markup.XamlParseException: "The text for this error is not found.
Can not find a Resource with the Name / Key TeachingTipBackgroundBrush
How can I properly add the resource <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/> correctly in my App.xaml?
Your App.xaml file needs to look like this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</ResourceDictionary.MergedDictionaries>
<!-- Other styles here -->
<Style TargetType="Button">
...
</Style>
</ResourceDictionary>
</Application.Resources>
I pasted your code into my project and it worked. However, the code you provided above doesn't have Content for the triggering button, so the only button which appears is the top button. Are you sure you're not failing because of code in BackButton_Click rather than TeachingTipButton_OnClick?
You can remove the duplicate reference to Microsoft.UI.Xaml.Controls from Application.Resources
I solved my problem by removing ContentDialog Size style and Default Button style so that <Application.Resources> has only <XamlControlsResources x: Key = "XamlControlsResources" xmlns = "using: Microsoft.UI.Xaml.Controls" /> as a single entry. In my case, multiple entries in <Application.Resources> </Application.Resources> are unfortunately not accepted.

UWP The attachable property 'Resources' was not found in type 'Style'

In ResourceDictionary file I have a style and I try to add few resources to that style. Unfortunately, the member Resources is not recognized or is not accessible. I need keep resources explicitly within a style.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestProject.Resources">
<Style>
<Style.Resources> <!--Style doesn't like it here-->
Uwp's style seems to doesn't like it. Is there any equivalent or sufficient workaround? Or I am doing something completely wrong.
Style does not have Resources property (see documentation). Controls and visual elements do. If you want to add resources, you can add them either under a control, all on the same level as the Style element:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestProject.Resources">
<SolidColorBrush x:Key="MyBrush" ... />
<Style>
<!-- use MyBrush in this style -->
If you define resources on the same level as the Style they will be unfortunately available globally, but that is similar how the default UWP styles are defined in the default XAML resource dictionaries (generic.xaml).

How to localize page title using resource files (.resw)?

I need to translate the title of basic page in windows8 app. Here is a xaml string:
<Page.Resources>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Uid="title_select_profile" x:Key="AppName">Select profile</x:String>
</Page.Resources>
So, the trick with Uid doesn't work here. How to get accsess to this string from resource file?

Metro ui: how to play audio stream in background mode

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/

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.