|
Title: Skinning through the shellstyle - here a short explanation Post by: Purecut on November 08, 2009, 06:43:43 pm It is possible to style the explorer previewpane through the shellstyle.dll. This will make you autonomous from you used fonts and color in your main theme. Also animation is possible.
Here a short description about the main labels: (http://img145.imageshack.us/img145/9327/shellstyleskinning.png) (http://img145.imageshack.us/i/shellstyleskinning.png/) (http://img145.imageshack.us/img145/shellstyleskinning.png/1/w700.png) (http://g.imageshack.us/img145/shellstyleskinning.png/1/) And here a example for the "documentslayoutstyle" <style resid="documentslayoutstyle"> <if id="atom(PreviewContainer)"> <Element padding="rect(10rp, 8rp, 8rp, 8rp)"/> </if> <if id="atom(ReadingPane)"> <Element padding="rect(4rp, 4rp, 4rp, 4rp)"/> </if> <if id="atom(clientviewhost)"> <ViewHost foreground="windowtext" background="themeable(gtc(ItemsView, 0, 0, 3802), window)" sortcolumn="themeable(gtc(ItemsView, 0, 0, 3802), window)" subtext="ARGB(255, 139, 139, 139)" /> </if> <MetadataElement ThemeSubApp="DocumentsPreviewPaneControl"/> <element id="atom(animation)" animation="position|exp|fast"/> <MetadataLabel foreground="themeable(ARGB(255, 255, 236, 0), windowtext)" fontstyle="shadow"/> <MetadataElement foreground="themeable(ARGB(255, 255, 255, 255), windowtext)" fontstyle="shadow"/> <if id="atom(PreviewMetadataControlEditable)"> <MetadataDisplayElement foreground="themeable(ARGB(255, 255, 255, 255), windowtext)" fontstyle="shadow"/> </if> <if id="atom(PreviewMetadataEditControl)"> <InPlaceEdit foreground="themeable(ARGB(255, 255, 255, 255), windowtext)" fontstyle="shadow"/> </if> <if id="atom(PreviewMetadataSubTitleControl)"> <MetadataElement foreground="themeable(ARGB(255, 255, 255, 255), windowtext)" fontstyle="shadow"/> </if> <if id="atom(PreviewMetadataTitleControl)"> <MetadataElement foreground="themeable(ARGB(255, 255, 255, 255), windowtext)" fontstyle="shadow"/> </if> <if id="atom(ItemCountLabel)"> <MetadataLabel foreground="themeable(ARGB(255, 255, 255, 255), windowtext)" fontstyle="shadow"/> </if> <PreviewMetadata padding="Rect(10rp, 5rp, 10rp, 3rp)"/> <MetadataDisplayElement contentalign="bottomleft | endellipsis"/> <if id="atom(PreviewMetadataRow)"> <Element height="18rp"/> </if> <if id="atom(PreviewMetadataControlEditable)"> <MetadataDisplayElement cursor="ibeam"/> <if KeyFocused="true"> <MetadataDisplayElement contentalign="focusrect | bottomleft | endellipsis"/> </if> </if> <if id="atom(PreviewMetadataEditControl)"> <InplaceEdit contentalign="bottomleft | endellipsis"/> </if> <if id="atom(PreviewMetadataReadOnlyControl)"> <InplaceEdit contentalign="bottomleft | endellipsis"/> </if> <if id="atom(PreviewForceLoadMetadata)"> <Button background="themeable(dtb(PreviewPane, 2, 1), ARGB(0, 0, 0, 0))" contentalign="bottomleft" cursor="hand" font="9;Semibold;shadow;Segoe UI" foreground="gtc(FlyoutStyle, 3, 3, 3803)" height="18rp"/> <if MouseFocused="true"> <Button background="themeable(dtb(PreviewPane, 2, 2), ARGB(0, 0, 0, 0))"/> </if> <if KeyFocused="true"> <Button contentalign="focusrect | bottomleft"/> </if> </if> <PreviewThumbnail background="ARGB(0, 0, 0, 0)" padding="Rect(18rp, 4rp, 4rp, 4rp)"/> <if id="atom(PreviewMetadataTitleControl)"> <MetadataElement font="8;Semibold;shadow;Verdana" height="18rp"/> </if> <if id="atom(PreviewMetadataSubTitleControl)"> <MetadataElement font="8;Normal;shadow;Verdana" height="18rp"/> </if> <if id="atom(PreviewMetadataControl)"> <MetadataElement contentalign="bottomleft | endellipsis" font="8;Normal;shadow;Verdana"/> </if> <if id="atom(ItemCountLabel)"> <MetadataLabel contentalign="bottomleft | endellipsis" font="10;Normal;shadow;Verdana" height="24rp"/> </if> <if id="atom(PreviewMetadataSpacer)"> <Element height="24rp"/> </if> <if id="atom(PreviewEditMetadata)"> <Element height="24rp"/> </if> <MetadataLabel contentalign="bottomright | endellipsis" font="8;Normal;shadow;Verdana" height="24rp" padding="Rect(0rp, 0rp, 3rp, 0rp)"/> <Sizer background="ARGB(0, 0, 0, 0)"/> <if SlidesUpAndDown="true"> <Sizer cursor="sizens" height="5rp"/> </if> <if SlidesUpAndDown="false"> <Sizer cursor="sizewe" width="3rp"/> </if> <if id="atom(PreviewPaneSizer)"> <Sizer background="themeable(ARGB(0, 0, 0, 0), buttonface)"/> </if> <if id="atom(PageSpaceControlSizer)"> <Sizer background="themeable(dtb(PreviewPane, 3, 0), buttonface)" borderthickness="rect(0rp,0rp,0rp,0rp)"/> </if> <if id="atom(ReadingPaneSizer)"> <Sizer background="themeable(dtb(PreviewPane, 4, 0), buttonface)" borderthickness="rect(0rp,0rp,0rp,0rp)"/> </if> <if id="atom(ProperTreeExpandoSizer)"> <Sizer background="buttonface" bordercolor="buttonhighlight" borderstyle="solid" borderthickness="rect(0rp,1rp,0rp,1rp)" height="4rp"/> </if> <if id="atom(PreviewPaneSizer)"> <Sizer FramePersistType="2" InitialSize="53" MinSize="53" ReservedSpace="170"/> </if> <if id="atom(CommonItemDialogSizer)"> <Sizer FramePersistType="2" InitialSize="100" MinSize="100"/> </if> <if id="atom(PageSpaceControlSizer)"> <Sizer FramePersistType="2" InitialSize="160" MinSize="60" ReservedMaster="atom(ReadingPane)" ReservedSpace="132"/> </if> <if id="atom(ProperTreeExpandoSizer)"> <Sizer FramePersistType="2" InitialMaxxedOut="true" InitialSize="120" ReservedSpace="26"/> </if> <if id="atom(PreviewPaneSizer)"> <Sizer DisablingPolicy="{17067f8d-981b-42c5-98f8-5bc016d4b073}" ExplorerVisibility="{43abf98b-89b8-472d-b9ce-e69b8229f019}"/> </if> <if id="atom(ReadingPaneSizer)"> <Sizer DisablingPolicy="{33dcce8d-b6f8-4b7a-ac93-45e301f956aa}" ExplorerVisibility="{893c63d1-45c8-4d17-be19-223be71be365}"/> </if> <if id="atom(PageSpaceControlSizer)"> <Sizer ExplorerVisibility="{cb316b22-25f7-42b8-8a09-540d23a43c2f}"/> </if> <if id="atom(ReadingPaneSizer)"> <Sizer FramePersistType="3" GrowTargetFirst="true" InitialSize="260" InitialVisibility="false" MinSize="68" ReservedMaster="atom(PageSpaceControlSizer)" ReservedSpace="202"/> </if> <TemplateBackground background="ARGB(0, 0, 0, 0)"/> <if id="atom(ReadingPane)"> <TemplateBackground background="themeable(Gradient(gtc(ReadingPane, 1, 0, 3810), gtc(ReadingPane, 1, 0, 3811), gtc(ReadingPane, 1, 0, 3812), 4), window)" font="gtf(TextStyle, 4, 0)"/> </if> <if id="atom(RPaneCoverSheet_NoSel)"> <Element background="ARGB(0, 0, 0, 0)" foreground="themeable(gtc(ReadingPane, 2, 0, 3803), windowtext)"/> </if> <if id="atom(PreviewShineLayer)"> <TemplateBackground background="themeable(dtb(DocumentsPreviewPaneControl::Edit, 3, 0), window)"/> </if> <if id="atom(PreviewShineLayer)" Vertical="true"> <TemplateBackground background="themeable(dtb(PreviewPane, 1, 2), window)"/> </if> </style> Title: Re: Skinning through the shellstyle - here a short explanation Post by: sunbeam2000 on November 09, 2009, 10:34:46 am good explanation!!!
just two suggestions: i would prefer to set the textcolor in msstyle and not by ARGB and set the Previewpane background in Background and not in Shinelayer, so you can lay a (transparent) Shinelayer over it.. but that's only my opinion... Title: Re: Skinning through the shellstyle - here a short explanation Post by: Panda X on November 09, 2009, 02:33:18 pm good explanation!!! Following the DirectUI Notes in the Other section you can do set the property in the MSStyles rather than ARGB in DUIXML.just two suggestions: i would prefer to set the textcolor in msstyle and not by ARGB and set the Previewpane background in Background and not in Shinelayer, so you can lay a (transparent) Shinelayer over it.. but that's only my opinion... Title: Re: Skinning through the shellstyle - here a short explanation Post by: Purecut on November 09, 2009, 08:12:52 pm I have never said that you have to do this so. People are complaining what all the stuff means and I have shown them to understand the sections in the shellstyle.dll what all the stuff means, so that they can better understand the format of the shellstyle.dll. Not more or less.
|