We Keep Coding

Windows 10 UWP get content dialog to center in screen vertically on mobile

I am using ContentDialogs throughout my app on Windows 10 Mobile. Both ContentDialog and MessageDialog seem to prefer to anchor to the top of the screen by default. However, I have seen some apps where it shows right in the middle of the screen vertically so it appears as a strip. I cannot figure out how to position it in the middle vertically. I have tried this
cd.VerticalAlignment = VerticalAlignment.Center;
Where cd is my ContentDialog intance but this does not work. It is still anchored at the top of the window.
Thanks!

You should override Style for your ContentDialog. I've tried to setup VerticalAlignment.Center to Container, LayoutRoot and BackgroundElement but it doesn't help. So, place the BackgroundElement to center Row in LayoutRoot just added new RowDefinition and setup Grid.Row="1" for your BackgroundElement.
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
Look at the full ContentDialog Style.
NOTES
But be careful, because this works only for mobile. You should apply this style only for mobile platform.
<ContentDialog.Style>
<Style TargetType="ContentDialog">
<Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="MaxHeight" Value="{ThemeResource ContentDialogMaxHeight}" />
<Setter Property="MinHeight" Value="{ThemeResource ContentDialogMinHeight}" />
<Setter Property="MaxWidth" Value="{ThemeResource ContentDialogMaxWidth}" />
<Setter Property="MinWidth" Value="{ThemeResource ContentDialogMinWidth}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundElement"
Grid.Row="1"
Background="{TemplateBinding Background}"
FlowDirection="{TemplateBinding FlowDirection}"
BorderThickness="{ThemeResource ContentDialogBorderWidth}"
BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
MaxWidth="{TemplateBinding MaxWidth}"
MaxHeight="{TemplateBinding MaxHeight}"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}" >
<Grid x:Name="DialogSpace" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled"
ZoomMode="Disabled"
Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title"
Margin="{ThemeResource ContentDialogTitleMargin}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="20"
FontFamily="XamlAutoFontFamily"
FontWeight="Normal"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsTabStop="False"
MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}" >
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter
Content="{TemplateBinding Content}"
MaxLines="2"
TextWrapping="Wrap"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Margin="{ThemeResource ContentDialogContentMargin}"
Foreground="{TemplateBinding Foreground}"
Grid.Row="1"
TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border x:Name="Button1Host"
Margin="{ThemeResource ContentDialogButton1HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
Height="{ThemeResource ContentDialogButtonHeight}"
HorizontalAlignment="Stretch" />
<Border x:Name="Button2Host"
Margin="{ThemeResource ContentDialogButton2HostMargin}"
MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
Height="{ThemeResource ContentDialogButtonHeight}"
Grid.Column="1"
HorizontalAlignment="Stretch" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ContentDialog.Style>

Button don't focus correctly with Path inside

I am developing a Window style without the default border, and currently I am trying to develop the custom Window buttons, placed in the top right corner, like the Close button.
The problem is that inserting a Path as content for a Button the focus is not rendered correctly when the mouse is on the Path inside.
Here a screenshot to explain the problem (I have added a "cursor" with paint because Windows remove it automatically)
This is the Button definition
<Button Grid.Row="0"
Grid.Column="1">
<Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z"
Stretch="Uniform"
Fill="#FFAAAAAA" IsHitTestVisible="False" Focusable="False"
Width="10"
Margin="0" />
</Button>
This is the complete style
<Style x:Key="WindowDefaultStyle" TargetType="{x:Type base:BaseWindow}">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome GlassFrameThickness="-1" />
</Setter.Value>
</Setter>
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" BlurRadius="5" Color="{DynamicResource ApplicationBorderColor}" />
</Setter.Value>
</Setter>
<Setter Property="Background" Value="{DynamicResource ApplicationBackgroundBrush}" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="WindowState" Value="Maximized" />
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type base:BaseWindow}">
<Border Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Margin="4,0,0,4"
VerticalAlignment="Center"
Foreground="#FFAAAAAA"
TextWrapping="NoWrap"
Text="{TemplateBinding Title}"
FontSize="16" />
<Button Grid.Row="0"
Grid.Column="1">
<Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z"
Stretch="Uniform"
Fill="#FFAAAAAA" IsHitTestVisible="False" Focusable="False"
Width="10"
Margin="0" />
</Button>
<ContentPresenter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any workaround for this behaviour?

3x3 Grid containing a Path in the center fills the entire grid

I have the following ControlTemplate that I am using in an ItemsControl. It is essentially a 3x3 Grid with a Path in the center and a Textbox/Textblock on top of it. When I use this, the Path takes up all of the space within the ItemsControl, and ignores the column/row definition constraints. Can anyone tell me why this is happening? I tried wrapping the Path in a Canvas but that didn't seem to help.
Thanks!
<controls:Toolbox x:Key="DrawingShapeTemplates"
DefaultItemSize="60, 60"
SnapsToDevicePixels="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ItemsControl.Items>
<Path Style="{StaticResource Square}"
ToolTip="Square Shape">
<controls:DesignerItem.MoveThumbTemplate>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<TextBlock Text="Length" />
<TextBox MinWidth="{Binding RelativeSource={RelativeSource AncestorType=controls:DesignerItem}, Path=ActualWidth}" />
</StackPanel>
<Canvas Grid.Column="1"
Grid.Row="1">
<Path Style="{StaticResource Square_DragThumb}" />
</Canvas>
</Grid>
</ControlTemplate>
</controls:DesignerItem.MoveThumbTemplate>
</Path>
</ItemsControl.Items>
</controls:Toolbox>
The Style.
<Style x:Key="Square"
TargetType="Path"
BasedOn="{StaticResource StandardShapeStyle}">
<Setter Property="Data">
<Setter.Value>
<RectangleGeometry Rect="50 50 50 50" />
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Square_DragThumb"
TargetType="Path"
BasedOn="{StaticResource Square}">
<Setter Property="IsHitTestVisible"
Value="True" />
<Setter Property="Fill"
Value="Transparent" />
<Setter Property="Stroke"
Value="Transparent" />
</Style>
Edit
The source for this was downloaded from hereenter link description here. If you replace the <Path Style="{StaticResource Decision}" at line 469 with the following, you will get the same result that I do.
<Path Style="{StaticResource Decision}"
ToolTip="Decision">
<s:DesignerItem.MoveThumbTemplate>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<TextBlock Text="Length" />
<TextBox MinWidth="{Binding RelativeSource={RelativeSource AncestorType=s:DesignerItem}, Path=ActualWidth}" />
</StackPanel>
<Path Grid.Column="1"
Grid.Row="1"
Style="{StaticResource Decision_DragThumb}" />
</Grid>
</ControlTemplate>
</s:DesignerItem.MoveThumbTemplate>
</Path>
The following are pictures of what I am trying to accomplish and what the actual result is. I want to display a label and a text box on all four sides of the selected item when it is selected. Ultimately the label/textbox visibility will be databound to the DesignerItem.IsSelected dependency property, but that hasn't been wired up yet.
Expected result:
Actual result:

Typically Canvas do to clip it's children by default so you need to set it explicitly as ClipToBounds="True"
eg
<Canvas Grid.Column="1"
Grid.Row="1"
ClipToBounds="True">
<Path Style="{StaticResource Square_DragThumb}" />
</Canvas>
Update
Replace the Path element in FlowChartSymbols.xaml at line 469 with the following Grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Column="1">
<TextBlock Text="Length" HorizontalAlignment="Center"/>
<TextBox />
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType=s:DesignerItem}}"
Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
<Path Style="{StaticResource Decision}"
Grid.Row="1" Grid.Column="1"
ToolTip="Decision">
<s:DesignerItem.MoveThumbTemplate>
<ControlTemplate>
<Path Style="{StaticResource Decision_DragThumb}" />
</ControlTemplate>
</s:DesignerItem.MoveThumbTemplate>
</Path>
</Grid>
this is how you can achieve the same. also fixed toolbox issue by adding a trigger to detect if it is inside a designer item or simply in a toolbox

C#, WPF, Autorezise Listbox when window resize

C#, Visual Studio 2010, dot net 4, WPF, Microsoft Ribbon
I have a WPF window with the ribbon menues at the top of the window and an area below
where I try to fill with my controls however I can not get the controls to rezise with
my window.
The listbox in the below example should be fully "expanded" witin its boundaries when the window appear and its width should follow the window width when the user resize the window
(the user should not resize the controls itself) by dragging i nthe windows sides.
I tried a lot of playing around with the controls and searched the web but have not been able to
find a solution (some site indicated the usage of border would do the trick).
The Image image1 is a background image spanning over the whole "surface".
The Image image2 is a small logo picture.
<DockPanel DockPanel.Dock="Top">
<Grid DockPanel.Dock="Top" Height="526" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="2" Name="BaseGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Left" Name="image1" VerticalAlignment="Top" Source="........./el_bg.jpg" Stretch="None" />
<Grid Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="image2" Stretch="Fill" VerticalAlignment="Top" Source="........./shiny_rgb.png" />
<ListBox Grid.Column="2" Grid.Row="0" Name="MessageToUser" VerticalAlignment="Top" />
</Grid>
</Grid>
</DockPanel>
Regards

You're setting horizontal alignments to Left that shouldn't be set. Try this:
<DockPanel DockPanel.Dock="Top">
<Grid DockPanel.Dock="Top" Height="526" VerticalAlignment="Top" Margin="2" Name="BaseGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Left" Name="image1" VerticalAlignment="Top" Source="........./el_bg.jpg" Stretch="None" />
<Grid Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="image2" Stretch="Fill" VerticalAlignment="Top" Source="........./shiny_rgb.png" />
<ListBox Grid.Column="2" Grid.Row="0" Name="MessageToUser" VerticalAlignment="Top">
<ListBoxItem>One</ListBoxItem>
<ListBoxItem>Two</ListBoxItem>
</ListBox>
</Grid>
</Grid>
</DockPanel>
In addition, your ListBox is in the third column of its containing Grid. If you want it to stretch across the entire window, you will need to ensure it spans all three columns:
<ListBox Grid.ColumnSpan="3" Grid.Row="0" Name="MessageToUser"
VerticalAlignment="Top">
You should read up on WPF layout - you're setting way more properties here than you need to be. Once you understand it, you'll find this thing much more intuitive. In addition, you can use a tool like Snoop to help figure out what is wrong with your layout.

Applying the following style helped me meet this requirement:
<Style x:Key="listBoxAutoFill" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My requirement is more about resizing the listbox height as the window grows/shrinks but the same can be applied for width.
<ListBox Grid.Row="1" Grid.Column="0" Width="158"
ItemContainerStyle="{StaticResource listBoxAutoFill}"
ItemsSource="{Binding ListBoxItems, Mode=TwoWay}" />

Black background of WPF Window

I created simple window and applied style to it. Now, when I run application background is black:
In XAML it looks normal:
What is causing this?
Here is XAML code:
<Window SizeToContent="WidthAndHeight"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WPFTest.MainWindow">
<Window.Style>
<Style TargetType="Window">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="Window">
<Grid Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<ContentPresenter />
</Grid>
<StatusBar Name="statusBar1" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Row="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Style>
<Grid>
<Grid Height="114" HorizontalAlignment="Center" Margin="1,0,557,622" Name="grid" VerticalAlignment="Bottom" Width="466">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="100*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25*" />
<RowDefinition Height="25*" />
<RowDefinition Height="25*" />
<RowDefinition Height="25*" />
</Grid.RowDefinitions>
<Label Content="Label4" Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" Margin="3,0,3,0" MinHeight="16" MinWidth="97" Name="xResourceLabel4" VerticalAlignment="Bottom" />
<Label Content="Label1" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Margin="3,0,3,0" MinHeight="16" MinWidth="98" Name="xResourceLabel1" VerticalAlignment="Bottom" />
<Label Content="Label2" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Margin="3,0,3,0" MinHeight="16" MinWidth="114" Name="xResourceLabel2" VerticalAlignment="Bottom" />
<Label Content="Label3" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" Margin="3,0,3,0" MinHeight="16" MinWidth="80" Name="xResourceLabel3" VerticalAlignment="Bottom" />
<TextBox Background="#FFFFFF99" Grid.ColumnSpan="2" HorizontalAlignment="Center" Margin="120,0,189,0" MinHeight="23" MinWidth="157" Name="tbREGNR" VerticalAlignment="Bottom" />
<TextBox Background="#FFFFFF99" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" Margin="0,0,189,0" MinHeight="23" MinWidth="157" Name="tbFaFabnr" VerticalAlignment="Bottom" />
<ComboBox Background="#FFFFFF99" DisplayMemberPath="" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" Margin="0,0,189,0" MinHeight="24" MinWidth="157" Name="cb" SelectedValuePath="" VerticalAlignment="Bottom" />
<TextBox Background="#FFFF99CC" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Center" Margin="0,0,175,0" MinHeight="23" MinWidth="171" Name="tbComp" VerticalAlignment="Bottom" />
</Grid>
</Grid>
</Window>

<Grid Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<ContentPresenter />
</Grid>
<StatusBar Name="statusBar1" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Row="1" />
</Grid>
Because you are overriding the default template for the Window you are taking away the style effects (of which one is background = black on the root grid)
see above, i've put it in the template and it should now work (Background="White")
Below is the default template for a window (Taken From Blend)
<ControlTemplate x:Key="WindowTemplateKey" TargetType="{x:Type Window}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
<ResizeGrip x:Name="WindowResizeGrip" HorizontalAlignment="Right" IsTabStop="false" Visibility="Collapsed" VerticalAlignment="Bottom"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResizeWithGrip"/>
<Condition Property="WindowState" Value="Normal"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="WindowResizeGrip" Value="Visible"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="WindowStyle1" TargetType="{x:Type Window}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="ResizeMode" Value="CanResizeWithGrip">
<Setter Property="Template" Value="{StaticResource WindowTemplateKey}"/>
</Trigger>
</Style.Triggers>
</Style>

Based on TBohnen.jnr's answer, the actual correct answer would be do it as the default window template and add Background="{TemplateBinding Background}" to the top-level child element of the ControlTemplate. In the default template it is a Border, whereas in your case it's the Grid:
<Grid Background="{TemplateBinding Background}" Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">