#win8acad : Building a Windows 8 Metro Style UI
-
Upload
frederik-bruyne -
Category
Technology
-
view
1.063 -
download
3
Transcript of #win8acad : Building a Windows 8 Metro Style UI
<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,2
2,2 1,2
4/23/201
2
PA
GE
38
MICROSOFT
CONFIDENTIAL
<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 app bars and
commands
Adding flyouts
Adding controls and content
Adding app bars and
commands