Layout Aware Metro App?
Coding help & support using visual basic.
7 posts
Page 1 of 1
Hello.
Can anyone guide me how to make layout aware metro apps?
I have made my app in the landscape view but wish to extend it to the fill, snapped view too.
#CodenStuff, #Scottie1972 any help?
Regards,
Skillful
Can anyone guide me how to make layout aware metro apps?
I have made my app in the landscape view but wish to extend it to the fill, snapped view too.
#CodenStuff, #Scottie1972 any help?
Regards,
Skillful
Instead of LOL use this -
LSIBMHBIWFETALOL
Which means -
Laughing silently in between my head because it wasn't funny enough to actually laugh out loud!
LSIBMHBIWFETALOL
Which means -
Laughing silently in between my head because it wasn't funny enough to actually laugh out loud!
First in your page XAML you need to add visual state management code
The easiest way to change your page layout is by using state recording in devices which is the tab next to the toolbox (you need to be in XAML view for this):
Next to VIEW option are four icons that will show your app a different view states so clicking any of those will show you what your app will look like in that view. Choose a view for example snapped and below it is another option VISUAL STATE and below that is a check box ENABLE STATE RECORDING which is what makes things nice and easy.
When you turn on state recording everything you do to layout (changing size, location, colour of controls etc) will be saved automatically into the visual state code..when you finish moving things around so it looks good in the current view state just turn off state recording and its all saved for you.
Yes that should get you started cooll;
Code: Select all
Then in your main code you need to add the code that will handle visual state changes. This code for visual state change: <VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape" />
<VisualState x:Name="Filled"></VisualState>
<VisualState x:Name="FullScreenPortrait"></VisualState>
<VisualState x:Name="Snapped"></VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Code: Select all
Then in the OnnavigatedTo event add this event handler: Private Sub MainPage_SizeChanged(sender As Object, e As SizeChangedEventArgs)
Select Case ApplicationView.Value
Case ApplicationViewState.Snapped
VisualStateManager.GoToState(Me, "Snapped", True)
Case ApplicationViewState.FullScreenLandscape
'VisualStateManager.GoToState(Me, "FullScreenLandscape", True)
Case ApplicationViewState.FullScreenPortrait
VisualStateManager.GoToState(Me, "FullScreenPortrait", True)
Case ApplicationViewState.Filled
VisualStateManager.GoToState(Me, "Filled", True)
End Select
End Sub
Code: Select all
Now your set up to handle visual changes. AddHandler SizeChanged, AddressOf MainPage_SizeChanged
The easiest way to change your page layout is by using state recording in devices which is the tab next to the toolbox (you need to be in XAML view for this):
Next to VIEW option are four icons that will show your app a different view states so clicking any of those will show you what your app will look like in that view. Choose a view for example snapped and below it is another option VISUAL STATE and below that is a check box ENABLE STATE RECORDING which is what makes things nice and easy.
When you turn on state recording everything you do to layout (changing size, location, colour of controls etc) will be saved automatically into the visual state code..when you finish moving things around so it looks good in the current view state just turn off state recording and its all saved for you.
Yes that should get you started cooll;
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.
Thanks for the answer #CodenStuff cooll;
Just one more question though, how do I ensure that the controls are on the centre of the screen no matter what resolution you put it in?
Just one more question though, how do I ensure that the controls are on the centre of the screen no matter what resolution you put it in?
Instead of LOL use this -
LSIBMHBIWFETALOL
Which means -
Laughing silently in between my head because it wasn't funny enough to actually laugh out loud!
LSIBMHBIWFETALOL
Which means -
Laughing silently in between my head because it wasn't funny enough to actually laugh out loud!
For just a single control you can set it horizontalalignment and verticalalignment properties to center with no margin. If you need to center a few controls then maybe you could put them inside a grid and align that grid center with no margin like:
Code: Select all
<Grid HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Height="400" Width="400">
<!-- Place controls here -->
</Grid>
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.
Hmm...the second part of the help worked but I am unable to select any other option other than <Base> in the Visual State combo box in the devices tab.
I am also unable to check the Enable State Recording checkbox as it appears to be disabled. Any solution?
I am also unable to check the Enable State Recording checkbox as it appears to be disabled. Any solution?
Instead of LOL use this -
LSIBMHBIWFETALOL
Which means -
Laughing silently in between my head because it wasn't funny enough to actually laugh out loud!
LSIBMHBIWFETALOL
Which means -
Laughing silently in between my head because it wasn't funny enough to actually laugh out loud!
Save the project and they should activate..you have to save changes in XAML or main code before they can be used by each other for some reason.
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.
NVM solved that problem. Thanks a ton
Instead of LOL use this -
LSIBMHBIWFETALOL
Which means -
Laughing silently in between my head because it wasn't funny enough to actually laugh out loud!
LSIBMHBIWFETALOL
Which means -
Laughing silently in between my head because it wasn't funny enough to actually laugh out loud!
7 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023