stepan.fiala
Topic Author
Posts: 5
Joined: 21 Jun 2021, 16:20

Recommended solution for DPI-aware mobile app

24 Jun 2021, 16:58

We're working on UI for a mobile game. Ideally, all fixed-size elements should have a similar physical size on all devices, regardless of the device's DPI. For example, 100x200 px button should have 1x2 Inches on all screens (provided the reference DPI is 100).

There should be a native support in .NET 4.6.2 (see here https://github.com/microsoft/WPF-Sample ... /readme.md), but is there a recommended solution for the current version of Noesis?
 
User avatar
jsantos
Site Admin
Posts: 3905
Joined: 20 Jan 2012, 17:18
Contact:

Re: Recommended solution for DPI-aware mobile app

25 Jun 2021, 19:43

Noesis 3.1, right now in beta, will have native support for DPIs. Please, stay tuned, C# SDK is going to be released very soon.
 
stepan.fiala
Topic Author
Posts: 5
Joined: 21 Jun 2021, 16:20

Re: Recommended solution for DPI-aware mobile app

25 Jun 2021, 22:22

That's cool, thanks!
 
User avatar
SL_Rico
Posts: 12
Joined: 03 Jul 2021, 08:18

Re: Recommended solution for DPI-aware mobile app

06 Jul 2021, 06:43

Good morning everyone!

I'm absolutely thrilled about the upcoming new version. But to come back to the initial question: Is there any way to do it in the current version of Noesis?
In my case: I'm on Unity 2021.1.13f1 using the Noesis 3.0.12 unity package and building for Android. Here's a snipped from the code I wrote so far:
<Grid Grid.Row="3" VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*" />
        <ColumnDefinition Width="90*" />
        <ColumnDefinition Width="5*" />
    </Grid.ColumnDefinitions>

    <Viewbox Grid.Column="1">
        <ListBox ItemsSource="{Binding LogEntries}">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
                    <Setter Property="Background" Value="Transparent" />

                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <ContentPresenter />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="10*" />
                            <RowDefinition Height="5*" />
                            <RowDefinition Height="85*" />
                        </Grid.RowDefinitions>

                        <TextBlock Grid.Row="0"
                                   FontWeight="Bold" 
                                   FontSize="10"
                                   TextWrapping="Wrap">
                            <TextBlock.Text>
                                <MultiBinding StringFormat="{}{0} | Age {1}">
                                    <Binding Path="Month" Converter="{StaticResource MonthConverter}" />
                                    <Binding Path="Age" />
                                </MultiBinding>
                            </TextBlock.Text>
                        </TextBlock>

                        <TextBlock Grid.Row="2"
                                   TextWrapping="Wrap"
                                   FontSize="10"
                                   Text="{Binding Message}" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Viewbox>
</Grid>
And this is how it looks like:
Screenshot_6.png
The content of the message can vary a lot between a few words and multiple sentences. So the overall FontSize within this Grid ia primarily based on the content of the message.
That's not the desired behavior, the font size should stay the same independent from what the content is and especially on which device it runs.

Is there any way in the current version of Noesis to keep the same FontSize independent from the contents and from the DPI of the device?

Thank you in advance :)
 
User avatar
sfernandez
Site Admin
Posts: 2983
Joined: 22 Dec 2011, 19:20

Re: Recommended solution for DPI-aware mobile app

06 Jul 2021, 13:56

Hi, the workaround for 3.0 version is to use a LayoutTransform in the root xaml with a scale depending on the device DPI:
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Name="Root">
  <Grid.LayoutTransform>
    <ScaleTransform/>
  </Grid.LayoutTransform>
  ...
</Grid>
void Start()
{
  NoesisView view = GetComponent<NoesisView>();
  ScaleTransform t = (ScaleTransform)view.Content.LayoutTransform;
  t.ScaleX = t.ScaleY = Screen.dpi / 96.0f;
}
Hope this helps.
 
User avatar
sfernandez
Site Admin
Posts: 2983
Joined: 22 Dec 2011, 19:20

Re: Recommended solution for DPI-aware mobile app

06 Jul 2021, 16:30

Reviewing your xaml I just noticed you are using a Viewbox to wrap the ListBox, and that the ListBox doesn't have a fixed size. So depending on the number of entries it will scale the ListBox and all the content.

I think you don't want to use a Viewbox in this scenario, you should place the ListBox directly inside the Grid (so it stretches the content depending on the resolution) and then do the scaling as I mentioned before using a LayoutTransform in the root of the xaml depending on the device DPIs.

Is that what you are looking for?
 
User avatar
SL_Rico
Posts: 12
Joined: 03 Jul 2021, 08:18

Re: Recommended solution for DPI-aware mobile app

06 Jul 2021, 23:49

Hi sfernandez!

Thank you so much for your reply, you saved my day :D It's working now and I also applied the additional hint with the missing fixed size.

Kind regards
Rico

Who is online

Users browsing this forum: Google [Bot] and 67 guests