Successfully reported this slideshow.

#win8acad : Building a Windows 8 Metro Style UI

1,610 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

#win8acad : Building a Windows 8 Metro Style UI

  1. 1. <ToggleSwitch Header="Wi-fi networking" x:Name="MyToggle"/>MyToggle.Toggled += new RoutedEventHandler(ToggleWifi);
  2. 2. HTML:<div data-win-control="WinJS.UI.Toggle" data-win-options="{title: Wi-fi networking}" id="myToggle"</div> myToggle "change"
  3. 3. <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>
  4. 4. <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>
  5. 5. <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>
  6. 6. 1,1 1,21,2 2,2
  7. 7. PA 4/23/201MICROSOFT
  8. 8. <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>
  9. 9. { /* Re-arrange and hide/show content */
  10. 10. <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>
  11. 11. Adding controls and content Adding controls and contentAdding app bars and Adding app bars andcommands commandsAdding flyouts

×