Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.
-
Upload
blanche-fleming -
Category
Documents
-
view
219 -
download
0
description
Transcript of Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.
![Page 1: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/1.jpg)
Friday, March 8
Creating real Custom ControlsKelvin van Geene12:15
![Page 2: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/2.jpg)
User Controls vs. Custom Controls
agenda
![Page 3: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/3.jpg)
How to choose best approach
User Controls vs. Custom Controls
agenda
![Page 4: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/4.jpg)
How to choose best approach
User Controls vs. Custom Controls
Demo: Creating a Win8 Custom Control
agenda
![Page 5: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/5.jpg)
User Control
what is a user control
![Page 6: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/6.jpg)
User Control
ButtonCombo BoxText Box
Text Box
Text Box
Text Box Grid
what is a user control
![Page 7: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/7.jpg)
User Control
ButtonCombo BoxText Box
Text Box
Text Box
Text Box Grid
A composition of existing UIElements with some extra plumming code
what is a user control
![Page 8: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/8.jpg)
User Control
ButtonCombo BoxText Box
Text Box
Text Box
Text Box Grid
XAML Code File
C#Code Class
+ +
A composition of existing UIElements with some extra plumming code
what is a user control
![Page 9: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/9.jpg)
what is a Custom Control
Custom Control
![Page 10: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/10.jpg)
what is a Custom Control
Custom Control
Existing control
An extension to an existing control created in a standalone library
![Page 11: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/11.jpg)
what is a Custom Control
Custom Control
Existing control
Added ExtendingFunctionality
An extension to an existing control created in a standalone library
![Page 12: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/12.jpg)
what is a Custom Control
Custom Control
Existing control
AddedExtendingFunctionality Themes
An extension to an existing control created in a standalone library
![Page 13: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/13.jpg)
what is a Custom Control
Custom Control
Existing control
AddedExtendingFunctionality Themes
Resource Dictionary
+
An extension to an existing control created in a standalone library
![Page 14: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/14.jpg)
what is a Custom Control
Custom Control
Existing control
AddedExtendingFunctionality Themes
Resource Dictionary
C#Code Class
+ +
An extension to an existing control created in a standalone library
![Page 15: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/15.jpg)
supported in technologies
![Page 16: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/16.jpg)
Windows Phone
supported in technologies
![Page 17: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/17.jpg)
Windows Phone Silverlight
supported in technologies
![Page 18: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/18.jpg)
Windows 8
Windows Phone Silverlight
supported in technologies
![Page 19: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/19.jpg)
Windows 8
Windows Phone Silverlight
WPF
supported in technologies
![Page 20: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/20.jpg)
technical implementation
User Control
Custom Control
UserControl
Control
UIElement
FrameworkElement
DependancyObject
Class Hierarchy
Base object in XAML related technologies
Base API’s like binding and object tree
Base class for objects with a visual appearance
Base class for UIElements which use a Control Template
Base class for grouping UIElements with own logic
![Page 21: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/21.jpg)
overview summaryUser Control Custom Control
Technical challenge
![Page 22: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/22.jpg)
overview summaryUser Control Custom Control
Technical challenge Easy to create Requires a deep understanding of theUI model
![Page 23: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/23.jpg)
overview summaryUser Control Custom Control
Technical challenge
Type of UI
Easy to create Requires a deep understanding of theUI model
![Page 24: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/24.jpg)
overview summaryUser Control Custom Control
Technical challenge
Type of UI
Easy to create Requires a deep understanding of theUI model
Static and Fixed UI, which cannot be changed in other projects
Dynamic and skinnable UI which can be changed in other projects
![Page 25: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/25.jpg)
overview summaryUser Control Custom Control
Technical challenge
Type of UI
Technical implementation
Easy to create Requires a deep understanding of theUI model
Static and Fixed UI, which cannot be changed in other projects
Dynamic and skinnable UI which can be changed in other projects
![Page 26: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/26.jpg)
overview summaryUser Control Custom Control
Technical challenge
Type of UI
Technical implementation
Easy to create Requires a deep understanding of theUI model
Static and Fixed UI, which cannot be changed in other projects
Dynamic and skinnable UI which can be changed in other projects
Representation of a set of existing controls compiled in the application DLL
Implemented at code level providing more flexibility. Compiled in its own DLL.
![Page 27: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/27.jpg)
how to choose best approach
![Page 28: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/28.jpg)
how to choose best approach
Time and Budget
![Page 29: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/29.jpg)
how to choose best approach
ExtensibilityTime and Budget
![Page 30: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/30.jpg)
how to choose best approach
UI Flexibility
ExtensibilityTime and Budget
![Page 31: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/31.jpg)
how to choose best approach
UI Flexibility
ExtensibilityTime and Budget
Technical Difficulty
![Page 32: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/32.jpg)
how to choose best approach
Control lacks a certain style, UI only
![Page 33: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/33.jpg)
how to choose best approach
Control lacks a certain style, UI only
Control Template
Y
![Page 34: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/34.jpg)
how to choose best approach
Control lacks a certain style, UI only
Control requires additional functionality which can be created with combining available controls
Control Template
N
Y
![Page 35: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/35.jpg)
how to choose best approach
Control lacks a certain style, UI only
Controls requires additional functionality which can be created with combining available controls
Control Template
Custom Control
N
Y
N
![Page 36: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/36.jpg)
how to choose best approach
Control lacks a certain style, UI only
Controls requires additional functionality which can be created with combining available controls
Theming or sharing with different projects is required
Control Template
Custom Control
N
Y
N
Y
![Page 37: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/37.jpg)
how to choose best approach
Control lacks a certain style, UI only
Controls requires additional functionality which can be created with combining available controls
Theming or sharing with different projects is required
Control Template
Custom Control User Control
N
Y
N
YNY
![Page 38: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/38.jpg)
Our scenario is to create a Sound Player control for Win8 Apps with a Skinnable UI which need to be included into the NuGet packaging framework later on
demo
![Page 39: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/39.jpg)
in closing – not discussed
VSIX Control Parts
NuGet
![Page 40: Friday, March 8 Creating real Custom Controls Kelvin van Geene 12:15.](https://reader036.fdocuments.net/reader036/viewer/2022062401/5a4d1b137f8b9ab059990725/html5/thumbnails/40.jpg)
in closing
Thank you for listening and attending!
Demo Resources
BlogPower Point
http://www.kelvinvangeene.nl