DirectUI XML - Notes that you can use

[Panda X]

DirectUI is the markup language that renders a majority of the Windows shell. Back in XP it was made up of both CSS and XML. Now it's purely XML. A lot of things are controlled in DirectUI and not the MSStyles. I will help you change that.

Notes to begin:

• ExplorerFrame, Shell32, Shellstyle (Sys32), etc override the Shellstyle of the MSStyles. So if a property is defined in your theme's Shellstyle and Shell32, and Shell32's value is different, that value in Shell32 will be used instead.
• Always use themeable() so your modifications will work in Windows Classic (themeable(themed property, classic property)

Common Functions:

• DrawThemeBackground: dtb(Class, Part, State)
• GetThemeColor: gtc(Class, Part, State, ID)
• GetThemeFont: gtf(Class, Part, State, ID)
• GetThemeMargins: gtmar(Class, Part, State, ID)
• GetThemeMetrics: gtmet(Class, Part, State, ID)
• DrawFrameControl: dfc(Unknown, Unknown)
• Themeable: themeable(Themed, Classic)

Info / Tips of the functions' values:

• Orange: The fuction
• Red: The class as defined in the theme's CMAP.
• Green: A part of a class.
• Blue: The state of the part.
• Pink: ID number. See this list of ID's that correspond with a theme's property.
• Gray: Haven't figured out how to use them / what they do.
• Black: Default value read from the MSStyles.
• Brown: Determines what value to use if a part is Aero styled or Classic styled. If a theme is applied it uses the first value, if you're using Windows Classic/Standard it uses the second value. It's best to leave as a hardcoded value.

Examples:
Using an image for a background:

Code: xml

background="dtb(ItemsView::ListView, 6, 2)"

Info: This will draw the background using the image located at: Explorer & Shell > Explorer > Items View > ListView > GroupHeader > <2>

Changing the text color:

Code: xml

foreground="gtc(ItemsView, 0, 0, 3803)"

Info: This will make the text (or foreground) the color of the TEXTCOLOR:COLOR property in: Explorer & Shell > Explorer > Items View > ItemsView

Setting the font:

Code: xml

font="gtf(TextStyle, 1, 0, 809)"

Info: This will set the font defined by the BODYFONT:FONT property in: Buttons, Boxes & Controls > Buttons > Button > CommandLink
Note: If the ID isn't defined it will set the font defined by the FONT:FONT property instead.

Setting the margins:
Note: This can be used for any property using a Rect() such as: Padding, Margin, and BorderThickness.
Note2: Rect()'s values go (left, top, right, bottom) whereas in the MSStyles it's (left, right, top, bottom)

Code: xml

padding="gtmar(SearchBox, 1, 0, 3602)"

Info: This will set the padding as defined by the CONTENTMARGINS:MARGINS property in: Address, Breadcrumb & Search > Search > SearchBox > Basic > Normal > Active > Background

Setting the metrics:

Code: xml

width="gtmet(Navigation, 1, 0, 2416)"

Info: This will set the width as defined by the WIDTH:INT property in: Buttons, Boxes & Controls > Buttons > Navigation > BackButton

Using themed elements

Code: xml

foreground="themeable(gtc(ItemsView, 0, 0, 3803), windowtext)"

Info: The font will be the color defined by the TEXTCOLOR:COLOR property in: Explorer & Shell > Explorer > Items View > ItemsView, however if this change is in a system DLL and windows classic was enabled, the font will be Window Text as defined in the control panel.

Technical notes for Themeable():
When defining sizes in themeable() wrap in single quotes. For example:

Setting the height property with themeable()

Code: xml

height="themeable(gtmet(Navigation, 1, 0, 2417), '18rp')"

Setting a font with 110% size with themable()

Code: xml

font="themeable(gtf(PreviewPane, 7, 1), 'menufont;110%')"

Technical notes for DrawThemeBackground:
The class, part, or state it reads from doesn't have to be a graphic. It's set by bgtype:enum. So you can have gradients (horizontal, vertical, and radial), borderfill, or images.

[K-Johnson]

Definitely useful, thanks!

Something I have been trying to find is how to modify the text shadow property in Shellstyle.dll.
As you can see in PsycoB's featured deviation, he altered the position, opacity and spread of the drop shadow.

I did a quick comparison between my UIFile/1 and his UIFile/1 and found nothing immediate as far as text shadow modifications go.  I'll take a look at it again and go through each difference more thoroughly (running Notepad++ with Comparison plug-in).   Perhaps this property is taken from the MSSTYLES?  I have altered System Metrics and added the text shadow property in the CommandModule but did not see any changes when I applied the theme.  I went through and found every glowing element I could find but it did not seem to alter the FolderBand shadows.

It's driving me nuts because I know it's possible, and it shouldn't be too difficult to manage, yet I'm constantly moving between the two and haven't gotten any closer to solving it. 

[sunbeam2000]

can you link it, please???

i didn't know someone has changed the settings, maybe i'll find out, how...

[Panda X]

Definitely useful, thanks!

Something I have been trying to find is how to modify the text shadow property in Shellstyle.dll.
As you can see in PsycoB's featured deviation, he altered the position, opacity and spread of the drop shadow.

I did a quick comparison between my UIFile/1 and his UIFile/1 and found nothing immediate as far as text shadow modifications go.  I'll take a look at it again and go through each difference more thoroughly (running Notepad++ with Comparison plug-in).   Perhaps this property is taken from the MSSTYLES?  I have altered System Metrics and added the text shadow property in the CommandModule but did not see any changes when I applied the theme.  I went through and found every glowing element I could find but it did not seem to alter the FolderBand shadows.

It's driving me nuts because I know it's possible, and it shouldn't be too difficult to manage, yet I'm constantly moving between the two and haven't gotten any closer to solving it. 

Link.

[Panda X]

Added:
3805: EDGEHIGHLIGHTCOLOR:COLOR
3821: FILLCOLORHINT:COLOR
3825: ACCENTCOLORHINT:COLOR

[K-Johnson]

It's this theme:  http://psycob.deviantart.com/art/Plain-DeepBlue-101599319

I haven't tested the theme out myself, I just went by the preview.  You can see that the folderband shadow there looks different.  I think it's too consistent and too "clean" to be a graphical artifact.  I apologize if the folderband shadows do turn out to be the same.  I haven't actually tried it out.  

I just went straight to digging around in his shellstyle.dll to try to find how he changed it.

[Panda X]

It's this theme:  http://psycob.deviantart.com/art/Plain-DeepBlue-101599319

I haven't tested the theme out myself, I just went by the preview.  You can see that the folderband shadow there looks different.  I think it's too consistent and too "clean" to be a graphical artifact.  I apologize if the folderband shadows do turn out to be the same.  I haven't actually tried it out.  

I just went straight to digging around in his shellstyle.dll to try to find how he changed it.

That looks like the default with a different background image. That's all.


Added:
3810: GRADIENTCOLOR1:COLOR
3811: GRADIENTCOLOR2:COLOR
3812: GRADIENTCOLOR3:COLOR
3813: GRADIENTCOLOR4:COLOR
3814: GRADIENTCOLOR5:COLOR

[K-Johnson]

Ah, ok    Sorry, I had thought the shadows were regularly more pronounced, but I can see how the background could mess with that.

Do you think it's possible to add properties like TextShadowOffset, TextShadowColor, and TextShadowType?

How are you finding these?  I'm excited you'll somehow come across these.  I want to add these properties to the Folderband to match the Communication/Media background.

[Panda X]

Ah, ok    Sorry, I had thought the shadows were regularly more pronounced, but I can see how the background could mess with that.

Do you think it's possible to add properties like TextShadowOffset, TextShadowColor, and TextShadowType?

How are you finding these?  I'm excited you'll somehow come across these.  I want to add these properties to the Folderband to match the Communication/Media background.

In the XML I just trace them to the theme.

Example:
background="themeable(gradient(gtc(Communications::Rebar, 0, 0, 3805), gtc(MediaStyle, 0, 0, 3821), gtc(ListViewStyle, 6, 0, 3823), 3), window)"

I go to Communications::Rebar, 0, 0 in VSB (Toolbars, Headers and Rebar > Rebar > Communications) and change on of the three properties. Which ever one matches the first part of the gradient in the Search Home is the color it reads from. In this case it's EDGEHIGHLIGHTCOLOR:COLOR.
Then I go to MediaStyle, 0, 0 in VSB (Styles > MediaStyle) and do the same. In this case it's FILLCOLORHINT:COLOR.
Then lastly I go to ListViewStyle, 6, 0 in VSB (Styles > ListViewStyle > GroupHeader) and do the same again. In this case it's ACCENTCOLORHINT:COLOR.



Would become

[Panda X]

Edited:
So far 215 are known.
See this page for details and what numbers to use for which properties: http://vistastylebuilder.com/wiki/index.php?title=Property_Identifier

[satukoro]

Indeed. That helps quite a lot.

[K-Johnson]

Excellent! 

PandaX, can you tell me what class/part "CommandModule" is in?
[Explorer & Shell > Explorer > CommandModule > <1>]

I clicked on the info icon but it only says CommandModule.  Is that all I have to type in the "ClassName" section?



Do I just put in "CommandModule" in the classname area?

[Panda X]

Excellent! 

PandaX, can you tell me what class/part "CommandModule" is in?
[Explorer & Shell > Explorer > CommandModule > <1>]

I clicked on the info icon but it only says CommandModule.  Is that all I have to type in the "ClassName" section?



Do I just put in "CommandModule" in the classname area?

Yep. If you look in the Shellstyle XML file CommandModule is already there in the FolderBand section. You can use that for better understanding.

[mdtauk]

Now I am sure I am not the only one who would like to know what knowing DirectUI would accomplish?

I know it is used as a form of XML document in Explorerchrome.dll and shellstyle.dll, but what would understanding it mean to visual style designers.

[K-Johnson]

Now I am sure I am not the only one who would like to know what knowing DirectUI would accomplish?

I know it is used as a form of XML document in Explorerchrome.dll and shellstyle.dll, but what would understanding it mean to visual style designers.

It gives you more control over certain areas of the theme.

You can't change everything in MSSTYLES (what VSB modifies) -- for instance, the "Favorite Links" text in your navigation pane of Windows Explorer.  That is controlled within shellstyle.dll, and they link this "Favorite Links" text to one of the global properties within MSSTYLES.

Example: font="gtf(TextStyle, TEXT_BODYTEXT, 0)" // I think the ones in red are global variables

But since we now know what the parameters mean (at least the color portion [gtc(...)]), we are able to add the property we want within MSSTYLES and be able to rewrite the parameters in the shellstyle.dll (the example code snippet above) to link them to our own in the VSB.

At least this is what I understand.  I could be wrong. 

[mdtauk]

http://www.uieasy.com/blog/

This site seems to have DirectUI tools and info...

[K-Johnson]

Okay, so how would I implement textshadowtype:enum and other types?

As I understand it, gtc(...) tells the theme that this is a color, gtf(...) tells the theme tha this is a font.  Can the gtc(...) method accept other types other than *:color?

For instance, I want to add:
[TEXTSHADOWOFFSET:POSTION = 0,1] // Property Identifier = 3402
[TEXTSHADOWCOLOR:COLOR = White] // Property Identifier = 3818
[TEXTSHADOWTYPE:ENUM = Single] // Property Identifier = 4010

into this block:

<if id="atom(ProperTreeLinksHeader)">
<Element
foreground="themeable(argb(255, 139, 139, 139), windowtext)"
background="themeable(argb(255, 252, 252, 252), window)"
padding="rect(9rp,9rp,0rp,7rp)"
font="gtf(textstyle, TEXT_BODYTEXT, 0)"
/>

[Panda X]

http://www.uieasy.com/blog/

This site seems to have DirectUI tools and info...

I gave that a shot about a day ago. Wasn't really useful at all.

[sunbeam2000]

In the XML I just trace them to the theme.

Example:
background="themeable(gradient(gtc(Communications::Rebar, 0, 0, 3805), gtc(MediaStyle, 0, 0, 3821), gtc(ListViewStyle, 6, 0, 3823), 3), window)"

I go to Communications::Rebar, 0, 0 in VSB (Toolbars, Headers and Rebar > Rebar > Communications) and change on of the three properties. Which ever one matches the first part of the gradient in the Search Home is the color it reads from. In this case it's EDGEHIGHLIGHTCOLOR:COLOR.
Then I go to MediaStyle, 0, 0 in VSB (Styles > MediaStyle) and do the same. In this case it's FILLCOLORHINT:COLOR.
Then lastly I go to ListViewStyle, 6, 0 in VSB (Styles > ListViewStyle > GroupHeader) and do the same again. In this case it's ACCENTCOLORHINT:COLOR.



Would become

Wow, sounds very interesting..
i admit, that i don't understand everything at the moment  , but i will look into it. it seems that you've opened a new way of furthergoing UI Skinning.
so maybe a VS similiar to the new Live Essentials Style could be possible. i love the gradients in LiveMessenger and LiveMail and the style itself.

[K-Johnson]

PandaX, how can I get the foreground text to read all three properties in the MSSTYLES?

I have already added the properties and triple checked that I had each property added to the right parts and saved.  I can get only one property to "show up" at a time, but never all three.

I want to get gtc(ProperTree,1,0,3803), gtc(ProperTree,1,0,2414), gtc(ProperTree,1,0,3817) to show up.

Here are the code snippets that work:

Code:

foreground="themeable(gtc(ProperTree,1,0,3803))"

or

foreground="gtc(ProperTree,1,0,3803)"

However, I don't know how I could add the other two properties.  Here's what I tried but to no avail.

Code:

foreground="gtc(ProperTree,1,0,3803), gtc(ProperTree,1,0,2414), gtc(ProperTree,1,0,3817)"
foreground="gtc((ProperTree,1,0,3803), (ProperTree,1,0,2414), (ProperTree,1,0,3817))"
foreground="gtc(ProperTree1,0,3803,ProperTree,1,0,2414,ProperTree,1,0,3817)"

They all broke the shellstyle and didn't load.  I played around some more and added three foreground entries with each one being supplied by a different property.  Of course only one property worked out of the three depending on the order they were listed.

So anyway, I tried.  Is it possible to retrieve more than one property from the shellstyle?

[K-Johnson]

Ok, well I wasn't thinking straight.  Like you said, gtc(...) is used to get the theme's color.  What I was trying to do was to get some properties (text shadow, glow size, etc.) which aren't of the color type.  So of course it wouldn't affect the shellstyle and in some cases it broke it.

So now we know how to get the color (gtc(...)) and how to get the font (gtf(...)) from the MSSTYLES.

I looked at the MSDN function list and saw "GetThemeColor" and "GetThemeFont".  I looked up some other methods in the Shellstyle and found that they could also fit in acronym form for the function's name.  For instance, dtb would probably be "DrawThemeBackground".

So I tried adding GetThemeBool() and GetThemeEnum() methods by keeping the same acronym style as gtc(), gtf(), and dtb().  But unfortunately they don't work, and they break the shellstyle.  I played around some more with the acronyms but nothing I tried worked.

I also tried GetThemeInt() by typing gti() and that didn't break the shellstyle.  I can only assume that this is the "GetThemeInt()" method.  Maybe someone wants to or has already confirmed that?

I was really hoping that I could get Boolean, Enum, and other type's.  They're either using a different name for those methods or aren't included because they aren't necessary?

[Panda X]

Ok, well I wasn't thinking straight.  Like you said, gtc(...) is used to get the theme's color.  What I was trying to do was to get some properties (text shadow, glow size, etc.) which aren't of the color type.  So of course it wouldn't affect the shellstyle and in some cases it broke it.

So now we know how to get the color (gtc(...)) and how to get the font (gtf(...)) from the MSSTYLES.

I looked at the MSDN function list and saw "GetThemeColor" and "GetThemeFont".  I looked up some other methods in the Shellstyle and found that they could also fit in acronym form for the function's name.  For instance, dtb would probably be "DrawThemeBackground".

So I tried adding GetThemeBool() and GetThemeEnum() methods by keeping the same acronym style as gtc(), gtf(), and dtb().  But unfortunately they don't work, and they break the shellstyle.  I played around some more with the acronyms but nothing I tried worked.

I also tried GetThemeInt() by typing gti() and that didn't break the shellstyle.  I can only assume that this is the "GetThemeInt()" method.  Maybe someone wants to or has already confirmed that?

I was really hoping that I could get Boolean, Enum, and other type's.  They're either using a different name for those methods or aren't included because they aren't necessary?

From this page (http://msdn.microsoft.com/en-us/library/bb773213(VS.85).aspx) it seems as if you need to use the GetThemeEnumValue Function.

[iffy525]

This all looks very useful, however could someone reword how to use it for a noob?  Like what do I edit in the shellstyle and what do I edit in .msstyle?

Also, what's the best program to use for editing this sort of stuff?

[Panda X]

Hint on margins: gtmar(Class, Part, State, Type¹)

¹:
Sizing: 3601
Content: 3602
Caption: 3603

[Panda X]

Get Theme Metrics:

gtmet(Class, Part, State, Property)

Example Properties:

WIDTH:INT   2416
HEIGHT:INT   2417

[Panda X]

When adding height, width or fonts with a defined percentage (menufont;110%) to the themeable() fuction, make sure to wrap in single quotes. Else DUI will crash.

[Legacy-Code]

I have a question , would it be possible to add an image to my navigation pane using these methods ? Id like to use the bitmap 833 from shell32.

 

Uploaded with ImageShack.us

[Panda X]

Pretty sure you can. I could do it for you, though probably not right away as I'm usually busy.

[Panda X]

Updated the first post with better information and examples.

[Mr GRiM]

Can you update this post with a new link to all the text colour properties you have, the link in the first post is dead.

I really want the properties for the treeView TreeItems in explorer so I can change the navigation pane PropperTree so it uses those by default instead of the WindowText Color

[Mr GRiM]

Well not really the place I wanted but I tried foreground="themeable(gtc(TreeView,2,1,3803))" and that let me change the ProperTree text colour in Lists, Menus & Tabs > TreeView so I guess that will do lol

[Panda X]

Well not really the place I wanted but I tried foreground="themeable(gtc(TreeView,2,1,3803))" and that let me change the ProperTree text colour in Lists, Menus & Tabs > TreeView so I guess that will do lol

What do you mean?

[Mr GRiM]

What do you mean?

Well I have very little idea what I am doing and just trying to make some sense of it, the colour property I was looking for was Explorer & Shell > Explorer > TreeView > TreeItem but instead I found the one for Lists, Menus & Tabs > TreeView, so in a way thats still good because it still lets me use another custom colour rather then the default Window Text colour.

I think it would make more sense if I could have it changeable through Explorer & Shell > Explorer > TreeView > TreeItem as that's where all the other properties are for Hot, Selected etc and also where any text effects are applied like shadows and Fonts, just seems like the most logical place to edit the main navigation Tree View colour.

[Panda X]

Well I have very little idea what I am doing and just trying to make some sense of it, the colour property I was looking for was Explorer & Shell > Explorer > TreeView > TreeItem but instead I found the one for Lists, Menus & Tabs > TreeView, so in a way thats still good because it still lets me use another custom colour rather then the default Window Text colour.

I think it would make more sense if I could have it changeable through Explorer & Shell > Explorer > TreeView > TreeItem as that's where all the other properties are for Hot, Selected etc and also where any text effects are applied like shadows and Fonts, just seems like the most logical place to edit the main navigation Tree View colour.

You could change TreeView to Explorer::TreeView and it'll be there.