- Rewrote a few sections
- Fixed code formatting
- Added external references
- Added better highlighting of important classes and keywords in various sections
@ -17,7 +17,8 @@ So I began to think: what if we were to start anew with modern C# features such
Generics, Observables, async, etc etc. The result of that thought is Perspex
(https://github.com/grokys/Perspex).
**DISCLAIMER**: This is really early development pre-alpha-alpha stuff. Everything is subject to
##### DISCLAIMER
This is really **early development pre-alpha-alpha** stuff. Everything is subject to
change, I'm not even sure if the performance characteristics of Rx make Observables suitable for
binding throughout a framework. *I'm writing this only to see if the idea of exploring these ideas
appeals to anyone else.*
@ -70,16 +71,15 @@ public PropertyType PropertyName
What can we see here?
- PerpexProperties are typed, so no more having to cast in the getter.
- We pass the property type and owner class as a generic type to Register() so we don't have to
write typeof() twice.
- We used default parameter values in Rigister() so that defaults don't have to be restated.
- We pass the property type and owner class as a generic type to `Register()` so we don't have to
write `typeof()` twice.
- We used default parameter values in `Register()` so that defaults don't have to be restated.
*(ASIDE: maybe Roslyn will give us [var for fields](http://blogs.msdn.com/b/ericlippert/archive/2009/01/26/why-no-var-on-fields.aspx)...)? Lets hope...*
## Binding
Binding in Perspex uses Reactive Extensions' IObservable. To bind an IObservable to a property,
use the Bind method:
Binding in Perspex uses Reactive Extensions' [IObservable](http://msdn.microsoft.com/library/dd990377.aspx). To bind an IObservable to a property, use the `Bind()` method:
Note that because PerspexProperty is typed, we can check that the observable is of the correct type.
To get the value of a property as an observable, call GetObservable():
To get the value of a property as an observable, call `GetObservable()`:
```csharp
var observable = control.GetObservable(Control.FooProperty);
@ -95,8 +95,7 @@ var observable = control.GetObservable(Control.FooProperty);
## Attached Properties and Binding Pt 2
Attached properties are set just like in WPF, using SetValue. But what about the [] operator? C# 6
will allow us to use [] array subscripts in object initializers. So how does this look?
Attached properties are set just like in WPF, using `SetValue()`. But what about the `[]` operator, also called [index initializer](https://roslyn.codeplex.com/wikipage?title=Language%20Feature%20Status&referringTitle=Home) (see *C# feature descriptions*)? The upcoming version of C# will provide a new feature that allows us to use `[]` array subscripts in object initializers. An example on how to make use of it will look like this:
```csharp
var control = new Control
@ -123,12 +122,14 @@ otherwise) from the object initializer.
Binding to a property on another control? Easy:
var control = new Control
{
Property1 = "Foo",
[Attached.Property] = "Bar",
[!Property2] = anotherControl[!Property1],
}
```csharp
var control = new Control
{
Property1 = "Foo",
[Attached.Property] = "Bar",
[!Property2] = anotherControl[!Property1],
}
```
Two way binding? Just add two bangs:
@ -146,7 +147,7 @@ var control = new Control
Perspex uses the same visual/logical tree separation that is used by WPF (and to some extent HTML
is moving in this direction with the Shadow DOM). The manner of accessing the two trees is slightly
different however. Rather than using Visual/LogicalTreeHelper you can cast any control to an
IVisual or ILogical to reveal the tree operations. There's also the VisualExtensions class which
`IVisual` or `ILogical` to reveal the tree operations. There's also the VisualExtensions class which
provides some useful extension methods such as `GetVisualAncestor<T>(this IVisual visual)` or
`GetVisualAt(this IVisual visual, Point p)`.
@ -161,25 +162,27 @@ It's probably easiest to show in an example. Here is the default style for the C
```csharp
new Style(x => x.OfType<CheckBox>())
{
Setters = new[]
{
new Setter(Button.TemplateProperty, ControlTemplate.Create<CheckBox>(this.Template)),
},
},
Setters = new[]
{
new Setter(Button.TemplateProperty, ControlTemplate.Create<CheckBox>(this.Template))
}
};
new Style(x => x.OfType<CheckBox>().Template().Id("checkMark"))
{
Setters = new[]
{
new Setter(Shape.IsVisibleProperty, false),
},
},
Setters = new[]
{
new Setter(Shape.IsVisibleProperty, false)
}
};
new Style(x => x.OfType<CheckBox>().Class(":checked").Template().Id("checkMark"))
{
Setters = new[]
{
new Setter(Shape.IsVisibleProperty, true),
},
},
Setters = new[]
{
new Setter(Shape.IsVisibleProperty, true)
}
};
```
Let's see what's happening here:
@ -196,14 +199,14 @@ new Style(x => x.OfType<CheckBox>().Class(":checked").Template().Id("checkMark")
```
This selector matches "*all controls with Id == "checkMark" in the template of a CheckBox with the
class ':checked'"*. Each control has an Id property, and Ids in templates are considered to be in a
class `:checked`"*. Each control has an Id property, and Ids in templates are considered to be in a
separate namespace.
Inside the Style class we then have a collection of setters similar to WPF.
This system means that there's no more need for WPF's Triggers - the styling works with classes
(which are arbitrary strings) similar to CSS. Similar to CSS, classes with a leading ":" are set
by the control itself in response to events like mouseover and click.
(which are arbitrary strings) similar to CSS. Similar to CSS, classes with a leading `:` are set
by the control itself in response to events like `mouseover` and `click`.
Similar to WPF, styles can be defined on each control, with a global application style collection
at the root. This means that different subsections of the visual tree can have a completely
@ -212,11 +215,11 @@ different look-and-feel.
## XAML
As you can see, all of the examples here are defined in code - but a XAML implementation is being
worked on (https://github.com/SuperJMN/Perspex/tree/xamlreader)
worked on. The current progress can be reviewed at https://github.com/SuperJMN/Perspex/tree/fuent-api.
## That's all for now
There's a lot more to see, and even more to do, so if you want to have a play you can get the code
Kai Eichinger
12 years ago