Layout Aware Metro App?

Coding help & support using visual basic.
7 posts Page 1 of 1
Contributors
User avatar
Skillful
Skillful Coders
Skillful Coders
Posts: 969
Joined: Tue Nov 16, 2010 10:07 am

Layout Aware Metro App?
Skillful
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
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!
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

Re: Layout Aware Metro App?
CodenStuff
First in your page XAML you need to add visual state management code
Code: Select all
    <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>
Then in your main code you need to add the code that will handle visual state changes. This code for visual state change:
Code: Select all
    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
Then in the OnnavigatedTo event add this event handler:
Code: Select all
        AddHandler SizeChanged, AddressOf MainPage_SizeChanged
Now your set up to handle visual changes.

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):
Image

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.
User avatar
Skillful
Skillful Coders
Skillful Coders
Posts: 969
Joined: Tue Nov 16, 2010 10:07 am

Re: Layout Aware Metro App?
Skillful
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?
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!
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

Re: Layout Aware Metro App?
CodenStuff
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.
User avatar
Skillful
Skillful Coders
Skillful Coders
Posts: 969
Joined: Tue Nov 16, 2010 10:07 am

Re: Layout Aware Metro App?
Skillful
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?
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!
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

Re: Layout Aware Metro App?
CodenStuff
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.
User avatar
Skillful
Skillful Coders
Skillful Coders
Posts: 969
Joined: Tue Nov 16, 2010 10:07 am

Re: Layout Aware Metro App?
Skillful
NVM solved that problem. :) Thanks a ton :D
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!
7 posts Page 1 of 1
Return to “Visual Basic”