Resize border NOT window in WPF

Question

This is my XAML:

<Window x:Class="IPCapture.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:IPCapture"
    mc:Ignorable="d"
    Title="IPCapture_GUI" Opacity="0.95" Background="Transparent" Foreground="White" FontFamily="Arial" FontSize="14" FontWeight="Bold" FontStretch="UltraExpanded" TextOptions.TextFormattingMode="Display" BorderThickness="0"
    Loaded="Window_Loaded" WindowStartupLocation="CenterScreen" Height="Auto" Width="Auto" Cursor="Arrow" WindowStyle="None" AllowsTransparency="True" MouseLeftButtonDown="Window_MouseLeftButtonDown" Topmost="True" ResizeMode="CanResizeWithGrip">
    <Window.OpacityMask>
        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
            <GradientStop Color="Black"/>
            <GradientStop Color="#B2420000" Offset="1"/>
        </LinearGradientBrush>
    </Window.OpacityMask>
    <Border CornerRadius="5" Background="#FFC20C0C" HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" Height="Auto">
        <Grid x:Name="GridMain" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0">
            <Grid.RowDefinitions>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="Keys" Width="Auto"/>
                <ColumnDefinition x:Name="Values" Width="Auto"/>
            </Grid.ColumnDefinitions>
        </Grid>
        <Border.Effect>
            <DropShadowEffect Opacity="0.6" BlurRadius="1"/>
        </Border.Effect>
    </Border>
</Window>

I followed many tutorials on how to achieve the GUI I wanted and I finally succeeded! However, it does not seem to provide the functionality that I need. I want to:

• Resize the width of the GUI

A visualisation of my problem:

The large faded blue area is my Window and the small GUI in the top-left corner of that is my actual widget.
(That is enclosed in the Border )

As you can see from my code, I have set ResizeMode="CanResizeWithGrip" on the Window . I am able to resize the window perfectly fine BUT resizing it does not resize my actual GUI.
(Because of how my XAML is laid out)

So, for this reason, I want to somehow allow resize on the width of the border instead of the Window .

Additions: (if possible)

• Is it possible to remove that small black toolbar that's centered on the top of the Window ?
• I am also confused as to why, because I have set Height and Width of the Window to Auto , is it so large? Shouldn't it only expand as large as it's content?

Answer 1

Let's take it one at a time:

• The resize issue is because of HorizontalAlignment="Left" VerticalAlignment="Top" you've set on the Grid and the Border . It means the element will measure its minimum required width & height and align to the top left. If you remove this, the element will (assuming there are no other layout issues) resize to contain the entire window.

• Setting Auto for Width and Height (which is the default, by the way) behaves differently on a window - it tells the OS - not WPF - to determine the initial size (using an undisclosed algorithm, so don't rely on it). If you want WPF to resize the window to the minimum required by its content, set SizeToContent="WidthAndHeight" .

• The small black toolbar is a new VS 2015 feature and only appears during debugging. You can turn it off in the Live Visual Tree panel in VS.

Bonus tips:

• I strongly discourage you from applying an Effect on the entire visual tree. It's a huge performance hit. You should look into using SystemDropShadowChrome .

• Same goes for OpacityMask . Just use a uniform Opacity unless you really need that gradient... Even then you may be better off using a uniform opacity and a gradient brush as the background.