Custom title bar button size

Posted 6 years ago by rex hui

Version: 19.1.0682

Based on the sample from MetroStyleWindow, I know we can add a custom button to the title bar.
However, I could not figure out how to set the size of the button so that it will work for different Themes (metro, classic, etc).

<themes:WindowChrome x:Key="DialogWindowChrome" HasMaximizeButton="False" HasMinimizeButton="False" HasRestoreButton="True" >
  <themes:WindowChrome.TitleBarContentTemplate>
    <DataTemplate>
       <Button Style="{DynamicResource {x:Static themes:SharedResourceKeys.WindowTitleBarButtonBaseStyleKey}}"
          themes:ThemeProperties.IsActive="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=IsActive}"
          ToolTip="Help" ToolTipService.InitialShowDelay="500">
          <Button.ContentTemplate>
             <DataTemplate>
                <Viewbox Width="12" Height="12">
                   <Canvas Width="24" Height="24">
                      <Path Fill="{Binding RelativeSource={RelativeSource Self}, Path=(TextElement.Foreground)}"
                            Data="M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z"/>
                   </Canvas>
                </Viewbox>
             </DataTemplate>
          </Button.ContentTemplate>
       </Button>
    </DataTemplate>
  </themes:WindowChrome.TitleBarContentTemplate>
</themes:WindowChrome>

Comments (5)

Answer - Posted 6 years ago by rex hui

Never mind. I figured out how to do that in code behind.

Posted 6 years ago by Actipro Software Support - Cleveland, OH, USA

Hello,

We had defined our DataTemplates for the Button.ContentTemplate as resources. Classic buttons would use DataTemplates whose Canvas was 12x10 size, while Metro buttons would use DataTemplates whose Canvas was 42x26 size, and Aero buttons would use DataTemplates whose Canvas was 27x13 size.

We defined these DataTemplates using the same keys (i.e. themes:SharedResourceKeys.WindowTitleBarButtonCloseGlyphTemplateKey) in separate XAML files: WindowTitleBarButtonGlyphs.Classic.xaml, etc.

As long as you use a DynamicResource reference to the key in your Button.ContentTemplate property, it should resolve based on the appropriate one if you set up your app's Themes folder to have Generic.xaml (Aero), Aero2.NormalColor.xaml (Metro), AeroLite.NormalColor.xaml (Metro), and Classic.xaml (Classic) files that include the appropriate WindowTitleBarButtonGlyphs XAML file.

You may also need this attribute in your app's AssemblyInfo to tell WPF to pull those resources based on system theme:

[assembly: ThemeInfo(ResourceDictionaryLocation.SourceAssembly, ResourceDictionaryLocation.SourceAssembly)]

This MSDN topic talks about that attribute and Themes files a bit:

https://docs.microsoft.com/en-us/dotnet/api/system.windows.themeinfoattribute?view=netframework-4.8

The above is the "proper" way to do it but if your code-behind approach works, then that's fine too.

Actipro Software Support

Posted 6 years ago by rex hui

Thank you very much for providing the proper way to do this.

I am able to get it to work for the Metro themes and the classic theme but not the Aero, High Contrast and Office themes.

All Metro themes are affected by "Aero2.NormalColor.xaml"
Classic theme is by "Classic.xaml"

"Generic.xaml" has no effect on Aero theme.

What file names to use for Aero, High Contrast and Office themes?

Thank you!

Posted 6 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Rex,

In our products, the XAML theme files we set up that are auto-recognized by WPF's ThemeInfoAttribute based on current Windows system theme are:

Aero.NormalColor.xaml
Aero2.NormalColor.xaml
AeroLite.NormalColor.xaml
Classic.xaml
Generic.xaml
Luna.Homestead.xaml
Luna.Metallic.xaml
Luna.NormalColor.xaml
Royale.NormalColor.xaml

The link in our previous reply for ThemeInfoAttribute references most of them other than the newer Aero2 and AeroLite ones, both of which should go to Metro-like themes.

I don't believe there is one for high contrast. You have to detect high contrast mode on your own and switch to an appropriate theme programmatically when found. There is no Windows system theme for Office-style, so there are no options for auto-selecting those.

Actipro Software Support

Posted 6 years ago by rex hui

Thank you very much. I guess there is no completely clean way of doing this without code behind.

The latest build of this product (v24.1.5) was released 2 months ago, which was after the last post in this thread.

Comments (5)

Add Comment