>>: Thanks everybody for joining us. And I want to go ahead and formally introduce Filip
Skakun. Right?
>> Filip Skakun: Filip Skakun, yeah.
>>: Skakun, Filip Skakun. And he's going to go ahead and give kind of the details on
where he works. Kind of already has for those of you that got here on time. And he's
going to be talking about a toolkit that he made using XAML. If you're a XAML person, I
think you'll learn a lot through his implementation of XAML in order to make this toolkit.
Instead of just writing app-level code, app-level logic, if you take a step a back, one
abstraction away, and you write yourself control toolkits and control packs and stuff like
that then you're actually going a long ways toward being able to reuse that elsewhere.
So it's always a good idea. Anyway, I'm excited to hear from Filip.
>> Filip Skakun: So, hi. My name is Filip Skakun and I'm a developer on the Fresh Paint
Team of Microsoft; it's part of Microsoft's start up business group which is part of
Microsoft Research. I've been on the Fresh Paint Team for three months now.
Previously I worked for another company called Vector Form and I worked back and
forth at Microsoft and the Vector Form a couple times already. So I started at Microsoft
seven years ago on the SQL Server Team then going back and forth I worked on
Windows SDK, Xbox Live and Microsoft retail, Microsoft Surface, the original one.
Actually my adventure with XAML started building applications with WPF and for
Microsoft Surface the original [inaudible]. Then I also worked at Microsoft CRM building
Windows Phone applications. And then, I've done some work contracting building
applications for companies like CNN, ESPN, Nokia, Microsoft, Disney, Sesame Street,
AccuWeather, and a couple others probably.
And now I'm at the Fresh Paint Team and I still use XAML and usually do that together
with DirectX to some degree. So that's what I do at work. But in my free time, since I've
been developing on Windows 8 for like two years now, about a year and a half ago I
decided that a lot of the things that you want to do on Windows 8 requires controls and
behaviors that are not available out of the box in the Windows 8 APIs. So since I started
building my own toolkit, at some point I decided to start sharing it on CodePlex. I've been
building controls and extensions and tools in the WinRT XAML Toolkit for a year and a
half now, and they're on CodePlex where you can download them as source code and
also available on NuGet. So if you need some of these tools that I will show today, you
can just go to your package manager in Visual Studio and in a few seconds you can
have my library as part of your solution.
So WinRT XAML Toolkit is the name of the library. It's a library of reusable solutions to
recurring problems, and that's actually proven to be really, really true because most of
these things that are in that library I've used like in these two or three different projects
that I worked on. And the library has controls, so there is a list of controls that I custom
implemented just out of some quirky ideas or just to test some theories. Some of them
are implementations of controls that are not available in Windows 8 but were available in
either WPF or Silverlight. Some of them are actually imported controls from the
Silverlight's toolkit that you had on Silverlight 3 or 4 or 5 that are not in Windows 8, and I
decided to import some of them. There are some additional helper classes that help with
building Windows 8 applications, and there are some XAML debugging tools.
Since we have two versions of Windows 8 now, Windows 8 and Windows 8.1, I actually
have two versions of that toolkit that share almost all of the code but have some slight
differences. And I'll probably be adding some more features to the Windows 8.1 version
since there are some nice new features in Windows 8.1 including, my favorite class, a
rendered target bitmap which is image source or a bitmap that you can use to render
your visual tree to a bitmap that you can then duplicate on the screen and get some
really nice effects.
This is the Windows 8 version of the application. The application is actually a list of
samples or tests that show how you can use the controls and helpers from the toolkit. So
I won't go and show all of them, but I would like to show some of them and talk about
them a little bit. Maybe I'll go alphabetically, and the first one is Alternative Frame. So
there is a frame class in Windows 8 that you can use to navigate back and forth between
pages in your UI. And at some point I decided that I wanted to control the transitions
between pages that aren't just fade-out, fade-in but allow you to see both pages or trust
fade between pages. This control actually allows you to do that. So it has almost the
same API surface as the frame but it has all these nice random transitions that you can
do: slides and wipes and flips of pages when you navigate from one to another.
Another feature that it has is actually you can preload the next page that you want to
open. For example, if you have a page that you were planning to open next or the user
will probably open next because right now you're on a half-page and next the user will
most likely go to the page that has lots of images and you roughly expect that this is
going to be the page. So it actually preloads the page that you say is likely to be loaded
next. When I click here it has the page with lots of images that have been loaded when I
was talking to you. So that's Alternative Frame. You can grab that control from the toolkit
and you can use Alternative Frame and define your own transitions. And if you need any
help, you can always talk to me.
Another one in this sample is Calendar control. This is direct import from the Silverlight
Toolkit. There is no calendar control in Windows 8, and I think Windows 8.1 also doesn't
have it out of the box. There is only like a date picker and time picker control. So, if you
need to display a calendar, you have this control here. I modified the template a little bit
to be more touch friendly so you can use it as an application.
Another one is Camera Capture Control. So in Windows 8 you have this nice [inaudible]
camera capture UI, and you can use that to -- Well, yeah -- show a preview from the
camera and start recording or taking pictures and record videos or pictures. But the
problem is, is that it's full screen. And this is goes nicely with the Microsoft design
language where you want to have no focus on the tasks that you're doing, so if you're
recording a video you want to do it on full screen. But, there are some scenarios where
you actually want to do that inside of your applications. So the Camera Capture Control
is actually a control that helps you with that. So I can hide and show the preview inside
of the application. I can take a picture. There's actually a countdown control that was
used here to take a picture, so you can see it counting down here from three to zero and
then taking a picture. It can record, and it plays back that recording. So I can do
something here and it shows that recording that it did. So that helps you if you want to
work with video or pictures.
The next one is kind of an example of what you can do with XAML. So it's Cascading
Image Control which just has this interesting transition when it shows up. It's one of the -
- I call them -- quirky controls that don't serve a big purpose but they're kind of flashy. A
similar one is -- Let me find that -- Cascading Text Block. That's the next one. This one
actually has this text that shows up and rotates while it's falling. I can change some
properties here so it rotates more, so it falls and rotates. And tou can type in any text
here. So I can say, "Hello AppXfest," and the next time it loads it will actually "Hello
AppXfest."
So another one that's probably the most popular control from the toolkit is the import of
the Chart control from Silverlight Toolkit, and it has various ways of presenting your data.
And it's one of the very few charting controls for Windows 8 right now, and there are lots
of samples here for what types of charts you can implement with it. They're all slightly
modified to look better on Windows 8.
This entire toolkit is my open source project that I work on in my free time, and I don't
always have the time to finish everything. But one of the things I started working on was
a color picker, so there's actually this page here that's called Color Picker Primitives.
And it's not showing up so nicely because I haven't finished working on it, but it shows a
lot of the code that is in the toolkit for working with color. There are helpers that help you
convert colors between RGB, HSL and HSV color spaces, and these tools are actually
used to render this color ring and color triangle and these bars. So all of these use some
helper APIs that make it really easy to render these color pickers [inaudible]. Depending
on your requirements, if you're building the next paint application that's maybe a
competitor to Fresh Paint, you could use these components to select colors.
One of the controls that I really like is the Custom Grid Splitter. There's a grid splitter
control in WPF that's not there in Windows 8 because grid splitters don't go so well with
Windows design language or Microsoft design language. But there are many cases
when they are actually pretty useful, especially when you're building tools or you want to
have a UI that's slightly more flexible. So that grid splitter is roughly the same as the one
in WPF in terms of API; it's just the default template is more geared towards touch so I
can actually easily find that control with touch and move it with touch.
One control that someone actually contributed to the toolkit recently is called Gauge
control. It allows you to show values like a gauge on the hydraulics or inside of the car
which is a nice way to represent some types of data. It was actually designed by Arturo
Toledo who was on the designers as Microsoft. I think he worked on the Windows Phone
team. There is an Image Button control which is something that you should take a look
at if you're building an application that's rich in pictures and you want to have highly
customized buttons that have different states represented by images. So a button
typically has like three or four states, which are like normal, pressed and hover states;
that control allows you to easily specify multiple pictures that are going to be used to
represent that image without re-templating it.
Also if you don't have all of these images it will actually give you options to automatically
generate some of the images. So, I think one of these images -- This control actually has
just one image specified for the neutral state, but if you hover it actually generates
another picture that's kind of semi-transparent; it's more white-ish. And then, when it's in
the pressed state it's even more white. Another one actually generates disabled state;
there are some images processing algorithms in the toolkit that automatically make the
picture grayscale, so it automatically generates a disabled state button for you.
There's also a toggle button version of that, so it has all these states and it can define
them either with images or some parameters that make these images grayscale or some
sort of lighter shade. Another one that's imported from the Silverlight Toolkit is the
Layout Transform control. So if you've used WPF before, there's a render transform and
layout transform property on the XAML end and you can use render transform to kind of
independently rotate or scale or transform, otherwise, a control. But there's also a layout
transform property that automatically makes space for the resized control that you have.
So that layout transform wasn't implemented in Silverlight or in Windows 8, but
Silverlight Toolkit had this implementation of a layout transform control which can specify
a transformation. It will automatically scale that control and resize it so it actually fits. So
if you, for example, have a text block that you want to show rotated 90 degrees it makes
it really easily doable for you. You just put that button inside of this control, specify the
transform and that text block shouldn't get clipped in any way and a space will be made
available to it using the layout algorithms of the platform.
There's a Ring Slice and Pie Slice control which you can use to show data or maybe
implement a slider control that looks like a ring or pie slice. And Numeric Up Down
control which is slightly different from numeric up down controls of Windows Forms or
WPF, and it is actually not geared towards decimal values and the currency but more
towards floating point value entering. And it works in a similar way to sliders and blend in
that you can do plus and minus to decrease and increase values, but you can also start
dragging on top of it. And just by dragging in any direction you can reduce and increase
the value that's entered. And you can also click and enter the value manually with the
keyboard. I'll get to that again later.
There's a Tree control which is also imported from the Silverlight Toolkit, and it has a
touch template and the mouse template depending on what you want to use it for. So
that's another one. Uniform Grid is actually a contribution, and I've been playing with it a
little bit here. There's some sort of an animation that transforms all of these elements
and puts them in a circle and you rotate it and they're sorted based on the HSO color
values. So it shows quite a few features of the framework if you look at the source code
which is available on CodePlex.
There's a Watermark Password Box and Watermark Text Box. And Windows 8.1
actually add these new properties that allow you to specify place-holder text in a text
control. In Windows 8.0 there wasn't that feature so I implemented this control which
works like a password box but you can define the watermark text. And also what you
can't do in Windows 8.1 is you can actually define any content as a watermark, so you
can put an image or a shape. And this is one sample that shows that you can put this
arrow shape here inside of it as a placeholder text. So if you want to prompt the user to
do something you can specify that and someone might enter something there.
Watermark Text Box works in a similar way. A Web Browser is something that you can
do if you really want to have a web browser inside of your application. So there are ways
to actually launch Internet Explorer or the full browser outside of the application, but
there might be cases where you might actually host it inside of the application. It's not
very super robust because I've never actually used in a shipping application but you can
type stuff in and actually by default navigate to the WinRT XAML Toolkit page on
CodePlex. I can navigate to Bing. Oops, the colors are not set correctly but it shows the
web browser and it has all the UI that you need to enter the address. There might be
cases where you'd want to use that, for example, when you want to use some custom
bookmarking of your pages. For example, if you wanted to do some integration with
Instapaper or save your bookmark somewhere onto Sky Drive and use some custom
logic then you can host a web browser control in your application.
So these are the controls, but controls aren't the only thing in the toolkit. There are also
lots of extensions. There's an implementation of the behaviors API which the Blend
Team shipped before for WPF and Silverlight. I won't go through all of these right now
but for example Highlight Behavior is something that might be pretty useful if you do
search over text in your application. You can type in some text and there's a simple
property applied to that text block below that actually highlights the text. So I can type
any text here and it highlights that text inside of the text block.
What else? There's Text Box Validation; so if you need to enter some values, there are
some simple APIs that allow you to validate the values that need to be entered. For
example, this field is said to be non-empty and if it's empty, it shows in a different color.
This one needs to be non-empty and numeric. So you can specify different error
messages that show up when these parameters are not met. There's another one for
strong password which is kind of arbitrary but it requires at least eight characters and
lower case and upper case and a number and a special character to be entered. Lots of
interesting features that you can use if you have an application where you have to enter
data; any sort of, I think, enterprise application might make use of these.
There are some simple APIs that you can use to fade-in and fade-out controls with a
simple single method. Image Extensions allow you to specify that an image control
should fade-in or somehow transition once the image loads. So if you have images that
go from the web, you specify that single property on your image and that image fades in
or slides in or does something interesting when it shows. You can have some
placeholder image showing up before your actual images get loaded. A lot of these
extensions are actually a little bit difficult to demo without looking at the code, which I
want to show also in a moment, so I will quickly jump through them.
Animated scroll is another feature that is not available in a scroll viewer in Windows 8.0,
but Windows 8.1 actually has that feature. It almost makes my toolkit un-useful for
Windows 8.1 with the small caveat that you actually await that scrolling to complete. So
you basically call await scroll to certain position and that await method returns when that
scrolling is complete. And there are lots of scenarios where you might want to do that;
for example, if you have lots of text entered in a text box and at some point you want to
animate to the end of that text and only after you animate to the end of the text you want
some other animation to play then you can use that extension.
There are lots of helpers that help with images here. There's actually an imaging helper
section which shows another part of the toolkit which allows you to render your UI to a
bitmap in Windows 8.0. It uses a SharpDX and DirectX and Direct2D to render your UI to
a control. It actually imitates what Windows does when rendering stuff on screen; it just
does it into a texture and saves it into a writeable bitmap. It's not perfect. There are lots
of things that are not implemented, so it's good for very basic stuff. But you can use that
right now for your Windows 8.0 application. For example, if you want to render a custom
tile with some text on top of it, some shapes, you can use it to render that down. Right
now it's kind of hard because you have the option to either use writable bitmap where
you control each pixel separately or you have to use SharpDX or DirectX yourself and
learn DirectX if you don't know it.
With this control you can just create UI using XAML and render the UI to a writeable
bitmap. And there's another helper that makes it really easy to write that writeable
bitmap to an image, and you can render a live tile that has text and rich content. So I
believe the most useful feature of this entire toolkit and something that I am focusing on
right now is the Visual Tree Debugger, which I might have shown you before. There's
this concept of a visual tree debugger that I think first showed up with WPF. And there's
still a very popular tool for that called Snoop which you can use to debug any WPF
application and see what UI elements are where and navigate the entire visual tree,
search for things, filter, what things are shown and use PowerShell to run some scripts
over a UI of an application even if it's not your application actually.
There's another tool that was created that's a commercial tool for Silverlight which is
called Silverlight Spy which does a similar thing. And there's a new version called XAML
Spy right now which works with WPF and Silverlight and Windows Phone and Windows
8. But that's a commercial product and it costs, I think, at least a hundred dollars to use
it. So this is an open source version that you can use for free, and there's a limitation
that you might call a limitation but it also might be a feature that it's actually implemented
to show and render as part of your own UI. So there's a pop-up here that shows up
inside of the application and you can use these grid splitters that I used elsewhere and
tree view control that I specifically imported from the Silverlight Toolkit to actually
implement that control here.
And I basically hover with my mouse on top of some UI element like this button here,
press control-shift and that control gets selected in that tree, and I can see where it is
actually defined in the application. It actually lists all of the properties categorized and
grouped in different categories. There are filters here so by default it doesn't show
properties for a control that wasn't specified manually. So if something is unchanged, it
doesn't show it. I can see that the foreground is specified for that button and I can
actually go and make that button red actually. That's not the right one but I can say that
this one should be red. That's not the one. Oh, yep. So right now the control got yellow
because I typed in the RGB values that defined that the control should be yellow.
You can also open an image and make that background be an image. So if I want to test
some theory for the design that actually loads that image of the foreground brush for the
button. So I have various filters here. One is I can show the properties ungrouped. I can
make it show all the properties including the read-only properties, so I can see what the
actual height of an element is. Sometimes it is hard to see what the actual size of a
control will be inside of the application and it's a little bit difficult to debug it. You can use
the designer view for your controls but you might not always see what the size will be
inside of the application, so you can check actual height and actual width of the control
using that toolkit.
You can search, so you can enter margin and margin shows up. I can move the control.
And actually right now you can see that if I move it further, it disappears. So sometimes
problems when working with XAML are that some control has a clip property specified or
something has opacity specified to zero or visibility set to zero and you're not always
sure what the reason is that your control doesn't show up. So you can use that visual
tree to find that control. You know that it's in the debug tree view test page and you know
it's in the third grid in the row and it has a specific name, and you find that. And you
wonder why it's not showing up. And then, you look at it and you can see that maybe the
opacity is set to zero. So it's some type opacity and, no, it's not zero; it's one. You can
look up the other controls up the stack and see that all of them actually have opacity set
to one but [inaudible]. You can see that the highlighted rectangle here, it's kind of shifted
so you might see, "Oh maybe it's mis-positioned." So type in margin and you can modify
that margin and see that it actually got clipped by a clip property on some of the
elements where it was hosted in.
So there is also a filter that's kind of built in right now which -- Let me disable that
[inaudible] filter. So there is filter that shows properties that are likely to alter your layout,
so it has a list of properties that most likely cause an element to not show up. So there
are plotting, render transform, maximum height and width properties and I can specify
maximum height somewhere to find. And that control will never show up because
maximum height actually overrides values specified by width, height or other layout
properties. I can reset that and go back to the original [inaudible].
So I can go elsewhere in the application and press control-shift elsewhere, and it
refreshes automatically. You can see the other parameters that control the positioning of
the control. This list right now shows all the properties that might affect the layout. So I
can collapse it. There is also another feature in debugging here that you can show a
debug trace inside of the application which is sometimes useful. Like for me when I only
have one laptop with one screen, I don't have a secondary screen to look at logging. And
I want to debug some interactivity code, so I move my mouse on top of the control and I
want to see what the properties are of the pointer events. I can trace them and show
them inside of the application so I can have a quick look at what's happening. It actually
supports text and you can easily hook up to that use it as easily as you use debug right
line today for print of debugging.
You can fade that out and you can make it actually so that it's not as visible. You can
interact with your UI through that trace information screen. So there is also a version of
that toolkit that I have for Windows 8.1. And to test things out a little bit I changed the
default theme there to a light theme, so all the controls are here and they render in light
theme as well as they do in dark them, most of them. That's a complaint that I've seen
from a lot of people who are using the toolkit that some controls weren't supporting
different themes, and right now that's built in.
Miscellaneous: there's a Web File helper class that allows you to very easily with one
line of command download a file from a URI. So you specify a URI like the current Bing
image of the day. With one call it saves it to a file on your local drive and automatically
figures out what the name of the original file was on the server, getting it from HDTV
headers, and does a lot of stuff for you. So you can use that. Maybe let me show you
some demos of what you can do with the toolkit and how you can use that. I have Visual
Studio 2012 here so I'll do a Windows 8 project. I'll start maybe with a grid application,
and I'll show you first how to do the debugging. The default grid application template has
some UI already so it should be pretty good to debug and modify. I go to Manage
Nugget Packages in the project. I look up nugget official package source and I look for
WinRT XAML Toolkit.
There are a few packages here. I broke things down a little bit because the toolkit started
growing a little bit large and it became a little bit hard to download. The debugging tools
are something that I use every day now; it's been almost one thousand downloads so far
and eleven thousand downloads for the WinRT XAML Toolkit. So, people in the
community seem to be using it a little bit. Let me install the debugging components.
Okay. Done. So I think the default page when the application starts is the grouped items
page. The best way to put that hook in actually wait for the loaded event. And I want to
just type in DC and hit alt-enter if I use ReSharper. If you don't have ReSharper you can
do alt-shift-F10 and it automatically adds the reference for you. So using WinRT XAML
Toolkit debugging, and I just do show visual tree list. And this is the only -- Sorry?
>>: What does DC stand for?
>> Filip Skakun: Debug console. So there's actually a class fully called Debug Console,
and DC is another class that's just a proxy to that so it's easier to type. I was using
XAML Spy with my toolkit a little bit and found that it takes a little bit too much work to
actually hook it up, so I wanted to make it as painless as possible to use my toolkit and
debugger to debug the application. So, yeah. The debugger is here. I can debug this. I
can debug that. I can move things around. If my designer comes up and tells me that
this is five pixels too much or too little then we can quickly change it inside of the
application, and we don't have rely on lend and specifying using MVVM and sample data
or anything. You just run the toolkit, run the debugging tools and you can modify things
at runtime.
Things disappear. You can see how much you need to move something so that you'll get
two rows of data instead of one row of data. And you can do all that at runtime.
>>: What happens if you modify so many things and then you want to -- it's like, "Oh, I
know exactly what I want." How do you convert that?
>> Filip Skakun: Yeah, so right now you have to take notes. [Laughing] But, yes, one of
the things that I am planning and I might do it actually in the next few weeks is to actually
record which controls were modified and give you a list of things that were modified. I
think more will take more work. But it certainly might be possible to generate a style the
overrides your style you have currently. I have ideas for creating animations
automatically using the visual tree debugger and dragging things around on the screen
with just [inaudible] press control and something and you will move something on the
screen and save that as animation, for example.
So there are lots of interesting things that you can do once you have an open source
project and you control the source. So let me actually do maybe Windows 8.1
application. I'll show you some of the things that I do with the toolkit. Okay, so I have a
basic application. Let's see. So one of the libraries inside of my toolkit is called Awaitable
UI. And what it does is there are various things in UI development that are not like things
like you load something from your hard drive or you load something from the network or
from the database but still might take a while to perform. So, for example, you might run
an animation and you might want run something that's run only after the animation is
completed. So the awaitable UI library in my toolkit actually allows you to await various
events in the UI. So I'll try to show you quickly how to do that. Get official package
source. WinRT XAML Toolkit. Okay. So I installed the toolkit and so I have an empty
page and maybe I will make it into a canvas. And actually let me quickly switch to blend
because if I'm going to create an animation then it's best to use blend for animations. I
can type that in, in XAML or in Code Behind but it should be a lot easier with blend.
Let me quickly switch. Okay, that's my page and blend and look for an ellipse. Put that
ellipse over here. I create a new storyboard, Storyboard 1. I move the ellipse and I want
it to at one second to move here. And then, I want to create a new storyboard that
moves the ellipse here, for example. And I'll put some button here. And I think -- Let me
see if the animation works. So the ellipse works, animates. The ellipse moves here.
Okay. So I have two storyboards. I save that and I can go back to Visual Studio; I have
the storyboards. And now what I want to do is when the page loads I want to start
something.
I forgot I don't have ReSharper. In Windows 8.1 you have to --. So I'll make is async. So
I had that storyboard. Oh, I thought I had it. Storyboard 1. Oh, maybe it just doesn't know
that it's there. And usually with a storyboard you run with begin but this one you can run
with begin async. I just have to reference the WinRT XAML Toolkit, waitable UI, and now
I can await a storyboard. And then, I can await a message dialogue. And I can await
another storyboard. And let's see if that works. I think that hello needs to go there. Is it
showing async? Yep. So the standard is that anything that is awaitable should be called
async.
So the page loads. You get that dialogue. We are awaiting that dialogue. When I press
close it runs the other animation. So that's one thing you can do with a message
dialogue, but you can also do it differently. You can await the button click. So await for
click async, is what the name is for the method. So now I don't have any events that I'm
actually specifying but I can build some sort of wizard that goes further after I click
something. And I do all of that using structured code; I don't have to specify events. And
if there is some sequence that is fairly rigid and there's not going to be anything that
breaks it, I can do things in like four lines of code that usually would take me five event
subscriptions and then handlers and stuff. Right now it's just four lines of code.
So let's take a look at how you can get to that other than the nugget. So there's this page
on CodePlex called WinRT XAML Toolkit.codplex.com. And if you go to source code,
there is all the source code. I use get with that, so you can clone that with get or you can
download it. If you have download, you'll get the zip package with all the source code in
the current version. And that's something that you might want to do if you want to see
how to actually use all of these controls that I showed. You can save the zip file. Right
now I have a solution opened here. This is the 8.0 solution. I have three solutions: one
for 8.0, one for 8.0 and one for everything depending on what you want to do.
I'll walk you through the structure of the product. So there are projects for various groups
of features. The toolkit has most of the code right now. The composition hosts the
composition engine which is used to render the visual tree to a bitmap uses SharpDX, so
it's actually extracted separately because SharpDX is a little bit heavy to load. So if you
don't want to load six various libraries, you don't have to use it. The Silverlight Toolkit's
calendar and Silverlight Toolkit's charts are pretty hefty controls so they have their own
libraries here. There's a gauge control which has a separate library. The debugging stuff
-- Actually this is the only part that when you get it from nugget it's compiled as a debug
binary so you won't chip that into the store because the store doesn't accept anything
compiled with debug. All the other libraries on nugget are compiled as release. The
reason debugging is compiled as debug is you probably don't want that code shipped in
your application.
You only have that one line of code if you want to debug it and then you want to remove
it. And also there are actually attributes specified in various methods in there that make it
only run in debug builds. So you don't actually have to disable if you include the source
code of the debugging library with your project and you want to quickly build the release
build; you don't have to remove all the tracing hooks from your build. The sample is
actually what I was showing which had all the sample code for various controls and
extensions. So it's using MVVM and it has [inaudible] models where it was necessary but
I tried to make it as simple as possible. So you have simple hook up to all of these
controls.
So you go to gauge [inaudible] page and look how it's done. And there's a grid and
various gauges with the various parameters specified so you can actually see if you
need to define your custom template to get that look of the gauge control or if you just
can specify a few properties. And in case of a gauge control, there's a [inaudible] color
and [inaudible] color and so on that you can change. The chart is the biggest control in
there so far and there's a flip view with a different sample of the chart for each page. And
some of these have been restyled and re-templated. And there are different data series
definitions. So I call on the series and I call on the chart and bar series and bar chart so
you can see how it's all done by looking at the source code in the sample.
There is also another application here that I can show you that's sometimes useful;
although, maybe it will be a little bit less useful with Windows 8.1 and Visual Studio
2013. But it basically visualizes a lot of the standard brushes and app bar button styles,
for example, and you can copy and paste these names from this application. Just go
through all the available styles for application bar buttons and text block styles. You can
see which ones are bigger and which might fit your requirements so you don't have to
define your own style. They are already shipping out of the box.
If you have any skills in XAML, I would actually also ask if you want to contribute, if you
have some controls that are interesting that you might want to share with the community.
I think working with open source is really rewarding. I really learned a ton about
development and made myself really easy to hire right now by knowing a lot of stuff
about XAML it seems like. There is just really tons of work for XAML developers right
now, and lots of teams at Microsoft are hiring. So when I came back to Microsoft three
months ago there were five teams that were looking for XAML developers that reached
out to me. And I could pick and choose, and Fresh Paint was the most interesting one.
Basically working with this in your free time gives you an opportunity to learn and work
with anything that you like to do and not necessarily something that you do for work. But
also a lot of the things that I've done here were driven by things that I wanted to do at
work. For example, I worked on a Disney princess application for Disney, and I found out
I needed a lot of things that were missing. And I didn't have time to build reusable
controls at work, but I had a long commute and on the bus home I usually spent some
time making things reusable. And I created controls that I later used in the application.
And also now the debugging controls I used at work all the time. And it's really good
experience doing something that you like in your free time that you can then use at work
and be rewarded for it.
Yeah, so I think that's it for me.
[applause]
Do you have any questions?
>>: Yeah, why don't you go ahead and take up plenty of time. We've got plenty of time.
>> Filip Skakun: Yeah, if you want me to demo something else, how you use some of
these features, I can do that for you.
>>: How does working with open source jive with LCA? How do you arrange that?
>> Filip Skakun: So as long as it's -- I believe as long as it doesn't compete with
anything that you do at work or it doesn't taint you, it shouldn't be a big problem. So most
of the code that's in my toolkit was written by myself or was using code from Microsoft,
so it's not a big problem for me. I think you can just ask your LCA about that, but usually
it's not a very big problem and lots of people at Microsoft do open source development in
their free time. And some of them build libraries that millions of people use outside of
Microsoft.
>>: [inaudible]
>>: I'm also wondering about [inaudible] with an open source project and you mentioned
you learned a lot. And I'm just curious how does that come about? How does an open
source project allow you to learn...?
>> Filip Skakun: So one thing is just that you play with things that you want to do and
not necessarily things that you have to do at work. So maybe at work you do HTML and
you want to learn XAML, and you can do that in your free time. You can build your own
application and that's certainly something that you can ship to the store and not make it
open source, but building something that other people might want to do and something
that you might want to reuse in the future, like a library or a toolkit like mine. You learn a
lot of things about architecting software. You learn to work with people, with a
community. You expose your code to criticism and you get bug reports. And you can be
the master of your own project which is not something that you always get at Microsoft.
I think a lot of that feedback from the community is something that helps you learn. And
basically you can experiment and you have freedom to do whatever you want as
something that's really beneficial. And I think it's rewarding just that I hear a lot from
people who use the toolkit and they thank me because I made available these awesome
features here and there. And this is the only charting toolkit for Windows 8 and now they
can create that application. I've seen some applications like, I think, Hulu or Twitter or
official applications for Windows using my toolkit. There are, I think, tons of other
applications that use parts of it, and I think that's really motivating. I think before I started
working with open source I was playing a lot of games in my free time and now I don't
have time to play games any more because I have such a fun time writing code. And
actually that makes me also a better developer at work because I have more experience.
I double my time programming. At work we may might be doing things that are not
necessarily as fun as we would like to but if you do open source you can come up with
some interesting theories and maybe come up with some ideas that maybe you can use
at work, maybe they will help you at work or maybe you can share it with other people.
And it might make you famous or they might give you just the joy of working with other
people.
And, you know, there're tons of benefits if you become very familiar with some topic. You
had a question.
>>: Can I use the debug console in a [inaudible] class project?
>> Filip Skakun: No. Unfortunately all of these libraries are .NET and they're not WinRT
components. And originally I was just not very familiar with the difference between a
WinRT component library and a class library but I mostly saw limitations in the WinRT
components. So you can create a library for Windows 8 applications with C sharp in two
different ways: one is a class library and that can only be used in .NET applications. And
you can create a WinRT component which looks roughly the same and there is actually - you know, you can just go to project properties and there is -- All right. Maybe I'll stop it.
There this output type parameter. You can easily change your project between Windows
Store app, class library and Windows Runtime component. But the problem with WinRT
components is that they impose lots of limitations on you, so you can't expose your
controls or your classes making them inheritable.
You have to have everything sealed. I think you can't share -- I don't remember all of the
limitations but maybe like interfaces are available or you can't expose things as tracks or
you can't expose anything that isn't sealed. So my toolkit wouldn't be extensible that
way.
>>: And everything that's returned has to a WinRT type...
>> Filip Skakun: Yeah. So for example one of the features I have is a behavior class.
You can easily add your own behaviors to controls. But a behavior you have to derive
from my base behavior class and you wouldn't be able to do that if you had a WinRT
component, right? So actually maybe I'd like to show one more thing.
>>: Are you aware of the technical reason why they do that? Is that for performance?
Why would they do that? Why...
>> Filip Skakun: I think...
>>: ...would they [inaudible]?
>> Filip Skakun: ...it's just part of the WinRT lower-level framework. So WinRT in its
base is, I think, is based on COM. I'm not sure if COM allows for inheritance. It basically
is based on interfaces. And I think...
>>: Plus it matters that all of that has to be projected...
>> Filip Skakun: Yeah, it has to be projected to other languages that work different. I
think maybe in the future WinRT types and WinRT components will allow for anything
that .NET applications allow for right now. But, you know, if you expose a link where it
results, for example, outside of your application that would have to be projected to all the
other languages. And maybe they don't understand that programming language
structure paradigm. So, yeah. So if I created it as a WinRT component, you could use
that in C plus plus. In theory you could use that in JavaScript as well. But since all of my
code is heavily related to XAML, well, there's no point in doing that with JavaScript.
And I actually haven't seen many people doing XAML development with C plus plus
either, so there wouldn't be so much return on that. Although, a lot of that code should
probably -- If you extract it into a WinRT component library, it should be possible to
make it a WinRT component fairly easily. It's just that it require more work and I'm just
one guy. Someone else had a question?
>>: I was just going to add to that, my group is C plus plus [inaudible].
>> Filip Skakun: Yeah. C plus plus is possible to use. And I think for XAML you can
certainly use that, and there are cases where it helps. But I think if you're a C sharp
developer and developing applications in C sharp is probably a little bit easier and faster
and code is easier to maintain. I would actually not recommend using C plus plus for
XAML development. I do recommend using C plus plus, though, if you have anything
that does heavy processing or like if you need to use DirectX it's a good idea. Although,
even with DirectX today you can SharpDX which makes it a lot easier to work with
DirectX if you don't know C plus plus well.
I've used XAML with DirectX using both C plus plus and SharpDX, and there are benefits
to both methods. So with C plus plus you have problems with using another language,
and C plus plus is definitely more difficult to program and maintain than C sharp. But you
can create a WinRT component with C plus plus, and that might be reusable whether it's
C plus plus or C sharp application. And also for C plus plus you have all the samples
and DirectX SDK. And you can use like C plus plus AMP if you want to do something
really quick with GPU, and it gives you lots of power. But I think if you build a Windows
Store application, I wouldn't really recommend that unless you don't know C sharp and
you're skills with C plus plus, which there's still probably, I'm sure, lots of people doing C
plus plus. But I think a lot of people at Microsoft are C sharp developers.
And it's just easier. With SharpDX there's less documentation but you can just compile
for any CPU. That's actually one problem that I've seen with using C sharp and C plus
plus together that usually you have to create a separate package for each platform. So
for [inaudible] and like [inaudible] and X64 you have create separate versions. It's also
difficult to create the reusable that you would want to use with different C sharp projects
because you need different versions of that library and I am actually not sure how to
build a C sharp application with a compiled C plus plus library. If you have separate
versions of that library for different platforms, you probably need to use like an extension
[inaudible] or something like that.
So just remembering one thing that I haven't shown you so maybe I can quickly go there.
There's control extension groups of samples in there that show you how to use some of
these extensions in the toolkit. And I only showed you what they look like once you run
them but I thought maybe it would be nice to show you how to actually use them. So, for
example, let's go to Highlight Behavior. So here, you know, you can implement it in
different ways. I have this search string box where I entered some text and I could
update and regenerate that text block underneath with the highlighted stuff. But if you go
to -- What is it called? -- Highlight Behavior; I think it's actually here. If you go here you
can find that there is one text box that has search text. There's another one that has the
search string. And the only thing that you have to do to highlight text is just define these
few lines of code to use that behavior that I have for highlighting it. That's using a
behavior that's similar in its implementation to blend behavior.
Blend the 2013 with the [inaudible] decay is supposed to have this new implementation
of behaviors. So they are really easy to apply in blend. And that was the goal of this
library. But there is also another set of behaviors that's defined as a basic attached
behavior pattern. So in some cases of these extensions I defined them just as attached
properties. So, for example, there's this framework element extension system cursor
property that's just one property here that you define and you set it to some [inaudible]
like RO or cross. And if you go to I think it's this one, I specify a different cursor for each
of these controls by just specifying this one line of code, one attribute. And underneath
there's actually a class that attaches to that control and handles pointer events, pointer
entering that control and leaving the control and setting the system cursor. Right now
there's no bolting the API in Windows 8 for changing the cursor automatically for a
specific control. You can only change the cursor for your application or for the OS.
So this gives you a way to specify that, "I want to have the cursor for my PDF viewer
when users can [inaudible] with their mouse on the screen." So WinRT has a lot of these
controls that are created primarily for use with [inaudible]. But a lot of the things that you
might want to do to separate keyboard and mouse, which Microsoft used to require from
all applications in the store, are actually not so easy to implement. And a lot of these
extensions help with that. Actually let's show one more thing. So show text box
validation. I can find that. Oh well, maybe I don't have a sample for it. But there are some
extensions here that make a text box automatically select the text when you enter the
control. Or, for example, when your text box only supports three characters because it's
area code for your telephone, there's an extension that says that after the control has
been filled with this number of characters it will automatically skip to the next field. So it
has lots of that support for keyboard input. And the tree view control and the grid splitter
are all created to support all these mouse input scenarios which are not so easy with
out-of-the box APIs.
If you want to look at more things, here's an extension that helps make a list view item
disabled, just one item in the list through binding. There's another one that allows you to
specify that you want some specific item to be brought into view, in a list view with a
bindable property. So if you use MVVM you can say that, "Oh, I want this item to show
on the screen right now." So you basically set that item in list view item extensions to
bring into view. And now I select the item here, and we just put one attribute somewhere
in code and it gets brought into view here. There is another set that allows you to bind
the list of selected items, so if you use MVVM and you want to control the list of items,
select it in the list, there's a helper for that.
You have a bindable selection. And my source list has a selected items or bindable
selections property, and I have another list that binds the data collection here. So I invite
you to explore the things that are there. And a lot of these features were also driven by
me scouring the stack overflow website for interesting questions on WinRT. So
sometimes I saw a question like, "How do I do that?" And I think, "Well it is difficult in
WinRT. Maybe I can create some reusable method or extension that you might use."
And I create that and I put that in the toolkit, and many people on stack overflow go back
to that question. "I want to highlight some text in text block when I do a search in the
application." And they find the link to my library and that's where they get it. So if you've
looked for some solutions to problems online, it's likely that you found links leading to my
toolkit.
And if not there then there's another toolkit from Tim Heuer from the Windows Team who
has other controls that you might have seen missing in Windows 8.0. Although, a lot of
his controls are now implemented in Windows 8.1 so it will be less usable. But his is
probably the most popular control toolkit for Windows 8.
Any more questions?
[applause]