We Keep Coding

Usercontrol isn't displaying its content

While I was trying to experiment with User Controls, I've stumbled upon this weird issue, which for some reason when I add the User Control to a Window, It just displays the border that I made, while not showing any content inside of it (whether I placed it within a border or a grid)
This is how it looks in the designer:
And this is how it looks in a Window (in designer and on runtime):
As seen, It's not displaying the button nor the label.
User Control:
<Grid Background="{x:Null}">
<Border BorderBrush="#FAF9F9" CornerRadius="20" Background="#FAF9F9">
<Border.Effect>
<DropShadowEffect Opacity="0.3" ShadowDepth="2" Direction="270"/>
</Border.Effect>
<Grid Background="{x:Null}">
<Label Content="Label" HorizontalAlignment="Left" VerticalContentAlignment="Center" Margin="10,280,0,0" VerticalAlignment="Top" Height="47" Width="428" FontSize="25"/>
<Button Content="+" HorizontalAlignment="Left" Margin="443,280,0,0" VerticalAlignment="Top" Width="47" Height="47" HorizontalContentAlignment="Center" Foreground="White" FontSize="40" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" BorderBrush="{x:Null}">
<Button.Effect>
<DropShadowEffect Opacity="0.3" ShadowDepth="2" Direction="270"/>
</Button.Effect>
<Button.Template >
<ControlTemplate TargetType="Button" >
<Grid >
<Path Stretch="Uniform" UseLayoutRounding="False" Fill="#FFEA1E27">
<Path.Data>
<EllipseGeometry RadiusX="1" RadiusY="1"/>
</Path.Data>
</Path>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Border>
</Grid>

Looks like actual size of your control is smaller then design size. Thus, the label and the button are outside of Control's visible part.
Try positioning of Label and Button relative to bottom right and left corners instead of top-left.
<Label Content="Label" HorizontalAlignment="Left" Margin="10" VerticalContentAlignment="Center" VerticalAlignment="Bottom" Height="47" Width="428" FontSize="25"/>
<Button Content="+" HorizontalAlignment="Right" Margin="10" VerticalAlignment="Bottom" Width="47" Height="47" HorizontalContentAlignment="Center" Foreground="White" FontSize="40" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" BorderBrush="{x:Null}">

What panels and containers allow Overlapping of UI elements

What are the panels and containers that allow overlapping with varying z-index ? (escluding Canvas)
--Since I was asked for details this is part of the code:
<DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
VerticalAlignment="Top">
<Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
RadiusX="4"
Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
MouseLeftButtonUp="TargetColorClick"
ToolTip="{Binding (extensions:PaletteColor.Name)}" />

Ok I was able to do this with Clemens support:
<TextBlock TextWrapping="Wrap" Text="16"
Margin="-32,0,0,0" Height="16"
HorizontalAlignment="Center" />
--Answering to another question my XAML for whole control looks like this:
<ItemsControl ItemsSource="{Binding (local:MainWindow.CurrentPaletteSet)}" Width="400" Margin="665,67,14,-67">
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
VerticalAlignment="Top">
<Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
RadiusX="4"
Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
MouseLeftButtonUp="TargetColorClick"
ToolTip="{Binding (extensions:PaletteColor.Name)}" />
<TextBlock TextWrapping="Wrap" Text="16"
Margin="-32,0,0,0" Height="16"
HorizontalAlignment="Center" />
<TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullRgbString)}"
Margin="5,0,0,0" Height="16"
HorizontalAlignment="Left" DockPanel.Dock="Top" />
<TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullHslString)}"
Margin="5,0,0,0"
Height="16" HorizontalAlignment="Left" DockPanel.Dock="Top" MinWidth="121" />
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel></ItemsControl>

I am trying to scale the background image of a TextBox but it is cropped

I have a TextBox in which I want to add an image as background. The first try is this:
<TextBox Text="{Binding Titulo}" Height="Auto" HorizontalAlignment="Stretch" Margin="5,5,5,5" Name="txtTitulo" VerticalAlignment="Stretch"
TextAlignment="Center"
FontSize="30"
Padding="0,20,0,0"
FontWeight="Heavy"
BorderBrush="red"
BorderThickness="5">
<TextBox.Background>
<ImageBrush ImageSource="../Imagenes/Logo (233x251) - fondo transparente (test).png" AlignmentX="Center" Stretch="None" AlignmentY="Center">
</ImageBrush>
</TextBox.Background>
</TextBox>
The result in this case is this:
If I use this code, that uses transform:
<TextBox Text="{Binding Titulo}" Height="Auto" HorizontalAlignment="Stretch" Margin="5,5,5,5" Name="txtTitulo" VerticalAlignment="Stretch"
TextAlignment="Center"
FontSize="30"
Padding="0,20,0,0"
FontWeight="Heavy"
BorderBrush="red"
BorderThickness="5">
<TextBox.Background>
<ImageBrush ImageSource="../Imagenes/Logo (233x251) - fondo transparente (test).png" AlignmentX="Center" Stretch="None" AlignmentY="Center">
<ImageBrush.Transform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5" CenterX="0" CenterY="0" />
</ImageBrush.Transform>
</ImageBrush>
</TextBox.Background>
</TextBox>
The result is this:
The image that I want to scale is this:
It seems that when it scales, reduce the size, but it crops the image to the size of the TextBox.
What I want to do it is scale the image to see the complete image, but I am not be able to get it.

You need to use Uniform as value for the Stretch property. Like this:
Stretch="Uniform"
So, your code would look like this:
<TextBox Text="{Binding Titulo}" Height="Auto" HorizontalAlignment="Stretch" Margin="5,5,5,5" Name="txtTitulo" VerticalAlignment="Stretch"
TextAlignment="Center"
FontSize="30"
Padding="0,20,0,0"
FontWeight="Heavy"
BorderBrush="red"
BorderThickness="5">
<TextBox.Background>
<ImageBrush ImageSource="../Imagenes/Logo (233x251) - fondo transparente (test).png" AlignmentX="Center" Stretch="Uniform" AlignmentY="Center"/>
</TextBox.Background>
</TextBox>
The Uniform value makes the image fill all the available space while keeping its original scale.

How to set a Camera Resolution Aspect Ratio 16;9 in Windows 10 Universal APP

I was wondering how to set a camera resolution in 16;9 aspect ratio in windows universal app, I have tried different codes but none of them are working also I am losing a bit of frame rate when I used some of the codes below i don't know how to set a camera resolution to 16;9 that is a problem is there any function inside VideoeEcodingProporties that will help me to accomplish this.
XAML UWP CODE;
<Page
x:Class="whatchado_recorder.Video.Capture"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:whatchado_recorder"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
SizeChanged="Page_SizeChanged">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel x:Name="CaptureStack" Visibility="Collapsed" Margin="0,12,0,0" HorizontalAlignment="Stretch" MaxWidth="720">
<ProgressBar x:Name="RecordProgress" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="6" Minimum="0" Maximum="90"/>
<TextBlock x:Name="CameraErrorTextBlock" x:Uid="NoCameraFound" Margin="0,120,0,24" HorizontalAlignment="Center" Text="No camera found :(" VerticalAlignment="Center" FontSize="24" Visibility="Collapsed"/>
<Grid x:Name="CaptureGrid" Margin="0,12,0,0">
<CaptureElement x:Name="CaptureElement" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="360" Tapped="captureElement_Tapped"/>
<Border Background="Black" Padding="6" Opacity="0.5" HorizontalAlignment="Center" VerticalAlignment="Top">
<TextBlock Foreground="White" FontSize="12">
<Run x:Uid="MaxTime" Text="Max. Time: "/>
<Run Text="{Binding Path=Args.SelectedQuestionOnRecordStart.MaxVideoLength, Converter={StaticResource DoubleToStringConverter}}"/>
</TextBlock>
</Border>
<local:MouseOver x:Name="BackgroundCircle" HorizontalAlignment="Center" VerticalAlignment="Center">
<local:MouseOver.NormalState>
<Ellipse Fill="Black" Opacity="0.25" HorizontalAlignment="Center" VerticalAlignment="Center" Width="192" Height="192" Tapped="captureElement_Tapped"/>
</local:MouseOver.NormalState>
<local:MouseOver.MouseOverState>
<Ellipse Fill="Black" Opacity="0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="192" Height="192" Tapped="captureElement_Tapped"/>
</local:MouseOver.MouseOverState>
</local:MouseOver>
<Ellipse x:Name="RecordCircle" Fill="Red" HorizontalAlignment="Center" VerticalAlignment="Center" Width="36" Height="36" Tapped="captureElement_Tapped"/>
<local:MouseOver x:Name="BackgroundStopCircle" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,24">
<local:MouseOver.NormalState>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="64" Height="64">
<Ellipse Fill="Black" Opacity="0.25" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Tapped="captureElement_Tapped"/>
<Rectangle Fill="Red" HorizontalAlignment="Center" VerticalAlignment="Center" Width="16" Height="16" Tapped="captureElement_Tapped"/>
</Grid>
</local:MouseOver.NormalState>
<local:MouseOver.MouseOverState>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="64" Height="64">
<Ellipse Fill="Black" Opacity="0.5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Tapped="captureElement_Tapped"/>
<Rectangle Fill="Red" HorizontalAlignment="Center" VerticalAlignment="Center" Width="16" Height="16" Tapped="captureElement_Tapped"/>
</Grid>
</local:MouseOver.MouseOverState>
</local:MouseOver>
<TextBlock x:Name="CountdownText" Visibility="Collapsed" Foreground="White" FontSize="72" Margin="0, -48, 0, 0" Text="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock x:Name="ExplanationText" x:Uid="LookIntoCamera" Visibility="Collapsed" Foreground="White" FontSize="12" Margin="0, 48, 0, 0" Text="Look into the camera" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Button x:Name="CancelButton" x:Uid="Cancel" Content="Cancel" Style="{StaticResource NormalButtonStyle}" Margin="0,12,0,0" Padding="24,0,24,0" HorizontalAlignment="Right" Click="cancelButton_Click"/>
</StackPanel>
</Grid>
</Page>
UWP CS.CODE;
var maxPreviewResolution = mc.VideoDeviceController.GetAvailableMediaStreamProperties(MediaStreamType.VideoPreview).Aggregate((i1, i2) => (i1 as VideoEncodingProperties).Height > (i2 as VideoEncodingProperties).Height ? i1 : i2);
await mc.VideoDeviceController.SetMediaStreamPropertiesAsync(MediaStreamType.VideoPreview, maxPreviewResolution);
`

You could take a look at the camera resolution sample
See:
IEnumerable<StreamResolution> allPreviewProperties = _previewer.MediaCapture.VideoDeviceController.GetAvailableMediaStreamProperties(MediaStreamType.VideoPreview).Select(x => new StreamResolution(x));
Once you have the mediaStream properties you can look for where
width/16 == height/9
to find all resolutions that match your ratio

Strange border showing up in WPF

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>

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

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.

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"