Strange border showing up in WPF

Question

I have an application that I am writing and its for the most part still in mockup so there is not much c# behind it.

I'm noticing a strange 1px border or separator between two sections of my window that according to the XAML should not be there, nor is it there at design time, but at run sure enough I can't get rid of it. (annotated by red arrow)

Main windows XAML:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DS4Windows" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon" xmlns:Forms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" xmlns:tb="http://www.hardcodet.net/taskbar" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" mc:Ignorable="d" x:Class="DS4Windows.MainWindow"
        Title="DS4Windows DSDCS Build" Height="519" Width="965" WindowStyle="None" ResizeMode="NoResize" MinWidth="800" MinHeight="519">
    <Window.Background>
        <ImageBrush ImageSource="Backgrounds/BlueBG2.jpg" Stretch="UniformToFill"/>
    </Window.Background>
    <Window.Effect>
        <DropShadowEffect/>
    </Window.Effect>


    <DockPanel Margin="0">

        <DockPanel.Background>
            <ImageBrush/>
        </DockPanel.Background>
        <DockPanel x:Name="TopPanel" Height="92" LastChildFill="False" VerticalAlignment="Top" DockPanel.Dock="Top" MouseDown="WindowDrag">
            <DockPanel.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#7F000000" Offset="0"/>
                    <GradientStop Offset="1" Color="#00000000"/>
                </LinearGradientBrush>
            </DockPanel.Background>
            <Image x:Name="ProgramIcon" Height="100" VerticalAlignment="Top" Width="100" Source="Icons/Icon.png" StretchDirection="DownOnly"/>
            <Menu x:Name="MainMenu" VerticalAlignment="Top" DockPanel.Dock="Bottom" Opacity="0.9" FontSize="14">
                <MenuItem x:Name="FileMenu" Header="File">
                    <MenuItem Header="Quit"/>
                </MenuItem>
                <MenuItem x:Name="ToolsMenu" Header="Tools"/>
                <MenuItem x:Name="HelpMenu" Header="Help"/>
                <MenuItem x:Name="AccountMenu" Header="My Account" SubmenuClosed="AccountMenu_SubmenuClosed">
                    <MenuItem x:Name="UsernameMenuItem" Template="{DynamicResource NoHoverMenu}">
                        <MenuItem.Header>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="Username" Width="76" Padding="0"/>
                                <TextBox x:Name="UsernameInput" Width="134"/>
                            </StackPanel>
                        </MenuItem.Header>
                    </MenuItem>
                    <MenuItem x:Name="PasswordMenuItem" Template="{DynamicResource NoHoverMenu}">
                        <MenuItem.Header>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="Password" Width="76" Padding="0"/>
                                <PasswordBox x:Name="PasswordInput" Width="134"/>
                            </StackPanel>
                        </MenuItem.Header>
                    </MenuItem>
                    <MenuItem x:Name="LoginMenuStatus" Header=""  Template="{DynamicResource NoHoverMenu}" Foreground="#FF515151" FontSize="11" Visibility="Collapsed"/>
                    <MenuItem x:Name="LoginButtonMenuItem" Template="{DynamicResource NoHoverMenu}">
                        <MenuItem.Header>
                            <Button x:Name="LoginButton" Content="Login" Click="LoginButton_Click"/>
                        </MenuItem.Header>
                    </MenuItem>
                    <Separator x:Name="LoginMenuSeperator"/>
                    <MenuItem x:Name="RegisterAccountMenuItem" Header="Register account"/>
                    <MenuItem x:Name="ForgotLoginMenuItem" Header="Forgot login"/>
                    <MenuItem x:Name="LogoutMenuItem" Header="Logout" Visibility="Collapsed" Click="LogoutMenuItem_Click"/>
                </MenuItem>
            </Menu>
            <Label x:Name="WindowTitle" Content="DS4Windows DSDCS Build (1.5 ALPHA)" Height="30" Margin="5,5,100,0" VerticalAlignment="Top" DockPanel.Dock="Top" FontSize="14" Foreground="White" HorizontalAlignment="Center"/>
            <StackPanel x:Name="ExitMenu" Width="100" DockPanel.Dock="Right" Margin="0,-35,0,0" RenderTransformOrigin="0.525,0.211" HorizontalAlignment="Right" MouseLeave="StackPanel_MouseLeave" Panel.ZIndex="2">
                <Button x:Name="CloseButton" Content="X" Height="22" VerticalAlignment="Top" Margin="0,5,5,0" Background="#FFFF7878" FontWeight="Bold" Click="CloseButton_Click" RenderTransformOrigin="0.45,0.421" HorizontalAlignment="Right" Width="22" MouseEnter="CloseButton_MouseEnter"/>
                <Button x:Name="MinimizeCloseOpt" Content="Minimize to tray" Visibility="Hidden" Click="MinimizeCloseOpt_Click"/>
                <Button x:Name="QuitCloseOpt" Content="Quit" Visibility="Hidden" Click="QuitCloseOpt_Click"/>
            </StackPanel>
            <Label x:Name="UsernameLabel" Content="Guest" Height="28" VerticalAlignment="Bottom" DockPanel.Dock="Right" Margin="0,0,-100,0" HorizontalAlignment="Right" Foreground="White"/>
        </DockPanel>
        <DockPanel x:Name="Footer" Height="28" LastChildFill="False" VerticalAlignment="Top" DockPanel.Dock="Bottom">
            <Image VerticalAlignment="Bottom" DockPanel.Dock="Right" Source="Icons/ResizeGrip.png" Stretch="None" HorizontalAlignment="Right" PreviewMouseLeftButtonDown="WindowResize" Cursor="SizeNWSE">
                <Image.OpacityMask>
                    <ImageBrush ImageSource="Icons/ResizeGrip.png" Stretch="None"/>
                </Image.OpacityMask>
            </Image>
        </DockPanel>
        <DockPanel x:Name="AddPanel" Height="94" LastChildFill="False" VerticalAlignment="Top" DockPanel.Dock="Bottom" HorizontalAlignment="Center">
            <Frame Content="Frame" Height="90" VerticalAlignment="Top" Width="728" Source="http://dsdcs.com/index.php?template=frontend" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>
        </DockPanel>
        <DockPanel x:Name="SidebarDockPanel" Background="#CCFFFFFF" Margin="0">
            <StackPanel Height="305" VerticalAlignment="Top" Margin="0">
                <telerik:RadOutlookBarItem Header="Home" Icon="Icons/Home.ico" IsSelected="True" FontSize="14">
                    <Grid Background="Transparent"/>
                </telerik:RadOutlookBarItem>
                <telerik:RadOutlookBarItem Header="Macros" Icon="Icons/Macros.ico" Height="38" FontSize="14">
                    <Grid Background="Transparent"/>
                </telerik:RadOutlookBarItem>
                <telerik:RadOutlookBarItem Header="Log" Icon="Icons/Log.ico" Height="38" FontSize="14">
                    <Grid Background="Transparent"/>
                </telerik:RadOutlookBarItem>
                <telerik:RadOutlookBarItem Header="Settings" Icon="Icons/Settings.ico" Height="38" FontSize="14">
                    <Grid Background="Transparent"/>
                </telerik:RadOutlookBarItem>
            </StackPanel>

        </DockPanel>
        <DockPanel x:Name="MainWinDockPanel" Background="#CCFFFFFF">
            <Expander x:Name="CurrentGameWindow" Header="Currently Playing: Nothing" VerticalAlignment="Bottom" DockPanel.Dock="Bottom" Background="#B2000000" Foreground="White" FontWeight="Bold" FontSize="14" Panel.ZIndex="1" BorderBrush="{x:Null}" BorderThickness="0">
                <DockPanel Height="128" VerticalAlignment="Top" DockPanel.Dock="Bottom" UseLayoutRounding="False">
                    <Image x:Name="CurrentGameBoxart" Height="128" VerticalAlignment="Top" RenderOptions.BitmapScalingMode="HighQuality">
                        <Image.OpacityMask>
                            <ImageBrush ImageSource="TempImages/5647-1.jpg"/>
                        </Image.OpacityMask>
                    </Image>
                    <Grid x:Name="CurrentGameBGFrame" Margin="0">
                        <Image x:Name="CurrentGameRating" HorizontalAlignment="Left" Height="16" Margin="12,55,0,0" VerticalAlignment="Top" Width="80"/>
                        <Label x:Name="CurrentGamePublisher" Content="" HorizontalAlignment="Left" Margin="12,3,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
                        <Label x:Name="CurrentGameDeveloper" Content="" HorizontalAlignment="Left" Margin="12,24,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
                        <Label x:Name="CurrentGameGenres" Content="" HorizontalAlignment="Left" Margin="329,3,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
                        <Label x:Name="CurrentGamePlayers" Content="" HorizontalAlignment="Left" Margin="329,24,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
                    </Grid>
                </DockPanel>
            </Expander>
            <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
                <Frame x:Name="MainNav" Content="Frame" Source="/DS4Windows;component/Pages/Home.xaml" BorderThickness="0" Margin="0"/>
            </ScrollViewer>
        </DockPanel>
    </DockPanel>
</Window>

Child page XAML:

<Page x:Class="DS4Windows.Pages.Home"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d"
    Title="Home" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top">
    <StackPanel x:Name="ControllerStack" Margin="0">
        <StackPanel Height="69" Orientation="Horizontal">
            <Image x:Name="Icon1" Width="61" Source="/DS4Windows;component/ControllerStates/wireless-icon-48.png"/>
            <StackPanel Margin="30,0,0,0">
                <ProgressBar x:Name="BatteryMeter1" Height="20" Margin="0,18,0,0" Width="150">
                    <ProgressBar.Foreground>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFFF4C4C" Offset="0"/>
                            <GradientStop Color="#FF830000" Offset="1"/>
                        </LinearGradientBrush>
                    </ProgressBar.Foreground>
                </ProgressBar>
                <Label x:Name="ChargeStatus1" Content="" HorizontalAlignment="Center"/>
            </StackPanel>
        </StackPanel>
        <StackPanel Height="69" Orientation="Horizontal">
            <Image x:Name="Icon2" Width="61" Source="/DS4Windows;component/ControllerStates/DS4_C_Gray-icon-48.png"/>
            <StackPanel Margin="30,0,0,0">
                <ProgressBar x:Name="BatteryMeter2" Height="20" Margin="0,18,0,0" Width="150">
                    <ProgressBar.Foreground>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF37E03F" Offset="0"/>
                            <GradientStop Color="#FF1F9524" Offset="1"/>
                        </LinearGradientBrush>
                    </ProgressBar.Foreground>
                </ProgressBar>
                <Label x:Name="ChargeStatus2" Content="" HorizontalAlignment="Center"/>
            </StackPanel>
        </StackPanel>
        <StackPanel Height="69" Orientation="Horizontal">
            <Image x:Name="Icon3" Width="61" Source="/DS4Windows;component/ControllerStates/DS4_C_Gray-icon-48.png"/>
            <StackPanel Margin="30,0,0,0">
                <ProgressBar x:Name="BatteryMeter3" Height="20" Margin="0,18,0,0" Width="150">
                    <ProgressBar.Foreground>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF37E03F" Offset="0"/>
                            <GradientStop Color="#FF1F9524" Offset="1"/>
                        </LinearGradientBrush>
                    </ProgressBar.Foreground>
                </ProgressBar>
                <Label x:Name="ChargeStatus3" Content="" HorizontalAlignment="Center"/>
            </StackPanel>
        </StackPanel>
        <StackPanel Height="69" Orientation="Horizontal">
            <Image x:Name="Icon4" Width="61" Source="/DS4Windows;component/ControllerStates/DS4_C_Gray-icon-48.png"/>
            <StackPanel Margin="30,0,0,0">
                <ProgressBar x:Name="BatteryMeter4" Height="20" Margin="0,18,0,0" Width="150">
                    <ProgressBar.Foreground>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF37E03F" Offset="0"/>
                            <GradientStop Color="#FF1F9524" Offset="1"/>
                        </LinearGradientBrush>
                    </ProgressBar.Foreground>
                </ProgressBar>
                <Label x:Name="ChargeStatus4" Content="" HorizontalAlignment="Center"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
</Page>

Answer 1

The answers in this question may be helpfull

How to fix empty space between a border and a background in button with rounded corners?

WPF renders the elements with anti-aliasing by default and this can result in small gaps between shapes.

Set the EdgeMode to Aliased on your Border this should get rid of the small gap

RenderOptions.EdgeMode="Aliased"

Answer 2

So, not an 100% answer to the question of why, but a fix; I added both the sidebar and main window dock panels to a new parent dockpanel control ans set the opaque background on that wrather the child controls. This got rid of the border which I suspect was actually a gap.

The why, at least I think; With all child and parent controls on the sidebar set to auto the width was being determined by calculating the width of the button string + image + padding. Since WPF is hardware rendered the width could have calculated it with aliasing considered and the response may have been a floating point number rather than an integer like if I manually set the width myself. so with a floating point width the aliasing of the two adjacent controls likely caused a fraction of a pixel width of background to show through, result in a 1px line or border as I thought it was. And since design time renders the control in SW mode this was never seen until the application was actually run.

Not sure if its taboo to answer my own ? but I figured I would for others sake who may come here with same issue.

Answer 3

If you want to understand why things in WPF looking odd or how they render you should take a look at Snoop.

Hint: If you want to jump to the current Control move the mouse over it and press Shift + Ctrl