Dynamic Fontsize

22 Oct 2014, 14:00

Hello again.

As we have been working with Android and iPhone lately we have seen that there we need to be able to change the font size of the application depending on what resolution the device has.
So I attempted to use a DynamicResource like this:

<sys:Double x:Key="BigFontSize">32</sys:Double>

and figured I could reference it in CodeBehind similar to this:

_bigFontSize = root.TryFindResource<Double>("BigFont");

But Double is not derived from BaseComponent so I cannot. So I dive into documentation and find SystemDouble, which is derived from BaseComponent. But I cannot find system double in Noesis.

I might be totally on the wrong field here, but it seemed like a viable way of doing it.

Is there a way to either get this to work or to achieve the same effect using a different solution?

22 Oct 2014, 20:07

The way you tried cannot be done with NoesisGUI, and I don't know if WPF will permit it neither.

My first attempt to deal with different resolutions will be to use some Viewbox'es. You design your UI in a fixed resolution and then wrap everything with one or more Viewbox'es. So it gets automatically scaled to any resolution keeping the proportions you specified.

But if you want some kind of FontSize setting I would probably use data binding for these. This way you can change in your code behind that value and all the bindings will automatically reflect the change.

22 Oct 2014, 23:16

Hello.
That is a good idea, I will try it.

I think my solution should work in WPF I found it on StackXchange as an answer to a similar question, just not related to Noesis or Unity.

It would be really awesome if you could set the FontSize as a relative sizes like CSS's em. And then be able to change the FontSize of the root. I know it's not supported by WPF or any of the other XAML frameworks, but it would be very useful. Especially for game development in Unity where you have a very wide range of aspect ratios and resolutions to account for.

23 Oct 2014, 09:34

What type should I use in the Binding? If I use Double/double i get this error:

Exception: Can't launch PropertyChanged event. Property 'FontLarge' not registered for type 'Assets.Scripts.GUI.MySettings'
Noesis.Error.Check () (at Assets/Plugins/NoesisGUI/Scripts/Core/NoesisError.cs:60)
Noesis.Extend.Noesis_LaunchChangedEvent (IntPtr unityType, IntPtr cPtr, IntPtr propertyName) (at Assets/Plugins/NoesisGUI/Scripts/Core/NoesisExtendImports.cs:99)
Noesis.Extend.PropertyChanged (System.Type type, IntPtr cPtr, System.String propertyName) (at Assets/Plugins/NoesisGUI/Scripts/Core/NoesisExtend.cs:1261)
Noesis.BaseComponent.NotifyPropertyChanged (System.String propertyName) (at Assets/Plugins/NoesisGUI/Scripts/Proxies/BaseComponentExtend.cs:45)
Assets.Scripts.GUI.MySettings.set_FontLarge (Double value) (at Assets/Scripts/GUI/MySettings.cs:20)
GameGUI.EditorWindow.Start () (at Assets/GUI/GUI/EditorWindow.cs:47)

If I use float I get no error but nothing happens to the text.

Here is my binding object:

[Extended]
    public class ResAdjustment : BaseComponent
    {
        private double _fontLarge;
        private double _fontMedium;
        private double _fontSmall;

        public Double FontLarge
        {
            get { return _fontLarge; }
            set
            {
                if (_fontLarge == value) return;
                _fontLarge = value;
                NotifyPropertyChanged("FontLarge");
            }
        }

        public Double FontMedium
        {
            get { return _fontMedium; }
            set
            {
                if (_fontMedium == value) return;
                _fontMedium = value;
                NotifyPropertyChanged("FontMedium");
            }
        }

        public Double FontSmall
        {
            get { return _fontSmall; }
            set
            {
                if (_fontSmall == value)return;
                _fontSmall = value;
                NotifyPropertyChanged("FontSmall");
            }
        }
    }

23 Oct 2014, 12:34

You should be using a float or int property to bind to the FontSize dependency property in the xaml.

I build up the following sample and it seems to work correctly:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel TextElement.FontSize="{Binding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="Hello World" Margin="0,2"/>
        <TextBlock Text="Fixed Font Size" FontSize="{Binding FixedSize}" Margin="0,2"/>
        <ListBox Margin="0,2">
            <ListBoxItem Content="Item 1"/>
            <ListBoxItem Content="Item 2"/>
            <ListBoxItem Content="Item 3"/>
            <ListBoxItem Content="Item 4"/>
        </ListBox>
        <Button x:Name="btnUp" Content="Bigger Font" Margin="0,2"/>
        <Button x:Name="btnDn" Content="Smaller Font" Margin="0,2"/>
    </StackPanel>
</Grid>

using UnityEngine;
using System;
using Noesis;

[Extended]
public class ViewModel : BaseComponent
{
    private float _fontSize;
    public float FontSize
    {
        get { return _fontSize; }
        set { _fontSize = value; NotifyPropertyChanged("FontSize"); }
    }

    public float FixedSize { get; set; }
}

public class Test : MonoBehaviour
{
    ViewModel _vm;

    public void Start()
    {
        var gui = GetComponent<NoesisGUIPanel>();
        var root = gui.GetRoot<Grid>();

        _vm = new ViewModel { FontSize = 12.0f, FixedSize = 30.0f };
        root.SetDataContext(_vm);

        var btnUp = root.FindName<Button>("btnUp");
        btnUp.Click += btnUp_Click;

        var btnDn = root.FindName<Button>("btnDn");
        btnDn.Click += btnDn_Click;
    }

    void btnUp_Click(BaseComponent sender, RoutedEventArgs e)
    {
        _vm.FontSize += 2.0f;
    }

    void btnDn_Click(BaseComponent sender, RoutedEventArgs e)
    {
        _vm.FontSize -= 2.0f;
    }
}

Are you doing anything different to this?

23 Oct 2014, 12:42

It would be really awesome if you could set the FontSize as a relative sizes like CSS's em. And then be able to change the FontSize of the root. I know it's not supported by WPF or any of the other XAML frameworks, but it would be very useful. Especially for game development in Unity where you have a very wide range of aspect ratios and resolutions to account for.

As you can check with my previous example, it is totally possible to set the FontSize in the root, and that value is inherited by all the children elements and its descendants.

Some DependencyProperties have a Inherits flag set that allows them to transfer a value set in a container to all its descendants. For example: FrameworkElement.DataContext, Control.FontFamily, Control.FontSize, Control.FontWeight... and many more.

Dynamic Fontsize

Dynamic Fontsize

Re: Dynamic Fontsize

Re: Dynamic Fontsize

Re: Dynamic Fontsize

Re: Dynamic Fontsize

Re: Dynamic Fontsize

Who is online