Styling WPF with CSS

[Colin Eberhardt]

Hi All,

I had a crazy idea a few months back about using CSS selectors to
style WPF applications. I finally had the time to put something
together ...

http://www.scottlogic.co.uk/blog/wpf/2009/03/using-css-selectors-for-styling-in-wpf/

I would be interested to know what you guys think. Should I file this
under; "nice idea, has potential", or "crazy idea, what on earth were
you thinking?".

I do think this could have more potential within silverlight. Flex
already allows you to apply styling to your UI using CSS. Not sure how
they map between HTML elements and Flex UI widgets. I also doubt it
uses selectors, which is the main driving force for my idea.

Regards,
Colin E.

[Marlon Grech]

any thing that has to do with selectors is a good idea :P I love selectors they can be used for so much.... for example look at JQuery.... I like your idea and I think it makes a lot of sense....


Regards
Marlon
WPF Blog - http://marlongrech.wordpress.com/

[David Anson]

*I* think it's interesting, Colin. :)

One of your primary motivations seems to be to introduce selectors to the WPF styling system. But can't the effect of selectors be achieved by taking advantage of implicit styling and adding Styles to the relevant ResourceDictionaries at different levels of the control hierarchy? (In other words, to style Buttons within a particular Grid a special way, put the Style for those Buttons in the Resources of THAT Grid.) I agree that doing so may split up the styling information across the entire XAML, but that's secondary to my question about whether the basic selector-like functionality is present in WPF or not.

[Bill Kempf]

I think it's fascinating, though whether or not it's useful remains to be seen.  So definitely in the "has potential" camp.

--
Quidquid latine dictum sit, altum sonatur.
- Whatever is said in Latin sounds profound.

War is peace. Freedom is slavery.  Bugs are features.

[Pavan Podila]

I would classify this under "Interesting". Whenver you talk about
selectors, you are implicity assuming that you have some knowledge of
the visual tree. This is true for parent-child, sibling and nested
selectors. Having a CSS stylesheet that assumes a lot about the visual
tree is dangerous since you can be replacing templates on the fly.

That's my take.


- Pavan

On Mar 11, 2:14 pm, Bill Kempf <weke...@gmail.com> wrote:
> I think it's fascinating, though whether or not it's useful remains to be
> seen.  So definitely in the "has potential" camp.
>

> On Wed, Mar 11, 2009 at 12:19 PM, Colin Eberhardt <colin.eberha...@gmail.com

>
>
>
> > wrote:
>
> > Hi All,
>
> > I had a crazy idea a few months back about using CSS selectors to
> > style WPF applications. I finally had the time to put something
> > together ...
>

> >http://www.scottlogic.co.uk/blog/wpf/2009/03/using-css-selectors-for-...

[Mike Brown]

Yeah but all of it falls under the designer's domain. I think it's interesting...especially in the context of a Native WPF HTML rendering engine. Bear with me and I'll show you what I'm talking about soon.

[Jaime Rodriguez]

Colin,

CSS support for SL was probably the top 5 questions I used to get in the early SL days .. so I agree you are onto something..

I was surprised at the approach; I always envisioned this being a CSS parser that created Styles to be used in SL ... I never expected people to want css syntax inside SL or WPF.. That said, any thing you accomplish in this space is I am sure helpful to the SL community..

I actually have been thinking about (and fighting hard) the urge for a HTML to XAML converter.. One of the things that discourages me from trying it is that I have no way to parse and properly apply CSS ... If you solve that, then my biggest hurdle is over and the XSLTing should be easier..

Cheers,

-----Original Message-----
From: wpf-di...@googlegroups.com [mailto:wpf-di...@googlegroups.com] On Behalf Of Colin Eberhardt
Sent: Wednesday, March 11, 2009 10:20 AM
To: WPF Disciples
Subject: [WPF Disciples] Styling WPF with CSS

[Tamir Khason]

I see it very abusive :)

--
Tamir http://khason.net/

[Josh Smith]

One could say the same thing about a hammer.  ;)

[Mike Brown]

Jaime,

   I'm taking a different approach. I treat the HTML DOM with a hierarchical item template. This will allow a javascript engine to manipulate the dom directly and the UI automatically update. So my biggest concern right now is creating the FrameworkElements that correspond to the various DOM elements. (and of course down the road would be the Javascript Engine).

[Peter O'Hanlon]

It's an interesting idea Colin - I can't see that I'd ever want to use it, but it certainly has some interesting features. How does this play with Blend? My designer has finally got his head round using Blend for all his WPF needs, and I don't think he'd want to learn a new way of doing things.

--
Peter O'Hanlon

[Shawn Wildermuth]

I could see it as useful if it works with Silverlight as the Flex/Flash guys are used to CSS-style styling.

 

Thanks,

 

Shawn Wildermuth

http://wildermuth.com

https://agilitrain.com

Microsoft MVP (C#), MCSD.NET, Author and Speaker

 

The Silverlight Tour is coming to a city near you!

[Sacha Barber]

I think this is both neat and crazy.



> Date: Wed, 11 Mar 2009 10:19:59 -0700

> Subject: [WPF Disciples] Styling WPF with CSS

> From: colin.e...@gmail.com
> To: wpf-di...@googlegroups.com

---

Windows Live Hotmail just got better. Find out more!

[Colin Eberhardt]

Hi Jamie,

> Colin,
>
> CSS support for SL was probably the top 5 questions I used to get in the early SL days .. so I agree you are onto something..

It doesn't surprise me that this is in the top 5 questions about
Silverlight. Personally I don't think it really *needs* CSS styling,
it is just that the current system for styling looks so similar to
certain aspects of CSS that people are always going to ask the
question.

I will definitely look into porting this to Silverlight.

> I actually have been thinking about (and fighting hard) the urge for a HTML to XAML converter..  One of the things that discourages me from trying it is that I have no way to parse and properly apply CSS ...  If you solve that, then my biggest hurdle is over and the XSLTing should be easier..  

That sounds interesting. Surely another hurdle you face is the mapping
to HTML elements to Silverlight elements? I presume you would only map
to a sub-set for Silverlight elements - for example, I cannot see how
you could ever infer the usage of a StackPanel from inspecting some
HTML.

Regards, Colin E.

[Colin Eberhardt]

Hi Marlon,

On Mar 11, 5:56 pm, Marlon Grech <marlongr...@gmail.com> wrote:
> any thing that has to do with selectors is a good idea :P I love selectors
> they can be used for so much.... for example look at JQuery.... I like your
> idea and I think it makes a lot of sense....

Thanks. I have only used JQuery a few times - but yes, you are right,
it is an excellent application of CSS selectors, used well beyond the
scope of just styling.

Colin E.

[Colin Eberhardt]

Hi David,

I where you are coming from, you would consider using global
(implicit) styles and adding local, more specific styles. This sounds
like a very reasonable approach. However, the CSS approach has a few
advantages:

1. When designing your XAML, you do not have to decide in advance
whether an element needs styles or not (i.e. whether to add a "Style=
{StaticResource ...}" to the XAML). Styling can be a separate
activity.

2. One of the powers of CSS is that multiple rules can match the same
element, this is the 'cascade'. This WPF implementation also has this
feature (however, my implementation does not use any weighting logic
when applying the style).

3. My implementation does not require that you target a specific type
with your styles, this combined with the ability to merge styles
allows for much greater power.


Regards,
Colin E.

On Mar 11, 5:56 pm, David Anson <david...@microsoft.com> wrote:
> *I* think it's interesting, Colin. :)
>
> One of your primary motivations seems to be to introduce selectors to the WPF styling system. But can't the effect of selectors be achieved by taking advantage of implicit styling and adding Styles to the relevant ResourceDictionaries at different levels of the control hierarchy? (In other words, to style Buttons within a particular Grid a special way, put the Style for those Buttons in the Resources of THAT Grid.) I agree that doing so may split up the styling information across the entire XAML, but that's secondary to my question about whether the basic selector-like functionality is present in WPF or not.
>
> -----Original Message-----
> From: wpf-di...@googlegroups.com [mailto:wpf-di...@googlegroups.com] On Behalf Of Colin Eberhardt
> Sent: Wednesday, March 11, 2009 10:20 AM
> To: WPF Disciples
> Subject: [WPF Disciples] Styling WPF with CSS
>
> Hi All,
>
> I had a crazy idea a few months back about using CSS selectors to
> style WPF applications. I finally had the time to put something
> together ...
>

> http://www.scottlogic.co.uk/blog/wpf/2009/03/using-css-selectors-for-...

[Colin Eberhardt]

Hi Peter,

> It's an interesting idea Colin - I can't see that I'd ever want to use it,
> but it certainly has some interesting features. How does this play with
> Blend? My designer has finally got his head round using Blend for all his
> WPF needs, and I don't think he'd want to learn a new way of doing things.

A very good point. All the designers I have worked with in the past
use PhotoShop. Also, I have very rarely used Blend myself.

Considering my lack of experience, I'll ask the question right back at
you ...

Do you think it could work within Blend?

Thanks Peter, looking forward to your response ;-)

Regards,
Colin E.

[Peter O'Hanlon]

Colin - I threw this question to my designer, and he finally got back to me with an answer. His feeling was that it would work, but it would put certain constraints in his way which would mean that he'd have to do a bit more planning up front, rather than just sitting down and "brainstorming".

--
Peter O'Hanlon

[ken...@internode.on.net]

That's amazing stuff, Colin - well done. I can certainly see utility,
especially if this is incorporated into WPF/SL proper.

Best,
Kent

[Colin Eberhardt]

Thanks Peter,

Oh to be a Designer, free to brainstorm without being weighed down by
the need for up front planning!

Thanks for the information. The way I have always tended to work with
designers (for vanilla HTML websites) is to let them do the arty bits,
leaving the technical implementation of CSS and HTML to myself.

How does it work with WPF / CSS, is it a similar process of the
developer refining the design? Or with Blend in his toolkit do you
expect your Designer to come up with production ready code?

Hi Kent,

> That's amazing stuff, Colin - well done. I can certainly see utility,
> especially if this is incorporated into WPF/SL proper.

Many thanks - glad you like it. When I have a suitable moment I plan
to extend this idea to Silverlight, adding a text-based CSS-like
syntax, and possible a mechanism for mapping HTML elements to XAML, I
want to see if you can share CSS between a website and its embedded SL
content.

Regards,
Colin E.

[Peter O'Hanlon]

In most cases, with the HTML/CSS stuff, our designer has tended to produce the base framework himself. He uses PhotoShop to produce several samples, and Dreamweaver to play about with them using good old Lorem Ipsum. The technical side is taken care of by the devs, with some input on the CSS, but mainly it's down to the designer - after all, he tends to be the one who looks after the overall look and feel.

 

We've adopted a similar approach with VS and Blend, but there's more play with the code thanks to MVVM than was possible in ASP.NET. When I have time, I might just write some posts about how a project typically plays out for us, with the different roles that each plays.

 

We've moved heavily into MVVM precisely because we were finding it difficult to get the designers involvement throughout the development - we either had to wait for him to produce prototypes and then we added the functionality, or he waited until we'd produced enough code for him to "make pretty." Neither way was very satisfying or productive, and just ended up costing more time than we wanted to spend. With MVVM, Mark spends a week or so thrashing out some protoype artwork and assets, while we get the base code in place, and then he starts pulling the bits together. BTW - the big advantage for us here, is that the devs (frustrated artists the lot of them), can also get involved on the design side if they so desire.

--
Peter O'Hanlon