Getting Display Density

Hi!

I’m working on app that should be available for Phones and Tablets. But in tablets, we need to adjust the height of some items, because the image inside that elements are cropped

Phone

I’ve tried the solution proposed here, but it seems not working right on my case.

So i decided to try something different. I’ll try to bind the Height of the element to an Observable, and calculate that value based on the device Display Density. Since i can;t find a property on FuseJS/Environment that exposes the Display Density, my plan is to build a class that returns the value from the Display.Density value.

That is my code:

using Fuse;
using Fuse.Scripting;
using Uno.UX;
using Uno.Platform;
using Uno.Collections;

[UXGlobalModule]
public class Density: NativeModule
{
    public static float get() {
        return Display.Density;
    }
}

But i get a error while compile

 E3122: Uno.Platform.Display.Density is non-static and cannot be accessed from a static context

Before going further, i’m here to ask if there’s some undocumented property that exposes that property. If not i’ll try to find a solution (or adopt one if you are kind to suggest me one)

Thanks

Jonatan

Sorry, but i find out what i done wrong with this solution.

Now it looks far better. This is my code now:

    <Panel ux:Class="item" Margin="5">
        <WhileWindowPortrait>
            <Change Item.Height="80" />  
            <WhileTablet>
                <Change Item.Height="180" />
            </WhileTablet>
        </WhileWindowPortrait>

        <WhileWindowLandscape>
            <Change Item.Height="80" /> 
            <WhileTablet>
                <Change Item.Height="180" />
            </WhileTablet>
            <WhileTablet Invert="true">
                <Change Item.Height="180" />
            </WhileTablet>
        </WhileWindowLandscape>    
        <Panel ux:Name="Item" Height="80">
            <Image Layer="Background" File="img/image-original.jpg" StretchMode="UniformToFill" StretchSizing="Natural" Alignment="TopLeft" />
        </Panel>
    </Panel>    

It’s not perfect, because on landscape on Phones it shows the height of the Tablets, i don’t know why, but its far better than before.

Thanks!

Jonatan

John Mohl wrote:

Sorry, but i find out what i done wrong with this solution.

Now it looks far better. This is my code now:

    <Panel ux:Class="item" Margin="5">
        <WhileWindowPortrait>
            <Change Item.Height="80" />  
            <WhileTablet>
                <Change Item.Height="180" />
            </WhileTablet>
        </WhileWindowPortrait>

        <WhileWindowLandscape>
            <Change Item.Height="80" /> 
            <WhileTablet>
                <Change Item.Height="180" />
            </WhileTablet>
            <WhileTablet Invert="true">
                <Change Item.Height="180" />
            </WhileTablet>
        </WhileWindowLandscape>    
        <Panel ux:Name="Item" Height="80">
            <Image Layer="Background" File="img/image-original.jpg" StretchMode="UniformToFill" StretchSizing="Natural" Alignment="TopLeft" />
        </Panel>
    </Panel>    

It’s not perfect, because on landscape on Phones it shows the height of the Tablets, i don’t know why, but its far better than before.

Thanks!

Jonatan

Thank you for providing a solution. I have the same pb and your approach could help me to solve it.
Cheers.
Aldric

@John:

There’s a bit of an issue with this code:

<WhileWindowPortrait>
    <Change Item.Height="80" />  
    <WhileTablet>
        <Change Item.Height="180" />
    </WhileTablet>
</WhileWindowPortrait>

When you have a “tablet” in “portrait”, both Changes will get applied, and the result is unpredictable. Modifiers on the same target should be mutually exclusive. If you take a look at the responsive layout docs you linked and scroll down to where the example code is, you’ll see how the While*-triggers only describe mutually exclusive deviations from the rest state. That’s exactly what you should have.

But! That same example shows you another trick which you for some reason haven’t picked up. It’s about making Grid cells to be exactly square, disregarding the viewport size and orientation:

<DockPanel BoxSizing="FillAspect" Aspect="1">

Hope this helps!

Thanks Uldis! I’m trying it right now.

Sometimes while dive deeper on Fuse, and don’t understand something, i get nervous. Then, i start touching everything and try to figure out.

No Idea

I’ll read more carefully in the future!

Thanks again