• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
#win8acad : Building a Windows 8 Metro Style UI
 

#win8acad : Building a Windows 8 Metro Style UI

on

  • 1,199 views

 

Statistics

Views

Total Views
1,199
Views on SlideShare
1,199
Embed Views
0

Actions

Likes
0
Downloads
50
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    #win8acad : Building a Windows 8 Metro Style UI #win8acad : Building a Windows 8 Metro Style UI Presentation Transcript

    • <ToggleSwitch Header="Wi-fi networking" x:Name="MyToggle"/>MyToggle.Toggled += new RoutedEventHandler(ToggleWifi);
    • HTML:<div data-win-control="WinJS.UI.Toggle" data-win-options="{title: Wi-fi networking}" id="myToggle"</div> myToggle "change"
    • <div data-win-control="WinJS.Binding.Template" id="myTemplate" > <div style="width: 110px; margin: 10px"> <img data-win-bind="src: picture" style="height: 60px; width: 60px" /> <input type="button" data-win-bind="value: buttonText" /> </div></div><div height="400" data-win-control="WinJS.UI.ListView" id="listview1" data-win-options="{dataSource: myData, itemRenderer: myTemplate}"></div>
    • <DataTemplate x:Key="MyTemplate"> <Grid Width="110" Margin="10,10,10,10"> <Image Source="{Binding Image}" Height="60" Width="60"> <Button Content="{Binding ButtonText}" > </Grid></DataTemplate><ItemsPanelTemplate x:Key="MyGridItemsPanelTemplate"> <WrapGrid MaximumRowsOrColumns="3" VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Left"/></ItemsPanelTemplate><Grid Height="400"> <GridView x:Name="ListView1" Width="Auto" Height="Auto” ItemTemplate="{StaticResource MyTemplate}" ItemContainerStyle="{StaticResource MyTileStyle}" ItemsPanel="{StaticResource MyGridItemsPanelTemplate}"/></Grid>
    • <DataTemplate x:Key="MyTemplate"> <Grid Width="110" Margin="10,10,10,10"> <Image Source="{Binding Image}" Height="60" Width="60"> <Button Content="{Binding ButtonText}" > </Grid></DataTemplate><Grid Height="400"> <ListView x:Name="ListView1" Width="Auto" Height="Auto” ItemTemplate="{StaticResource MyTemplate}" /></Grid>
    • 1,1 1,21,2 2,2
    • PA 4/23/201MICROSOFT
    • <div data-win-control="Win.UI.Controls.Viewbox"data-win-options ="{width: 1024, height: 768}"> /* Fixed content area goes inside here, scaling will maintain aspect ratio */</div>
    • { /* Re-arrange and hide/show content */
    • <Grid x:Name="LayoutRoot"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="OrientationStates"> <VisualState x:Name="FullScreen" /> <VisualState x:Name="Filled" /> <VisualState x:Name="Snapped" /> <VisualState x:Name="Portrait" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups></Grid>
    • Adding controls and content Adding controls and contentAdding app bars and Adding app bars andcommands commandsAdding flyouts