How to create custom window chrome in wpf?

Viewed 76400

How can I create a basic custom window chrome for a WPF window, that doesn't include the close button and still a moveable and resizeable window?

5 Answers

Here is an easy solution which looks very similar to the default Windows 10 buttons, it simply uses the same Font for the symbols:

<StackPanel Orientation="Horizontal" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True">
<Button Click="Minimize_Click" Content="&#xE949;" FontFamily="Segoe MDL2 Assets" FontSize="10" Padding="15,15,15,5" Background="Transparent" BorderBrush="Transparent" />
<Button Click="Maximize_Click" FontFamily="Segoe MDL2 Assets" FontSize="10" Padding="15,10" Background="Transparent" BorderBrush="Transparent">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Button.Content" Value="&#xE739;" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=WindowState}" Value="Maximized">
                    <Setter Property="Button.Content" Value="&#xE923;" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>
<Button Click="Close_Click" Content="&#xE106;" FontFamily="Segoe MDL2 Assets" FontSize="10" Padding="15,10" Background="Transparent" BorderBrush="Transparent" />
</StackPanel>

If you want Support for older Windows Versions (7 and 8) have a look here: https://stackoverflow.com/a/27911618/9758687

Here's an overview of the approach you'll need to take:

  • Set WindowStyle="None" to do your own UI.
  • Use WindowChrome.CaptionHeight to get standard title bar drag/double click/shake behavior and set WindowChrome.IsHitTestVisibleInChrome="True" on your buttons to make them clickable.
  • Implement click handlers for your buttons.
  • Hook into the Window.StateChanged event to handle maximize/restore changes and update your UI. You can't assume everyone is using your title bar buttons to maximize and restore. This can happen via keyboard shortcuts (Win+Up/Win+Down) or double-clicking the title bar.
  • 7px of your window gets cut off from all sides when you maximize. To fix we need to hook into WM_GETMINMAXINFO to supply the correct maximized position.
  • You'll need to re-implement a window border to provide contrast over different backgrounds.
  • Use <Path> to render the title bar icons so they look good at different DPIs.
  • Change the look of the title bar depending on whether the window is active, to give the user an indication of which window has focus.

The full writeup is a little long; I go over them in detail with code examples in this blog post.

Related