How to draw view length based on device size

How-to Discussions
1

Hello!
I want to adjust the size of the panel or font by the horizontal and vertical resolution of the device. That is, we want to represent the view in different lengths depending on the size of the device.

I used a function to measure the size of the device.

However, the way I write it seems to dirty the source too. I want to know if there is another good way.

Help me :slight_smile:

var width = Observable();
var height = Observable();

function placed(args) {
  width.value = args.width;
  height.value = args.height;
}

<Panel Height="{height}/19.685714286" Margin="{width}/53.571428571,0" Clicked="{changedGender}">
            <Text Value="Change" FontSize="{width}/31.25" Alignment="Center" Color="White" />
            <Rectangle ux:Name="test" Layer="Background" Color="Purple" >
                <DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000020" />
                <Stroke Width="0.3" Color="Purple"/>
            </Rectangle>
            <WhilePressed>
                <Scale Factor=".98" Duration=".08" Easing="QuadraticOut" />
            </WhilePressed>
        </Panel>
2

If I were you, I would look into using several WhileWindowSize triggers, and Change the Width, Height or whatever other properties of elements from within those.

You could even define your own “groups of devices” by subclassing WhileWindowSize, like so:

<WhileWindowSize ux:Class="WhileTablet" GreaterThan="599,1" />
...
<WhileTablet>
    <Change somePanel.Width="300" />
</WhileTablet>

Working with explicit dimensions probably isn’t ideal though. I’d suggest creating fully flexible layout, or using % instead of points.

Hope this helps!