What I want is to be able to color (style) the resizable border of the application chrome in WPF when the ResizeMode=CanResize - it appears this is not possible. So I was thinking of setting the ResizeMode=NoResize and then handling the resizing myself.
How would I go about implementing a custom resize implementation of my application chrome?
Is this possible, infact I know it's possible because VS.Net has the resize ability but does not have a standard 'grey' border around it?
I wrangled with a similar issue and eventually adapted the pretty good method used by Haider M. al-Khateeb here.
He does not provide the XAML out of the box, so here is mine. In MainWindow.xaml, at the top of the z-order, place:
<Grid x:Name="Scalers">
<Rectangle x:Name="Top" Height="6" VerticalAlignment="Top" PreviewMouseDown="Resize" MouseMove="DisplayResizeCursor" Margin="8,0" Fill="Transparent" MouseLeave="ResetCursor" />
<Rectangle x:Name="Bottom" Height="6" VerticalAlignment="Bottom" PreviewMouseDown="Resize" MouseMove="DisplayResizeCursor" Margin="8,0" Fill="Transparent" MouseLeave="ResetCursor" />
<Rectangle x:Name="Left" Width="6" HorizontalAlignment="Left" PreviewMouseDown="Resize" MouseMove="DisplayResizeCursor" Margin="0,8" Fill="Transparent" MouseLeave="ResetCursor" />
<Rectangle x:Name="Right" Width="6" HorizontalAlignment="Right" PreviewMouseDown="Resize" MouseMove="DisplayResizeCursor" Margin="0,8" Fill="Transparent" MouseLeave="ResetCursor" />
<Rectangle x:Name="BottomLeft" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" PreviewMouseDown="Resize" MouseMove="DisplayResizeCursor" Fill="Transparent" MouseLeave="ResetCursor" />
<Rectangle x:Name="BottomRight" Width="8" Height="8" HorizontalAlignment="Right" VerticalAlignment="Bottom" PreviewMouseDown="Resize" MouseMove="DisplayResizeCursor" Fill="Transparent" MouseLeave="ResetCursor" />
<Rectangle x:Name="TopLeft" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" PreviewMouseDown="Resize" MouseMove="DisplayResizeCursor" Fill="Transparent" MouseLeave="ResetCursor" />
<Rectangle x:Name="TopRight" Width="8" Height="8" HorizontalAlignment="Right" VerticalAlignment="Top" PreviewMouseDown="Resize" MouseMove="DisplayResizeCursor" Fill="Transparent" MouseLeave="ResetCursor" />
</Grid>
There are a few problems that arise from this method. You have to decide for yourself how much space is appropriate to devote to resizing areas and how this will affect content situated on the border of the window. Also, I've noticed that this tends to be a little choppy, but it does the job.
Finally, there's the obvious problem that when ResizeMode = NoResize or CanMinimize that users are unable to maximize the window by dragging it to the top or restore it to normal size by dragging down when it's maximized, so you may wish to write some code to take care of that case as well. Also don't forget toggling maximization/restoration when the user double-clicks the drag bar if you're heading that way.
On another direction, there are a number of libraries out there that provide custom Metro style window chrome. You might like to investigate them and consider whether they're what you're looking for.
Here are a few:
It is also possible to modify the window chrome (for example, Office 2010) by playing with stuff below the WPF level. It's a non-trivial task, but is do-able. See "Drawing in the Extended Frame Window" in the following page:
https://msdn.microsoft.com/en-us/library/bb688195(VS.85).aspx
You might like to peruse the following links to get a bit of a primer on the topic of changing the window chrome.
https://blogs.msdn.microsoft.com/wpfsdk/2008/09/08/custom-window-chrome-in-wpf/
https://blogs.msdn.microsoft.com/adam_nathan/2006/05/04/aero-glass-inside-a-wpf-window/
The following question may also be useful related reading:
Changing the colour of Aero glass for my window?
Best of luck.
