Is there any way of displaying components in various devices to fit its width and height proportionally. I set my main page stackpanel’s dock as “Top” which include all elements to display on that page. It works nicely in iPhone 5s iPad retina and also on Samsung Galaxy S5. but when I export it to HP 10 Plus tablet those elements in stackpanel are going to up. I want to display them proportionally to that device. Hope you can give some guidelines to fix this issue.
Please show some code to illustrate the challenge, otherwise it’s impossible to provide the right solution.
If you’re looking for a way to manually control what particular elements look like, depending on device screen size, look into using WhileWindowSize trigger.
The way I searched was adjusting all components to the device screen size automatically. Then I followed your suggested way and it is working nicely. I want to figure out the way I am using is the best way for my requirement.
This is the code I implemented for resizing task.
<WhileWindowSize GreaterThan="400,400">
<Change rect1.Height="400" Duration=".5"/>
<Change rect1.Width="400" Duration=".5"/>
</WhileWindowSize>
<ScrollView Background="#fff">
<Grid RowCount="6" Columns="1*,1*,1*">
<Rectangle ux:Name="rect1" Fill="Purple" Width="100" Height="100" CornerRadius="10" Padding="5" Row="0" Column="0" >
<Text Value="Doctors" Alignment="VerticalCenter" Color="#fff" Clicked="{goToMainPage}" />
<WhilePressed>
<Scale Factor="1.5" Duration="0.5" />
</WhilePressed>
</Rectangle>
</Grid>
</ScrollView>
If all you want is square blocks inside of your Grid, you could put BoxSizing="FillAspect" Aspect="1" on the cells. Seeing what you’ve done there, I would like to suggest the following approach which solves the challenge:
<App>
<ScrollView>
<!-- by default, on a phone in portrait, the number of columns is 3 -->
<!-- the number of rows is undefined, it depends on how many items there are in the grid -->
<Grid ux:Name="theGrid" ColumnCount="3" CellSpacing="2" Margin="2">
<Item Tint="Purple" Label="Doctors" />
<Item Tint="Blue" Label="Nurses" />
<Item Tint="Green" Label="Teachers" />
<Item Tint="Teal" Label="Programmers" />
<Item Tint="Maroon" Label="Mechanics" />
<Item Tint="Gray" Label="Pilots" />
</Grid>
</ScrollView>
<Panel ux:Class="Item" BoxSizing="FillAspect" Aspect="1">
<string ux:Property="Label" />
<float4 ux:Property="Tint" />
<Text Value="{ReadProperty Label}" Alignment="Center" Color="#fff" />
<Rectangle Color="{ReadProperty Tint}" CornerRadius="8" />
</Panel>
<!-- according to Material design guidelines, anything that has screen of 600pt in any direction is a tablet -->
<WhileWindowSize ux:Class="WhileTablet" GreaterThan="599,1" />
<!-- when on a tablet in portrait, change the number of columns to 4 -->
<WhileWindowPortrait>
<WhileTablet>
<Change theGrid.ColumnCount="4" />
</WhileTablet>
</WhileWindowPortrait>
<!-- when in landscape... -->
<WhileWindowLandscape>
<!-- ... on a tablet, change the number of columns to 6 -->
<WhileTablet>
<Change theGrid.ColumnCount="6" />
</WhileTablet>
<!-- ... on a phone, change the number of columns to 4 -->
<WhileTablet Invert="true">
<Change theGrid.ColumnCount="4" />
</WhileTablet>
</WhileWindowLandscape>
</App>
Thanks, mate. I’m on it.
@Uldis, When I am going to use custom components to be view on different devices it does not give any change. The way I should use for those components is the same or are there any different method to do so???
I don’t understand your question.
I have designed a login screen with two text inputs and one button. The thing I want is enlarging the height of text inputs and button.
<Grid RowCount="2" Alignment="VerticalCenter">
<StackPanel Margin="10" ItemSpacing="15">
<Image ux:Name="logo" File="../../Assets/logo.png" MaxWidth="300" MaxHeight="250">
<Translation Y="-205"/>
</Image>
<MyTextBox ux:Name="mobileTextbox" PlaceholderText="{Resource MobileNumber}">
<Translation X="205" />
</MyTextBox>
<MyTextBox PlaceholderText="{Resource NIC}" ux:Name="nicTextbox">
<Translation X="-205" />
</MyTextBox>
<SubmitButton ux:Name="submitButton" Text="{Resource Submit}" BtnColor="#FF5733" FontSize="18" Alignment="VerticalCenter" Font="DefaultRegular" Clicked="{goToSummaryPage}" >
<Translation Y="205" />
</SubmitButton>
</StackPanel>
</Grid>
And what have you tried to achieve “The thing I want is enlarging the height of text inputs and button.”?
I believe my complete example provides you with all the tools you need in order to do what you want. If not, please post a complete, minimal, ready-to-run example, ask very specific questions and we can take it from there.
My challenge is to run my app with different devices which having various screen sizes. When I am previewing this to different devices, components height is not changing(Components sizes are remaining same even with devices which have larger screens). I tried the way you suggested earlier. but I was unable to acquire my requirement. Sorry for the inconvenience you faced when understanding my problem.
You still have not shared anything one could take a look at to understand what the problem is.
Share a complete, minimal example of your code. Something that is ready to be copy-pasted and run.
And then, share some pictures of what happens and what should happen.
This is my code for the above-mentioned login screen.
<Grid RowCount="2" Alignment="VerticalCenter">
<StackPanel Margin="10" ItemSpacing="15">
<Image ux:Name="logo" File="../../Assets/logo.png" MaxWidth="300" MaxHeight="250">
<Translation Y="-205"/>
</Image>
<MyTextBox ux:Name="mobileTextbox" PlaceholderText="{Resource MobileNumber}">
<Translation X="205" />
</MyTextBox>
<MyTextBox PlaceholderText="{Resource NIC}" ux:Name="nicTextbox">
<Translation X="-205" />
</MyTextBox>
<SubmitButton ux:Name="submitButton" Text="{Resource Submit}" BtnColor="#FF5733" FontSize="18" Alignment="VerticalCenter" Font="DefaultRegular" Clicked="{goToSummaryPage}" >
<Translation Y="205" />
</SubmitButton>
</StackPanel>
</Grid>
It fits nicely to the mobile (Samsung Galaxy S5)
But when I export my code to HP 10 Plus tablet, It looks like as follows,
I need to increase the height of these components to proportionally to the device screen.
And where is the code that shows what you have tried so far to achieve your goal? I don’t see any Change or WhileWindowSize in there.
Also, this is not a complete example. I can’t copy-paste and run it.
Sorry I have done a mistake while typing the thread. I achieved my requirement using “BoxSizing” and “Aspect” values. Thanks so much for your kind help.
Ok, great! Please also check our new article about Responsive layout (just published!), you might learn something new.
Hats off!!! Guess I can solve all my issues using Responsive layout. Thanks again!!!