DirectUI Discussion

[renesis]

Any chance you can share with us how you did the following:

When foristance we select a folder as 'icon', we have separate mouse over image for the folder  and other image for the text.
When we select a folder as 'details' we can have stripes, and mouse over images like mac os X , blue hover and white text .

The blue hover with white text is what I really want to know.

[Panda X]

Any chance you can share with us how you did the following:

When foristance we select a folder as 'icon', we have separate mouse over image for the folder  and other image for the text.
When we select a folder as 'details' we can have stripes, and mouse over images like mac os X , blue hover and white text .

The blue hover with white text is what I really want to know.

We recoded explorer to do that via (DirectUI).

[rajtheeban]

Any chance you can share with us how you did the following:

When foristance we select a folder as 'icon', we have separate mouse over image for the folder  and other image for the text.
When we select a folder as 'details' we can have stripes, and mouse over images like mac os X , blue hover and white text .

The blue hover with white text is what I really want to know.

Yes these modifications are impressive: the theme created by Idas looks like mac not only in the interface but also in its use (for the first time), with an ingenious change in the properties of the explorerframe.dll file (40960.txt). Excellent find
i managed to add these modifications in dark soft, more precisely the second effect described which allows to change the image of the background adding some stripes behind the text, in details mode

I did not understand everything but here's what I did to get this result (all the credits for Zeus of course):
1) In the 40960.txt file I added this text box for the properties in details view mode:

"<UIItem resid="item.details" layout="borderlayout()" fontsize="9pt" padding="rect(10rp,0rp,0rp,0rp)" capabilities="selectable|focusable|renameable" tooltip="true" infotipcallback="true">
<UICheckbox layoutpos="left" padding="rect(2rp,0rp,0rp,2rp)" contentalign="middleleft"/>
<UIImage layoutpos="left" padding="rect(32rp,1rp,2rp,2rp)"/>
<UIDetailsPropertyCollection layoutpos="left" tooltip="false" sheet="details"/></UIItem>
<UIProperty resid="property.details.default" padding="rect(14rp,0,45rp,2rp)" active="keyboard"/>
<UIProperty resid="property.details.first" padding="rect(0,0,45rp,2rp)"/>
<UICollection resid="collection.details" LogicalImageSize="16" padding="rect(19rp,2rp,19rp,0rp)" margin="rect(0,0rp,0,0rp)" layout="borderlayout()" UIItemCreationPropMap="item.details">
<ItemRowLayout id="atom(UIItemsHost)" class="collection.details" layoutpos="top" padding="rect(-10rp,0rp,5rp,0rp)" UseItemWidth="false"/></UICollection>
<UICollection resid="collection.details.grouped" LogicalImageSize="16" padding="rect(0rp,0rp,5rp,0rp)" layout="borderlayout()" UIItemCreationPropMap="item.general.grouped" DevirtualizeItems="true">
<ItemRowLayout id="atom(UIItemsHost)" padding="rect(0rp,-17rp,5rp,0rp)" margin="rect(0rp,0rp,0,0rp)" layoutpos="top"/></UICollection>
<UICollection resid="collection.details.grouped.location" layout="borderlayout()" UIItemCreationPropMap="item.general.grouped.location" DevirtualizeItems="true" LogicalImageSize="16"><ItemRowLayout id="atom(UIItemsHost)" layoutpos="top"/></UICollection>
<UIRootItem resid="rootitem.details" columnpadding="0rp" layout="filllayout()" padding="rect(0rp,-1rp,0rp,0rp)" UICollectionCreationPropMap="*=collection.details,grouped=collection.details.grouped,grouped.location=collection.details.grouped.location">
<LineScroller padding="rect(0rp,0,0rp,0rp)" pinning="PinVert"><linkedviewer layoutpos="top" padding="rect(0rp,0,0rp,0rp)" xscrollable="true" yscrollable="false">
<UIViewHeader layout="borderlayout()" Resizable="true"/></linkedviewer>
<element id="atom(UICollectionHost)" background="themeable(dtb(ItemsView, 1, 1), argb(0,0,0,0))" padding="rect(-19rp,0rp,-19rp,0)" layout="filllayout()"/>
</LineScroller> </UIRootItem> "

Like you can see the main change has been brought at the end:
Like Idas, i added : background="themeable(dtb(ItemsView, 1, 1), argb(0,0,0,0))" padding="rect(-19rp,0rp,-19rp,0)"
This propertie determines the image you want to use as background for the explorer: of course you must also make this change with W7SB like shown here:



2) Other change, at the end of the 40960.txt file with this addition to change the color of the text (normal and hot state)

<style resid="details">
<FadeElement background="argb(0,0,0,0)" contentalign="topleft"/>
<PaintSurrogate background="argb(0,0,0,0)" contentalign="topleft"/>
<UIProperty background="argb(0,0,0,0)" contentalign="topleft"/>
<UIDetailsPropertyCollection background="argb(0,0,0,0)" contentalign="topleft"/>
<button background="argb(0,0,0,0)" contentalign="topleft"/>
<clipper background="argb(0,0,0,0)" contentalign="topleft"/>
<element background="argb(0,0,0,0)" contentalign="topleft"/>
<UIProperty height="20rp" accessible="true" accrole="Text" tooltip="true" tooltipmaxwidth="400" contentalign="middleleft|endellipsis|editcontrol" MaxNumTextLines="1"/><if active="keyboard"><if keyfocused="true">
<UIProperty background="themeable(dtb(ItemsView, 3, 1), argb(0,0,0,0))"/></if> </if>
 
<unless id="atom(FileName)">
<UIProperty foreground="themeable(gtc(ItemsView, 5, 0, 3803), windowtext)"/>
<if selected="true">
<UIProperty foreground="themeable(gtc(ItemsView, 4, 1, 3803), highlighttext)"/></if> </unless>
 
<if id="atom(SearchHit)">
<FadeElement background="themeable(dtb(ItemsView, 1, 2), argb(0,0,0,0))" initialbackground="themeable(dtb(ItemsView, 1, 1), argb(0,0,0,0))" bordercolor="themeable(argb(0,0,0,0), windowtext)" borderthickness="themeable(rect(0,0,0,0), rect(1,1,1,1))"/>
<if selected="true">
<FadeElement bordercolor="themeable(argb(0,0,0,0), highlighttext)"/></if> </if> </style>

Go to Explorer & Shell > Explorer > Items View > ItemsView > Unknown and Explorer & Shell > Explorer > Items View > ItemsView > Subheader > Normal and modify the property "Color:text"

Finally add the adequate images to get "the blue hover with white text": Explorer & Shell > Explorer > Items View > ListView > ListItem (black in my case, for my own theme)

TA DA!



and sorry for my english

[ka-la]

Yes these modifications are impressive: the theme created by Idas looks like mac not only in the interface but also in its use (for the first time), with an ingenious change in the properties of the explorerframe.dll file (40960.txt). Excellent find
i managed to add these modifications in dark soft, more precisely the second effect described which allows to change the image of the background adding some stripes behind the text, in details mode

I did not understand everything but here's what I did to get this result (all the credits for Zeus of course):
1) In the 40960.txt file I added this text box for the properties in details view mode:

Like you can see the main change has been brought at the end:
Like Idas, i added : background="themeable(dtb(ItemsView, 1, 1), argb(0,0,0,0))" padding="rect(-19rp,0rp,-19rp,0)"
This propertie determines the image you want to use as background for the explorer: of course you must also make this change with W7SB like shown here:



2) Other change, at the end of the 40960.txt file with this addition to change the color of the text (normal and hot state)

Go to Explorer & Shell > Explorer > Items View > ItemsView > Unknown and Explorer & Shell > Explorer > Items View > ItemsView > Subheader > Normal and modify the property "Color:text"

Finally add the adequate images to get "the blue hover with white text": Explorer & Shell > Explorer > Items View > ListView > ListItem (black in my case, for my own theme)

TA DA!



and sorry for my english


How could I do the "Stripes" thing on Vista? Any clue? :O

[rajtheeban]

For Vista ?  good question...
I asked myself the same question, but i didn't find the correct file 

[renesis]

I havent had the chance to try this yet but thank you so much for writing it all up. 

[Panda X]

Yes these modifications are impressive: the theme created by Idas looks like mac not only in the interface but also in its use (for the first time), with an ingenious change in the properties of the explorerframe.dll file (40960.txt). Excellent find
i managed to add these modifications in dark soft, more precisely the second effect described which allows to change the image of the background adding some stripes behind the text, in details mode

I did not understand everything but here's what I did to get this result (all the credits for Zeus of course):
1) In the 40960.txt file I added this text box for the properties in details view mode:

Like you can see the main change has been brought at the end:
Like Idas, i added : background="themeable(dtb(ItemsView, 1, 1), argb(0,0,0,0))" padding="rect(-19rp,0rp,-19rp,0)"
This propertie determines the image you want to use as background for the explorer: of course you must also make this change with W7SB like shown here:



2) Other change, at the end of the 40960.txt file with this addition to change the color of the text (normal and hot state)

Go to Explorer & Shell > Explorer > Items View > ItemsView > Unknown and Explorer & Shell > Explorer > Items View > ItemsView > Subheader > Normal and modify the property "Color:text"

Finally add the adequate images to get "the blue hover with white text": Explorer & Shell > Explorer > Items View > ListView > ListItem (black in my case, for my own theme)

TA DA!



and sorry for my english

Took me a month to get the ListView/IconView working the way he wanted. ListView was the hardest part and took the longest. Glad he also got the select in ListView to span left instead of stopping at the icon. Makes it look better.

[rajtheeban]

Thx u guys for this trick (i believed that Zeus had found it alone  ) !
hope you will make a tutorial because these changes deserve to be in the annals of customisation (a new step in the story of theming) and also because i don't understand some others changes (for example in "icons view", we have TWO differents images for the text selected: one for the text and another for the icon; exacty like mac..)

[renesis]

Ignore this post.  My changes werent being saved correctly so I need to figure that out first.

Reading all this xml is driving me crazy.   I dont know how you guys do it.

Using the below code I got the text color to change when selected but I cant figure out how to get it to change on mouse over.

Code:

<if active="keyboard"><if keyfocused="true">
<UIItemsView background="themeable(gtc(ItemsView, 0, 0, 3802), window)" foreground="themeable(gtc(ItemsView, 0, 0, 3803), windowtext)"/>
</if>
</if>
<unless id="atom(FileName)">
<UIProperty foreground="themeable(gtc(ItemsView, 5, 0, 3803), windowtext)"/>
<if selected="true">
   <UIProperty foreground="themeable(gtc(ItemsView, 4, 1, 3803), highlighttext)"/>
</if>
</unless>

If gone through the themes idas posted and I think this is the code that handles the highlighting but explorer fails to open when I try to use it.

Code:

<if WindowActive="false">
  <UIItem background="themeable(argb(0,0,0,0), highlight)"/>                                      
    <if drophighlight="false">
        <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
    </if>
                                
     <if mousefocused="true">
        <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
     </if>
                                
     <UIImage background="themeable(dtb(ItemsView::ListView, 1, 5), highlight)"/>
</if>
                                
<if WindowActive="true">
     <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
     <if drophighlight="true">
         <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
     </if>
                                        
      <if mousefocused="true">
          <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
      </if>
                                        
       <if keyfocused="true">
            <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
       </if>
</if>
<UIImage background="themeable(dtb(ItemsView::ListView, 1, 5), highlight)"/> 
</if>

Is there something Im missing?

[Panda X]

Thx u guys for this trick (i believed that Zeus had found it alone  ) !
hope you will make a tutorial because these changes deserve to be in the annals of customisation (a new step in the story of theming) and also because i don't understand some others changes (for example in "icons view", we have TWO differents images for the text selected: one for the text and another for the icon; exacty like mac..)

We worked together on it

As for the icons view:
By default the there's on image that that goes behind both the label and icon. This is called the UIItem. What I did was removed all the states from it. So now when you hover/select nothing changes. Then I added the code to both UIImage (Icon underlay) and UIProperty (Label underlay). Then I added the code to have conditions based on whether or not the window was focused or not. ListView was difficult because it used the same code for IconView for the UIImage which made the icon selection image show up. There was some inheritance I had to add to fix that. As for the alternating ListView I didn't do that, so I have no idea how he did that.

Note: I split the topic from the original so there'd be one on the theme and then the DUI.

[rajtheeban]

That sounds good, i'm going to see what i can do, the possibilities, the potentiel, of these changes are enormous

<if active="keyboard"><if keyfocused="true">
<UIItemsView background="themeable(gtc(ItemsView, 0, 0, 3802), window)" foreground="themeable(gtc(ItemsView, 0, 0, 3803), windowtext)"/>
</if>
</if>
<unless id="atom(FileName)">
<UIProperty foreground="themeable(gtc(ItemsView, 5, 0, 3803), windowtext)"/>
<if selected="true">
   <UIProperty foreground="themeable(gtc(ItemsView, 4, 1, 3803), highlighttext)"/>
</if>
</unless>

I'm not sure but to get it on mouse over, just add :

<if MouseFocused="true">
<UIProperty foreground="themeable(gtc(ItemsView, 4, 1, 3803), highlighttext)"/>
</if>

<if WindowActive="false">
  <UIItem background="themeable(argb(0,0,0,0), highlight)"/>                                     
    <if drophighlight="false">
        <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
    </if>
                               
     <if mousefocused="true">
        <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
     </if>
                               
     <UIImage background="themeable(dtb(ItemsView::ListView, 1, 5), highlight)"/>
</if>
                               
<if WindowActive="true">
     <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
     <if drophighlight="true">
         <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
     </if>
                                       
      <if mousefocused="true">
          <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
      </if>
                                       
       <if keyfocused="true">
            <UIItem background="themeable(argb(0,0,0,0), highlight)"/>
       </if>
</if>
<UIImage background="themeable(dtb(ItemsView::ListView, 1, 5), highlight)"/>
</if>

Sorry, however everything seems correct

[renesis]

Yes i figured out after that post I made how to get mouse over working.

This is what I ended up and it worked for the most part but I noticed if I tried to use the default Aero theme with these edits Explorer would fail to load even though it worked with my visual style.  Im not sure why that would happen but having these effects for me isnt worth having a broking Aero theme so I went back to the original explorerframe.dll.  I might try again sometime later when I have more time.  Thanks for all your help.

Code:

<if active="keyboard"><if keyfocused="true">
<UIItemsView background="themeable(gtc(ItemsView, 0, 0, 3802), window)" foreground="themeable(gtc(ItemsView, 0, 0, 3803), windowtext)"/>
</if>
</if>
<unless id="atom(FileName)">
<UIProperty foreground="themeable(gtc(ItemsView, 5, 0, 3803), windowtext)"/>
<if selected="true">
   <UIProperty foreground="themeable(gtc(ItemsView, 4, 1, 3803), highlighttext)"/>
</if>
<if MouseFocused="true">
   <UIProperty foreground="themeable(gtc(ItemsView, 4, 1, 3803), highlighttext)"/>
</if>
</unless>

[Panda X]

By the way guys if you want syntax highlighting on the forum use

[.code=XML][/.code] (Take out the dots)
 
It looks like

Code: XML

[Jamie]

I just have to say you guys are awesome.  Thanks so much for helping the community by sharing your findings.