SlideShare a Scribd company logo
1 of 71
Download to read offline
<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



1,2   2,2
PA 4/23/201
MICROSOFT
<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 content

Adding app bars and           Adding app bars and
commands                      commands

Adding flyouts
#win8acad : Building a Windows 8 Metro Style UI

More Related Content

What's hot

Open analytics | Cameron Sim
Open analytics | Cameron SimOpen analytics | Cameron Sim
Open analytics | Cameron Sim
Open Analytics
 
Ch09 -Managing State and Information Security
Ch09 -Managing State and Information SecurityCh09 -Managing State and Information Security
Ch09 -Managing State and Information Security
dcomfort6819
 
Simple blog wall creation on Java
Simple blog wall creation on JavaSimple blog wall creation on Java
Simple blog wall creation on Java
Max Titov
 
Nk API - examples
Nk API - examplesNk API - examples
Nk API - examples
nasza-klasa
 

What's hot (16)

HTML5
HTML5HTML5
HTML5
 
Web storage
Web storageWeb storage
Web storage
 
Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...
Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...
Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...
 
Open analytics | Cameron Sim
Open analytics | Cameron SimOpen analytics | Cameron Sim
Open analytics | Cameron Sim
 
Whats New for WPF in .NET 4.5
Whats New for WPF in .NET 4.5Whats New for WPF in .NET 4.5
Whats New for WPF in .NET 4.5
 
HTML5 DRAG AND DROP
HTML5 DRAG AND DROPHTML5 DRAG AND DROP
HTML5 DRAG AND DROP
 
Ch09 -Managing State and Information Security
Ch09 -Managing State and Information SecurityCh09 -Managing State and Information Security
Ch09 -Managing State and Information Security
 
Php ssession - cookies -introduction
Php ssession - cookies -introductionPhp ssession - cookies -introduction
Php ssession - cookies -introduction
 
Simple blog wall creation on Java
Simple blog wall creation on JavaSimple blog wall creation on Java
Simple blog wall creation on Java
 
State management in ASP.NET
State management in ASP.NETState management in ASP.NET
State management in ASP.NET
 
PHP with MYSQL
PHP with MYSQLPHP with MYSQL
PHP with MYSQL
 
4시간만에 따라해보는 Windows 10 앱 개발 샘플코드
4시간만에 따라해보는 Windows 10 앱 개발 샘플코드4시간만에 따라해보는 Windows 10 앱 개발 샘플코드
4시간만에 따라해보는 Windows 10 앱 개발 샘플코드
 
Cookies in php lecture 2
Cookies in php  lecture  2Cookies in php  lecture  2
Cookies in php lecture 2
 
Nk API - examples
Nk API - examplesNk API - examples
Nk API - examples
 
Acessibilidade - o Novo Modo Deus no Android
Acessibilidade - o Novo Modo Deus no AndroidAcessibilidade - o Novo Modo Deus no Android
Acessibilidade - o Novo Modo Deus no Android
 
The Principle of Hybrid App.
The Principle of Hybrid App.The Principle of Hybrid App.
The Principle of Hybrid App.
 

Viewers also liked

#win8acad : Building Metro Style Apps with XAML for .NET Developers
#win8acad : Building Metro Style Apps with XAML for .NET Developers#win8acad : Building Metro Style Apps with XAML for .NET Developers
#win8acad : Building Metro Style Apps with XAML for .NET Developers
Frederik De Bruyne
 
UX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа ДизайнаUX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа Дизайна
Ksenia Sternina
 
Introducing Apple Watch
Introducing Apple WatchIntroducing Apple Watch
Introducing Apple Watch
JJ Wu
 

Viewers also liked (17)

Getting started with microsoft azure in 30 mins
Getting started with microsoft azure in 30 minsGetting started with microsoft azure in 30 mins
Getting started with microsoft azure in 30 mins
 
Microsoft to Acquire LinkedIn: Overview for Investors
Microsoft to Acquire LinkedIn: Overview for InvestorsMicrosoft to Acquire LinkedIn: Overview for Investors
Microsoft to Acquire LinkedIn: Overview for Investors
 
Metro UI interaction design guidelines @Microsoft Tech.Days 2011
Metro UI interaction design guidelines @Microsoft Tech.Days 2011Metro UI interaction design guidelines @Microsoft Tech.Days 2011
Metro UI interaction design guidelines @Microsoft Tech.Days 2011
 
Microsoft Design principles and UI
Microsoft Design principles and UIMicrosoft Design principles and UI
Microsoft Design principles and UI
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft Story
 
Юзабилити. Как сделать сайт удобным (проектирование)
Юзабилити. Как сделать сайт удобным (проектирование)Юзабилити. Как сделать сайт удобным (проектирование)
Юзабилити. Как сделать сайт удобным (проектирование)
 
#win8acad : Building Metro Style Apps with XAML for .NET Developers
#win8acad : Building Metro Style Apps with XAML for .NET Developers#win8acad : Building Metro Style Apps with XAML for .NET Developers
#win8acad : Building Metro Style Apps with XAML for .NET Developers
 
Yu-Hsiu Li Design as one UXMY
Yu-Hsiu Li Design as one UXMYYu-Hsiu Li Design as one UXMY
Yu-Hsiu Li Design as one UXMY
 
Automating Your Microsoft Azure Environment (DevLink 2014)
Automating Your Microsoft Azure Environment (DevLink 2014)Automating Your Microsoft Azure Environment (DevLink 2014)
Automating Your Microsoft Azure Environment (DevLink 2014)
 
UX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа ДизайнаUX Research для интенсива UX&UI Британская Школа Дизайна
UX Research для интенсива UX&UI Британская Школа Дизайна
 
[Azure Council Experts (ACE) 第5回定例会] Microsoft Azureアップデート情報 (2014/04/16-2014...
[Azure Council Experts (ACE) 第5回定例会] Microsoft Azureアップデート情報 (2014/04/16-2014...[Azure Council Experts (ACE) 第5回定例会] Microsoft Azureアップデート情報 (2014/04/16-2014...
[Azure Council Experts (ACE) 第5回定例会] Microsoft Azureアップデート情報 (2014/04/16-2014...
 
BIH - Human Centered Design
BIH - Human Centered Design BIH - Human Centered Design
BIH - Human Centered Design
 
Azure Data Lake Analytics Deep Dive
Azure Data Lake Analytics Deep DiveAzure Data Lake Analytics Deep Dive
Azure Data Lake Analytics Deep Dive
 
LinkedIn Data Infrastructure (QCon London 2012)
LinkedIn Data Infrastructure (QCon London 2012)LinkedIn Data Infrastructure (QCon London 2012)
LinkedIn Data Infrastructure (QCon London 2012)
 
Azure Cloud PPT
Azure Cloud PPTAzure Cloud PPT
Azure Cloud PPT
 
ZeroMQ with NodeJS
ZeroMQ with NodeJSZeroMQ with NodeJS
ZeroMQ with NodeJS
 
Introducing Apple Watch
Introducing Apple WatchIntroducing Apple Watch
Introducing Apple Watch
 

Similar to #win8acad : Building a Windows 8 Metro Style UI

TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
Coulawrence
 
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road aheadWhat’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
Nguyên Phạm
 
TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5
Tieturi Oy
 
AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI
colleenfry
 
Developing your first application using FI-WARE
Developing your first application using FI-WAREDeveloping your first application using FI-WARE
Developing your first application using FI-WARE
Fermin Galan
 
Engage 2013 - Why Upgrade to v10 Tag
Engage 2013 - Why Upgrade to v10 TagEngage 2013 - Why Upgrade to v10 Tag
Engage 2013 - Why Upgrade to v10 Tag
Webtrends
 

Similar to #win8acad : Building a Windows 8 Metro Style UI (20)

TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Technical Preview: The New Shopware Admin
Technical Preview: The New Shopware AdminTechnical Preview: The New Shopware Admin
Technical Preview: The New Shopware Admin
 
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road aheadWhat’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
 
TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
Level ofdetail
Level ofdetailLevel ofdetail
Level ofdetail
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
smoke1272528461
smoke1272528461smoke1272528461
smoke1272528461
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
 
02.Designing Windows Phone Application
02.Designing Windows Phone Application02.Designing Windows Phone Application
02.Designing Windows Phone Application
 
Vaadin Components
Vaadin ComponentsVaadin Components
Vaadin Components
 
Getting Started Building Windows 8 HTML/JavaScript Metro Apps
Getting Started Building Windows 8 HTML/JavaScript Metro AppsGetting Started Building Windows 8 HTML/JavaScript Metro Apps
Getting Started Building Windows 8 HTML/JavaScript Metro Apps
 
AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
 
Developing your first application using FI-WARE
Developing your first application using FI-WAREDeveloping your first application using FI-WARE
Developing your first application using FI-WARE
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Engage 2013 - Why Upgrade to v10 Tag
Engage 2013 - Why Upgrade to v10 TagEngage 2013 - Why Upgrade to v10 Tag
Engage 2013 - Why Upgrade to v10 Tag
 
PHPConf-TW 2012 # Twig
PHPConf-TW 2012 # TwigPHPConf-TW 2012 # Twig
PHPConf-TW 2012 # Twig
 

More from Frederik De Bruyne

#win8acad : Tiles and notifications
#win8acad : Tiles and notifications#win8acad : Tiles and notifications
#win8acad : Tiles and notifications
Frederik De Bruyne
 
#win8aca : How and when metro style apps run
#win8aca : How and when metro style apps run#win8aca : How and when metro style apps run
#win8aca : How and when metro style apps run
Frederik De Bruyne
 
#win8acad : Integrating the Windows 8 Experience with Contracts
#win8acad : Integrating the Windows 8 Experience with Contracts#win8acad : Integrating the Windows 8 Experience with Contracts
#win8acad : Integrating the Windows 8 Experience with Contracts
Frederik De Bruyne
 
#win8acad : Platform for Metro Style Apps
#win8acad : Platform for Metro Style Apps#win8acad : Platform for Metro Style Apps
#win8acad : Platform for Metro Style Apps
Frederik De Bruyne
 
Microsoft Dynamics Academic Alliance: How to win future of business
Microsoft Dynamics Academic Alliance: How to win future of businessMicrosoft Dynamics Academic Alliance: How to win future of business
Microsoft Dynamics Academic Alliance: How to win future of business
Frederik De Bruyne
 
Microsoft Dynamics Academic Alliance: ERP in Training VDAB
Microsoft Dynamics Academic Alliance: ERP in Training VDABMicrosoft Dynamics Academic Alliance: ERP in Training VDAB
Microsoft Dynamics Academic Alliance: ERP in Training VDAB
Frederik De Bruyne
 
Microsoft Dynamics Academic Alliance: Partnership Next Steps
Microsoft Dynamics Academic Alliance: Partnership Next StepsMicrosoft Dynamics Academic Alliance: Partnership Next Steps
Microsoft Dynamics Academic Alliance: Partnership Next Steps
Frederik De Bruyne
 
Microsoft Dynamics Academic Alliance: Job Roles
Microsoft Dynamics Academic Alliance: Job RolesMicrosoft Dynamics Academic Alliance: Job Roles
Microsoft Dynamics Academic Alliance: Job Roles
Frederik De Bruyne
 
Microsoft Dynamics Academic Alliance: Academic Landscape
Microsoft Dynamics Academic Alliance: Academic LandscapeMicrosoft Dynamics Academic Alliance: Academic Landscape
Microsoft Dynamics Academic Alliance: Academic Landscape
Frederik De Bruyne
 
Microsoft Dynamics Academic Alliance: Introduction
Microsoft Dynamics Academic Alliance: IntroductionMicrosoft Dynamics Academic Alliance: Introduction
Microsoft Dynamics Academic Alliance: Introduction
Frederik De Bruyne
 
Students to Business Day 2012: Alex Turner
Students to Business Day 2012: Alex TurnerStudents to Business Day 2012: Alex Turner
Students to Business Day 2012: Alex Turner
Frederik De Bruyne
 
Students to Business Day 2012: Maarten Balliauw
Students to Business Day 2012: Maarten BalliauwStudents to Business Day 2012: Maarten Balliauw
Students to Business Day 2012: Maarten Balliauw
Frederik De Bruyne
 
Students to Business Day 2012: Sas
Students to Business Day 2012: SasStudents to Business Day 2012: Sas
Students to Business Day 2012: Sas
Frederik De Bruyne
 
Students to Business Day 2012: Rob Miles
Students to Business Day 2012: Rob MilesStudents to Business Day 2012: Rob Miles
Students to Business Day 2012: Rob Miles
Frederik De Bruyne
 
Students to Business Day 2012: Giuliano Dore
Students to Business Day 2012: Giuliano DoreStudents to Business Day 2012: Giuliano Dore
Students to Business Day 2012: Giuliano Dore
Frederik De Bruyne
 
Students to Business Day 2012: Pieter Vanhees
Students to Business Day 2012: Pieter VanheesStudents to Business Day 2012: Pieter Vanhees
Students to Business Day 2012: Pieter Vanhees
Frederik De Bruyne
 
Students to Business Day 2012: Joe Wilson
Students to Business Day 2012: Joe WilsonStudents to Business Day 2012: Joe Wilson
Students to Business Day 2012: Joe Wilson
Frederik De Bruyne
 
Students to Business Day 2012: Wouter Devinck
Students to Business Day 2012: Wouter DevinckStudents to Business Day 2012: Wouter Devinck
Students to Business Day 2012: Wouter Devinck
Frederik De Bruyne
 

More from Frederik De Bruyne (18)

#win8acad : Tiles and notifications
#win8acad : Tiles and notifications#win8acad : Tiles and notifications
#win8acad : Tiles and notifications
 
#win8aca : How and when metro style apps run
#win8aca : How and when metro style apps run#win8aca : How and when metro style apps run
#win8aca : How and when metro style apps run
 
#win8acad : Integrating the Windows 8 Experience with Contracts
#win8acad : Integrating the Windows 8 Experience with Contracts#win8acad : Integrating the Windows 8 Experience with Contracts
#win8acad : Integrating the Windows 8 Experience with Contracts
 
#win8acad : Platform for Metro Style Apps
#win8acad : Platform for Metro Style Apps#win8acad : Platform for Metro Style Apps
#win8acad : Platform for Metro Style Apps
 
Microsoft Dynamics Academic Alliance: How to win future of business
Microsoft Dynamics Academic Alliance: How to win future of businessMicrosoft Dynamics Academic Alliance: How to win future of business
Microsoft Dynamics Academic Alliance: How to win future of business
 
Microsoft Dynamics Academic Alliance: ERP in Training VDAB
Microsoft Dynamics Academic Alliance: ERP in Training VDABMicrosoft Dynamics Academic Alliance: ERP in Training VDAB
Microsoft Dynamics Academic Alliance: ERP in Training VDAB
 
Microsoft Dynamics Academic Alliance: Partnership Next Steps
Microsoft Dynamics Academic Alliance: Partnership Next StepsMicrosoft Dynamics Academic Alliance: Partnership Next Steps
Microsoft Dynamics Academic Alliance: Partnership Next Steps
 
Microsoft Dynamics Academic Alliance: Job Roles
Microsoft Dynamics Academic Alliance: Job RolesMicrosoft Dynamics Academic Alliance: Job Roles
Microsoft Dynamics Academic Alliance: Job Roles
 
Microsoft Dynamics Academic Alliance: Academic Landscape
Microsoft Dynamics Academic Alliance: Academic LandscapeMicrosoft Dynamics Academic Alliance: Academic Landscape
Microsoft Dynamics Academic Alliance: Academic Landscape
 
Microsoft Dynamics Academic Alliance: Introduction
Microsoft Dynamics Academic Alliance: IntroductionMicrosoft Dynamics Academic Alliance: Introduction
Microsoft Dynamics Academic Alliance: Introduction
 
Students to Business Day 2012: Alex Turner
Students to Business Day 2012: Alex TurnerStudents to Business Day 2012: Alex Turner
Students to Business Day 2012: Alex Turner
 
Students to Business Day 2012: Maarten Balliauw
Students to Business Day 2012: Maarten BalliauwStudents to Business Day 2012: Maarten Balliauw
Students to Business Day 2012: Maarten Balliauw
 
Students to Business Day 2012: Sas
Students to Business Day 2012: SasStudents to Business Day 2012: Sas
Students to Business Day 2012: Sas
 
Students to Business Day 2012: Rob Miles
Students to Business Day 2012: Rob MilesStudents to Business Day 2012: Rob Miles
Students to Business Day 2012: Rob Miles
 
Students to Business Day 2012: Giuliano Dore
Students to Business Day 2012: Giuliano DoreStudents to Business Day 2012: Giuliano Dore
Students to Business Day 2012: Giuliano Dore
 
Students to Business Day 2012: Pieter Vanhees
Students to Business Day 2012: Pieter VanheesStudents to Business Day 2012: Pieter Vanhees
Students to Business Day 2012: Pieter Vanhees
 
Students to Business Day 2012: Joe Wilson
Students to Business Day 2012: Joe WilsonStudents to Business Day 2012: Joe Wilson
Students to Business Day 2012: Joe Wilson
 
Students to Business Day 2012: Wouter Devinck
Students to Business Day 2012: Wouter DevinckStudents to Business Day 2012: Wouter Devinck
Students to Business Day 2012: Wouter Devinck
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 

#win8acad : Building a Windows 8 Metro Style UI

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9. <ToggleSwitch Header="Wi-fi networking" x:Name="MyToggle" /> MyToggle.Toggled += new RoutedEventHandler(ToggleWifi);
  • 10. HTML: <div data-win-control="WinJS.UI.Toggle" data-win-options="{title: 'Wi-fi networking'}" id="myToggle" </div> myToggle "change"
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25. <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>
  • 26.
  • 27. <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>
  • 28. <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>
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37. 1,1 1,2 1,2 2,2
  • 39.
  • 40.
  • 41.
  • 42.
  • 43. <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>
  • 44.
  • 45.
  • 46.
  • 47. { /* Re-arrange and hide/show content */
  • 48. <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>
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70. Adding controls and content Adding controls and content Adding app bars and Adding app bars and commands commands Adding flyouts