Like for my other windows phone 8 projects I wanted to use a custom font. But with the new Universal app architecture I struggle to put that in place.
I have created a "Fonts" folder in the shared project, I added the fonts files with the property Build Action to "Content".
I also created a "Themes" folder in the shared project and I added a ResourceDictionnary to it ("Generic.xaml").
I added a FontFamily resource :
<FontFamily x:Key="RexBoldFontFamily">/Fonts/Rex Bold.otf#Rex Bold</FontFamily>
I referenced it in the App.xaml like that:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Themes/Generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
<vm:ViewModelLocator x:Key="Locator" d:IsDataSource="true" />
</ResourceDictionary>
</Application.Resources>
In my MainPage.xaml on my Windows Phone project I tried to use it like this:
<TextBlock Text="{Binding HelloWorld}" Foreground="{ThemeResource RedBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="{StaticResource RexBoldFontFamily}" FontSize="22"/>
I know for sure that this is the name of the font because this works on one of my windows phone app. And all of this is well wired because it works well with a color resource.
Any one succeded to share the font and use it,
You're doing it all right, except for the font name (part after the '#'). It seems to be Rex, not Rex Bold.
<FontFamily x:Key="RexBoldFontFamily">/Fonts/Rex Bold.otf#Rex</FontFamily>
Use this code in ur xaml
<TextBlock x:Name="txtblk" HorizontalAlignment="Left" TextWrapping="Wrap" FontFamily="Assets/filename.ttf#Font Name"/>
Related
I have a logo, which is used in certain places of my application. So I'd like to store it's path in a variable of my App.axaml file, which should allow me to reference this path as variable in the entire application. This works fine with colors like StepBoxBG
<Application.Resources>
<Color x:Key="StepBoxBG">#5eba00</Color>
<Image x:Key="LogoPath">/Assets/Logos/logo.png</Image>
</Application.Resources>
which I reference using DynamicResource in e.g. a border element like this
<Border Background="{DynamicResource StepBoxBG}" Padding="20">
...
</Border>
But when my logo path is referenced in the same way
<Image Height="90" Source="{DynamicResource LogoPath}" />
no logo is displayed. The path is correct, because when I use the path directly in the Image element it works:
<Image Height="90" Source="/Assets/Logos/logo.png" />
I found this question and tried it, so the App.axaml looks like this:
<Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:My.App"
xmlns:imaging="clr-namespace:Avalonia.Media.Imaging;assembly=Avalonia.Visuals"
x:Class="ULabs.Image2Card.App">
<Application.DataTemplates>
<local:ViewLocator/>
</Application.DataTemplates>
<Application.Styles>
<FluentTheme Mode="Light"/>
</Application.Styles>
<Application.Resources>
<Color x:Key="StepBoxBG">#5eba00</Color>
<imaging:Bitmap x:Key="LogoPath">
<x:Arguments>
<x:String>/Assets/Logos/logo.png</x:String>
</x:Arguments>
</imaging:Bitmap>
</Application.Resources>
</Application>
Now it throws an exception, because it refers this as an absolute path instead of being relative to the project:
System.IO.DirectoryNotFoundException: "Could not find a part of the path 'C:\Assets\Logos\logo.png'."
I set build action to AvaloniaResource so it should be included in my assembly. Also tried <x:String>Assets/Logos/ul-logo.png</x:String>, now the exception refers to the debug folder (bin/Debug/net5.0/Assets).
How can I specify a resource that just holds the /Assets/Logos/logo.png path and resolve it as hard-coded paths in the <Image> element would do?
You cannot use a Control subclass (Image) in <Application.Resources>. In WPF you would usually use a BitmapImage.
However, BitmapImage is not available in Avalonia, but you can resort to ImageBrush as an alternative, see this great example:
https://github.com/AvaloniaUI/Avalonia/issues/7211#issuecomment-998036759
Adapting the example only slightly to your use case, you could define Logo as follows in App.axaml:
<Application.Resources>
<Color x:Key="StepBoxBG">#5eba00</Color>
<ImageBrush x:Key="Logo" Source="/Assets/Logos/logo.png" />
</Application.Resources>
Finally, one would refer to it in this way:
<Image Height="90" Source="{Binding Source={StaticResource Logo}, Path=Source}" />
I trying write app in WPF (C#) and I would like use ttf font for digital clock style.
I get font from internet, in archive i have 4 files. Add it to project into Font folder. Actions for file is Resource and Copy always. Then i add font-resource for my control in xaml:
<Control.Resources>
<FontFamily x:Key="DS-Digital">.\..\Fonts\#DS-Digital</FontFamily>
</Control.Resources>
And use it to TextBlock:
<TextBlock FontFamily="{StaticResource DS-Digital}"
Foreground="GreenYellow"
Text="{Binding GameTime, Converter={StaticResource SecondsCoverter}}"/>
It work. But it font not monospace. Then I downloaded another font. It monospace. In new archive i had only one file. Add it to project and use like previous font:
<Control.Resources>
<FontFamily x:Key="DS-Digital">.\..\Fonts\#DS-Digital</FontFamily>
<FontFamily x:Key="MonoDigital">.\..\Fonts\#Digital-7</FontFamily>
</Control.Resources>
and
<TextBlock FontFamily="{StaticResource MonoDigital}"
Foreground="GreenYellow"
Text="{Binding GameTime, Converter={StaticResource SecondsCoverter}}"/>
But it not applied. What i doing wrong?
Thank you for answer and sorry my english.
I have created a global font resource in App.xaml like this:
<Application.Resources>
<ResourceDictionary>
<FontFamily x:Key="GlobalFontLight">Arial</FontFamily>
<FontFamily x:Key="GlobalFont">Segoe UI</FontFamily>
<FontFamily x:Key="GlobalFontBold">Caibri</FontFamily>
</ResourceDictionary>
</Application.Resources>
In MainPage I have added a TextBlock:
<TextBlock Text="Some text" FontFamily="{StaticResource GlobalFont}" Foreground="Black"/>
<TextBlock Text="Some text 2" FontFamily="{StaticResource GlobalFontLight}" Foreground="Black"/>
<TextBlock Text="Some text 3" FontFamily="{StaticResource GlobalFontBold}" Foreground="Black"/>
And it is ok, TextBlock use my global font.
Now, I want to change that global font in Application Resources. I have tried next code:
Application.Current.Resources["GlobalFont"] = new FontFamily("Arial");
But nothing happens, TextBlock still use the old font. If I run this code before InitializeComponent(); then it is working as I want, but after that no. Anyone knows what do I do wrong? How to achieve this dynamic change of font?
Because UWP does not support DynamicResource this is quite a problem. The StaticResource and ThemeResource extensions won't save you here, because they are bound only when evaluated and will not update for the already-evaluated properties when the underlying resource changes.
The first option would be to navigate back and navigate to the same page again, so that the controls get reloaded and the resources evaluated anew.
If you want something more dynamic, please check out my answer on this SO question. If you follow that solution, you can create a class implementing INotifyPropertyChanged that will contain a property of type FontFamily, store this instance in a StaticResource and then use binding instead of StaticResource like this:
<TextBlock Text="{Binding Font, Source={StaticResource CustomUISettings}}" />
I wan to change style myButton
so but when I come to add, a message show: the resource "AppBarButtonStyle" could not be resolved.
and I discover that it just support three templates:
NavigationBackButtonNormalStyle
NavigationBackButtonSmallStyle
TextBlockButtonStyle
How can I add app bar button styles or some element the same AppBarButtonStyle in Express 2013 for windows
Verify that the ResourceDictionary holding your Style is Visible in the Controls Scope;
Try this :
<Button x:Name="myButton" Style="{StaticResource AppBarButtonStyle}">
<Button.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/YourAssembly;component/Resources/ButtonStyles.xaml"/> <!--Basically your path to the ResourceDictionary-->
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Button.Resources>
</Button>
Change the YourAssembly to your your assembly's name which holds the style.
Hope it helps :)
I am writing a style for a custom control derived directly from Control. Visual Studio places the style for a "Custom Control (WPF)" in the Themes\generic.xaml file. My style contains an image which I can't get displayed, seems there's something special about how to set the Source for an image from within the generic.xaml file.
I managed to reproduce the issue with a simpler scenario. Create a "WPF Custom Control library" then add a style for buttons like so, in the themes\generic.xaml . Here's my complete generic.xaml:
<ResourceDictionary
...
<Style TargetType="{x:Type Button}">
<Setter Property="Content">
<Setter.Value>
<Image Source="SmallHandle.png"></Image>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
After this I have create a UserControl (in the same project) containing just a button (for the sake of testing out the style) like so:
<UserControl x:Class="BlendControls.UserControl1"
...
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Button/>
</UserControl>
I have added the SmallHandle.png in the root project directory, in the themes directory, I have added it also to the good old Resources page, tried changing the build action to resource, embedded resource, tried copying the image manually to the build directory, but to no effect. The image is never displayed.
This must be related to the generic.xaml file, because copying the entire style to the same file where the Button is placed works fine. That is, the following works as expected:
<UserControl x:Class="BlendControls.UserControl1"
...
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Content">
<Setter.Value>
<Image Source="SmallHandle.png"></Image>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Button></Button>
</UserControl>
So, how should I set the Source of images from generic.xaml? Or alternatively, where should I put the styles/templates for custom controls?
---- Solution ----
As pointed out by Sheridan, I have to use the "full" pack URI notation as:
pack://application,,,/MyAssembly;components/SmallHandle.png
This looks strange to me, as the image is in the same assembly. Not sure, looks like I am referencing from outside the dll.
There's nothing unusual about accessing an image in Generic.xaml, you're just not referencing it correctly. You can reference a resource file in the project assembly using this format:
<Image Source="/AssemblyName;component/Subfolder/SmallHandle.png" />
If your images are directly inside the project root (which is not recommended), then you can access them like this:
<Image Source="/AssemblyName;component/SmallHandle.png" />
If your images are in a folder in another project, then you can access it like this:
<Image Source="/ReferencedAssembly;component/Subfolder/SmallHandle.png" />
See the Pack URIs in WPF page on MSDN for more information.
UPDATE >>>
In .NET 4, the above Image.Source values would work. However, Microsoft made some horrible changes in .NET 4.5 that broke many different things and so in .NET 4.5, you'd need to use the full pack path like this:
<Image Source="pack://application:,,,/AssemblyName;component/Images/image_to_use.png">
If you don't feel as though your generic.xaml is being picked up, you can reference it from your App.cs.xaml like this:
<App.Resources>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MY.NAMESPACE;component/Themes/generic.xaml" />
</ResourceDictionary.MergedDictionaries>
</App.Resources>
Your generic.xaml file should be marked as "Resource".
Also, your image file should be marked as "Resource".
Finally, reference your ImageSource like this:
<Image Source="Themes/IMAGE.png" />
or try
<Image Source="../Themes/IMAGE.png" />
Personally, I like to put my style templates in their own .xaml file, and reference them all as MergedDictionaries.
Typed base style in Themes\Generic style is automatically applied only to Custom Control.
If you need use typed based style in your user control you need add generic.xaml to user control resources.
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Themes/Generic.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
Also change Image Source URI to
<Image Source="pack://application:,,,/WpfCustomControlLibrary1;component/SmallHandle.png" />