- stepan.fiala
- Posts: 5
- Joined:
Recommended solution for DPI-aware mobile app
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?
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?
Re: Recommended solution for DPI-aware mobile app
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
- Posts: 5
- Joined:
Re: Recommended solution for DPI-aware mobile app
That's cool, thanks!
Re: Recommended solution for DPI-aware mobile app
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:
And this is how it looks like:
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 :)
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:
Code: Select all
<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>
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 :)
-
sfernandez
Site Admin
- Posts: 2983
- Joined:
Re: Recommended solution for DPI-aware mobile app
Hi, the workaround for 3.0 version is to use a LayoutTransform in the root xaml with a scale depending on the device DPI:
Hope this helps.
Code: Select all
<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>
Code: Select all
void Start()
{
NoesisView view = GetComponent<NoesisView>();
ScaleTransform t = (ScaleTransform)view.Content.LayoutTransform;
t.ScaleX = t.ScaleY = Screen.dpi / 96.0f;
}
-
sfernandez
Site Admin
- Posts: 2983
- Joined:
Re: Recommended solution for DPI-aware mobile app
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?
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?
Re: Recommended solution for DPI-aware mobile app
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
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