Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FOR WINDOWS 8 CAMP ATTENDEE USE ONLYNOT FOR REDISTRIBUTIONhttp://aks.ms/windows8campinabox                                ...
<ToggleSwitch   Header="Wi-fi networking”   x:Name="MyToggle" /> MyToggle.Toggled += new RoutedEventHandler(MyToggle_Toggl...
HTML:<div data-win-control="WinJS.UI.Toggle"    data-win-options="{title: Wi-fi networking}"    id="myToggle"</div>       ...
* Not in XAML built-in controls set, available via 3rd party
* Not in XAML built-in controls set, available via 3rd party
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">    <div class="smallL...
<DataTemplate x:Key="StoreFrontTileTemplate">    <StackPanel Orientation="Horizontal" Margin="10,10,0,0">        <Image So...
1,1   1,21,2   2,2
PA 9/14/201MICROSOFT
PA 9/14/201MICROSOFT
<Grid x:Name="LayoutRoot" Background="Green">      <Grid.ColumnDefinitions>            <ColumnDefinition Width="250" />   ...
<Grid x:Name="LayoutRoot" Background="Green">       <Grid.ColumnDefinitions>           <ColumnDefinition Width="250" />   ...
<Grid x:Name="LayoutRoot" Background="Green" Width="600" Height="100">    <Grid.ColumnDefinitions>        <ColumnDefinitio...
<div data-win-control="Win.UI.Controls.Viewbox"data-win-options ="{width: 1024, height: 768}">   /* Fixed content area goe...
{    /* Re-arrange and hide/show content */
<Grid x:Name="LayoutRoot">     <VisualStateManager.VisualStateGroups>           <VisualStateGroup x:Name="                ...
public static string GetViewState()        {            var orientation =                DisplayProperties.CurrentOrientat...
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">        <Image Source="Assets/product.png" Width="100"    Height="100" />...
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
WinStore.vn - Training Windows 8 UI
Upcoming SlideShare
Loading in …5
×

WinStore.vn - Training Windows 8 UI

403 views

Published on

http://winstore.vn

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WinStore.vn - Training Windows 8 UI

  1. 1. FOR WINDOWS 8 CAMP ATTENDEE USE ONLYNOT FOR REDISTRIBUTIONhttp://aks.ms/windows8campinabox http://dev.windows.com http://devcamps.ms/windows win8tkfb@microsoft.com
  2. 2. <ToggleSwitch Header="Wi-fi networking” x:Name="MyToggle" /> MyToggle.Toggled += new RoutedEventHandler(MyToggle_Toggled);
  3. 3. HTML:<div data-win-control="WinJS.UI.Toggle" data-win-options="{title: Wi-fi networking}" id="myToggle"</div> myToggle "change"
  4. 4. * Not in XAML built-in controls set, available via 3rd party
  5. 5. * Not in XAML built-in controls set, available via 3rd party
  6. 6. <div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <div class="smallListIconTextItem"> <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" /> <div class="smallListIconTextItem-Detail"> </div> </div></div><!-- Call WinJS.UI.processAll() in your initialization code --><div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.dataSource, itemTemplate: smallListIconTextTemplate, selectionMode: none, tapBehavior: none, swipeBehavior: none, layout: { type: WinJS.UI.GridLayout } }"></div>
  7. 7. <DataTemplate x:Key="StoreFrontTileTemplate"> <StackPanel Orientation="Horizontal" Margin="10,10,0,0"> <Image Source="{Binding Image}" Height="60" Width="60" VerticalAlignment="Center"Margin="0,0,10,0"/> <TextBlock TextWrapping="Wrap" Style="{StaticResource ItemTitleStyle}" Width="200“ /> </StackPanel></DataTemplate> <Style x:Key="StoreFrontTileStyle" TargetType="GridViewItem"> <Setter Property="FontFamily" Value="Segoe UI" /> <Setter Property="Foreground" Value="White" /> <Setter Property="Height" Value="80" /> <Setter Property="Width" Value="292" /> <Setter Property="TabNavigation" Value="Local" /></Style><Grid Height="300" VerticalAlignment="Top"> <GridView x:Name="ItemGridView" Background="White" ItemTemplate="{StaticResource StoreFrontTileTemplate}" ItemContainerStyle="{StaticResource StoreFrontTileStyle}" BorderBrush="LightGray"/></Grid>
  8. 8. 1,1 1,21,2 2,2
  9. 9. PA 9/14/201MICROSOFT
  10. 10. PA 9/14/201MICROSOFT
  11. 11. <Grid x:Name="LayoutRoot" Background="Green"> <Grid.ColumnDefinitions> <ColumnDefinition Width="250" /> <ColumnDefinition Width="250" /> <ColumnDefinition Width="250" /> </Grid.ColumnDefinitions> <Rectangle Fill="Red" Grid.Column="1" /></Grid>
  12. 12. <Grid x:Name="LayoutRoot" Background="Green"> <Grid.ColumnDefinitions> <ColumnDefinition Width="250" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="250" /> </Grid.ColumnDefinitions> <Rectangle Fill="Red" Grid.Column="1" /></Grid>
  13. 13. <Grid x:Name="LayoutRoot" Background="Green" Width="600" Height="100"> <Grid.ColumnDefinitions> <ColumnDefinition Width="80" /> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Content="Hello World" Grid.Column="1" HorizontalAlignment="Stretch" /></Grid>
  14. 14. <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>
  15. 15. { /* Re-arrange and hide/show content */
  16. 16. <Grid x:Name="LayoutRoot"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name=" "> <VisualState x:Name="FullScreen" /> <VisualState x:Name="Filled" /> <VisualState x:Name="Snapped" /> <VisualState x:Name="Portrait" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups></Grid>
  17. 17. public static string GetViewState() { var orientation = DisplayProperties.CurrentOrientation; // portrait if (orientation == DisplayOrientations.Portrait || orientation == DisplayOrientations.PortraitFlipped) return "Portrait"; // else return what it is for landscape return ApplicationLayout.Value.ToString(); }
  18. 18. <Grid x:Name="LayoutRoot" Background="#FF0C0C0C"> <Image Source="Assets/product.png" Width="100" Height="100" /></Grid>

×