Search code examples
c#wpfxamlwindows-shellwindow-chrome

Border Margin in Window template doesn't have any effect when used with WindowChrome


I was checking out the WindowChrome class in System.Windows.Shell library (v 3.5.41019.1). When I try to create a Window template, the margin of the Border element in the template seems to have no effect:

<Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:shell="clr-namespace:Microsoft.Windows.Shell;assembly=Microsoft.Windows.Shell"
        Title="MainWindow" Height="350" Width="525" Style="{DynamicResource WindowStyle1}">
    <Window.Resources>
        <Style x:Key="WindowStyle1" TargetType="{x:Type Window}">
<!-- Here is the WindowChrome.-->
            <Setter Property="shell:WindowChrome.WindowChrome">
                <Setter.Value>
                    <shell:WindowChrome />
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Window}">
<!-- And here is the Border. Its margin has no effect as far as I can tell.-->
                        <Border Margin="25" Background="Red">
                            <AdornerDecorator>
                                <ContentPresenter/>
                            </AdornerDecorator>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>

    </Grid>
</Window>

What do you think is the reason for that? I am wondering that, because I saw that some people use something like*:

<Border x:Name="WindowBorder" Margin="{Binding Source={x:Static shell:SystemParameters2.Current}, Path=WindowNonClientFrameThickness}" Background="Red">

But as it doesn't have any effect in my tests, what could be the point of doing this?

(*) One of the places it is used is the ModernUI project on CodePlex.

Edit: I have tested this on Windows 7 with Aero on.

Edit 2: It's still the same with Aero off.


Solution

  • According to MSDN, WindowChrome is

    Represents an object that describes the customizations to the non-client area of a window.

    After reading MSDN sample and playing your code a while, I noticed your code should be like following from MSDN sample code:

    <Style x:Key="StandardStyle" TargetType="{x:Type local:MainWindow}">
    <Setter Property="shell:WindowChrome.WindowChrome">
        <Setter.Value>
            <shell:WindowChrome />
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MainWindow}">
                <!--Note there is a Grid as the root-->
                <Grid>
                    <Border Background="White"
                            Margin="{Binding Source={x:Static shell:SystemParameters2.Current}, Path=WindowNonClientFrameThickness}">
                        <ContentPresenter Content="{TemplateBinding Content}" />
                    </Border>
                    <TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" 
                               VerticalAlignment="Top" HorizontalAlignment="Left" 
                               Margin="36,8,0,0"/>
                    <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Icon}"
                           VerticalAlignment="Top" HorizontalAlignment="Left"
                           Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(shell:WindowChrome.WindowChrome).ResizeBorderThickness}" 
                           Width="{Binding Source={x:Static shell:SystemParameters2.Current}, Path=SmallIconSize.Width}"
                           shell:WindowChrome.IsHitTestVisibleInChrome="True"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    

    Note, there's a Grid as the root element which contains a few elements for customizing the NC of the window.

    UPDATE:

    You may notice in the remark of the MSDN page, it contains sections:

    WindowStyle.None

    WindowChrome

    These are the two ways of customizing the appearance of a WPF application window.

    However, setting the Window.WindowStyle property to WindowStyle.None:

    This removes the non-client frame from the window and leaves only the client area, to which you can apply a custom style. However, when the non-client frame is removed, you also lose the system features and behaviors that it provides, such as caption buttons and window resizing. Another side effect is that the window will cover the Windows taskbar when it is maximized.

    Then WindowChrome is introduced to enable NC customization using WPF:

    To customize a window while retaining its standard functionality, you can use the WindowChrome class. The WindowChrome class separates the functionality of the window frame from the visuals, and lets you control the boundary between the client and non-client areas of your application window. The WindowChrome class lets you put WPF content in the window frame by extending the client area to cover the non-client area. At the same time, it retains system behaviors through two invisible areas; the resize border and caption areas.

    So back to your question, the template you found, should be copied from the MSDN sample code, but missed the true root Grid. The Margin on the Border is for giving some space to the NC. In the MSDN sample code, the ContenPreseter only contains the Client area, while the NC contains the Border, a TextBlock for window title, and an Image for window icon.

    To recap, setting WindowChrome enables you to customize the NC area of the window in the Window.Template.

    NOTE: The sample MSDN sample code seems a little out of date in .Net 4.5, the System.Windows.Shell.WindowChrome is now in the PresentationFramework.dll, so the code may look like:

    <Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Style="{DynamicResource WindowStyle1}" Icon="Icon1.ico">
    <Window.Resources>
        <Style x:Key="WindowStyle1" TargetType="{x:Type Window}">
            <Setter Property="WindowChrome.WindowChrome">
                <Setter.Value>
                    <WindowChrome />
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Window}">
                        <Grid>
                            <Border Background="Red"
                            Margin="{Binding Source={x:Static SystemParameters.WindowNonClientFrameThickness}}">
                                <ContentPresenter Content="{TemplateBinding Content}" />
                            </Border>
                            <TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" 
                               VerticalAlignment="Top" HorizontalAlignment="Left" 
                               Margin="36,8,0,0"/>
                            <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Icon}"
                           VerticalAlignment="Top" HorizontalAlignment="Left"
                           Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=WindowChrome.WindowChrome.ResizeBorderThickness}" 
                           Width="{Binding Source={x:Static SystemParameters.SmallIconWidth}}"
                           WindowChrome.IsHitTestVisibleInChrome="True"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button />
    </Grid>