We Keep Coding

UWP: Listview when loaded for first time shows a grey background for less than a second and then disappears before the actual content

Whenever the listview is loaded for the first time, it displays a flash of grey background for less than half a second and then disappears before the actual content is loaded. My code is as follows (pretty straight forward) Any thoughts?
<ListView Name="FilterCategories" SelectionMode="None"
FlowDirection="LeftToRight" >
<ListView.ItemContainerTransitions>
<TransitionCollection/>
</ListView.ItemContainerTransitions>
<ListView.ItemTemplate>
<DataTemplate x:DataType="filter:FilterCategory">
<Grid Name="FilterHeaders">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<TextBlock Name="Header" FontSize="13" FontWeight="Bold"
Margin="20,10,0,0" Text="{x:Bind NameAlias}"
Opacity="{x:Bind Opacity}"
Grid.Column="0"/>
</Grid>
<RelativePanel Grid.Column="1" Margin="0,5,15,0">
<TextBlock Name="DownArrow" Text="" FontFamily="Segoe MDL2 Assets" FontSize="8"
Visibility="{x:Bind IsCollapsed}" Grid.Column="1" TextAlignment="Left"
FontWeight="Bold"
Tapped="DownArrow_Tapped" RelativePanel.AlignRightWithPanel="True" Margin="0,10,10,0">
</TextBlock>
<TextBlock Name="UpArrow" Text="" FontFamily="Segoe MDL2 Assets" FontSize="8"
Visibility="{x:Bind IsExpand}" RelativePanel.AlignRightWithPanel="True"
TextAlignment="Left" FontWeight="Bold"
Tapped="UpArrow_Tapped" Margin="0,10,10,0">
</TextBlock>
</RelativePanel>
<Grid Grid.Row="1" Grid.ColumnSpan="2"
Visibility="{Binding ElementName=UpArrow,Path=Visibility}"
Margin="10,10,0,0">
<ListView SelectionMode="None" ItemsSource="{x:Bind FilterCategoryItems}"
ScrollViewer.VerticalScrollMode="Enabled">
<ListView.ItemContainerTransitions>
<TransitionCollection/>
</ListView.ItemContainerTransitions>
<ListView.ItemTemplate>
<DataTemplate x:DataType="filter:FilterCategoryItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox x:Name="FilterCheckBoxTask" Style="{StaticResource CheckBoxStylePlainView}"
IsThreeState="False" Opacity="0.2"
MinWidth="10" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Text="{x:Bind NameAlias}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
<Border BorderThickness="0,0,0,1" Height="10"
HorizontalAlignment="Stretch"
BorderBrush="#f0f0f0" Grid.Row="2" Grid.ColumnSpan="2"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The item source is being set dynamically in the code behind

WPF Buttons disappear on 55" screen

I developed a wpf-app with C# in Visual Studio 2017.
When deploying the software on the target devices (55" NEC Touchscreens, Resolution 1920x1080) the buttons I designed will disappear when the app launches, while the rest of the MainWindow stays in place. I set in <Window> tag Height="1080" Width="1920". When testing the software on my 1920x1080 screen on my desktop (22") the buttons were in place.
<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide" Background="#253135" Margin="375,531,1362,375">
<TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="xyz" FontSize="12" Margin="0,59,0,58"/>
</Button>
I have four Buttons, all with just different positions.
This is the whole XAML:
<Window x:Class="Startup.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Prometheus" Height="1080" Width="1920"
WindowState="Maximized"
WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
>
<Window.Background>
<ImageBrush ImageSource="Resource/background_img.png"></ImageBrush>
</Window.Background>
<Grid Margin="12">
<Grid Margin="10,4,-10,361" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="Start" HorizontalAlignment="Right" Margin="0,10,0,0" VerticalAlignment="Top" Width="101" RenderTransformOrigin="-0.013,0.15" Name="GetEventsBtn" Click="GetEvents" Height="34" IsDefault="True" TabIndex="2" Visibility="Hidden" />
<TextBlock HorizontalAlignment="Left" Margin="76,68,0,0" TextWrapping="Wrap" Text="Hi" VerticalAlignment="Top" FontFamily="" Height="60" Width="613" Foreground="#FFE0D2D2" FontSize="48"/>
<TextBlock HorizontalAlignment="Left" Margin="76,133,0,0" TextWrapping="Wrap" Text="Please choose one option below to get started quickly." VerticalAlignment="Top" FontFamily="" Height="46" Width="499" Foreground="#FFE0D2D2" FontSize="20"/>
</Grid>
<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide" Background="#253135" Margin="375,531,1362,375">
<TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12" Margin="0,59,0,58"/>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="PlanAMeeting_Click" Name="PlanAMeeting" Margin="170,531,1576,375">
<TextBlock Grid.Row="1" Text="Plan a meeting" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"></TextBlock>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="CreateAMeeting_Click" Name="CreateAMeeting" Margin="375,319,1362,587">
<TextBlock Grid.Row="1" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"> Create a new <LineBreak></LineBreak> meeting for now</TextBlock>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="StartAMeeting_Click" Name="StartAMeeting" Margin="170,319,1576,587">
<TextBlock Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12">Start a scheduled<LineBreak></LineBreak> meeting</TextBlock>
</Button>
<Grid MaxHeight="200" MaxWidth="600" Margin="1147,-306,39,306" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions >
<RowDefinition Height="60" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Name="GR1Z1" Foreground="White" FontSize="16" FontWeight="Bold" Grid.Row="1" Text="Please wait while loading..."></TextBlock>
<TextBlock Name="GR1Z2" Foreground="White" Grid.Row="2"></TextBlock>
<TextBlock Name="GR1Z3" Foreground="White" Grid.Row="3"></TextBlock>
<TextBlock Name="GR1Z4" Foreground="White" Grid.Row="4"></TextBlock>
<TextBlock Name="GR1Z5" Foreground="White" Grid.Row="5"></TextBlock>
</Grid>
<Grid MaxHeight="200" MaxWidth="600" Margin="1147,96,39,306">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Name="GR2Z1" Grid.Row="1" Foreground="White" FontSize="16" FontWeight="Bold"></TextBlock>
<TextBlock Name="GR2Z2" Grid.Row="2" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z3" Grid.Row="3" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z4" Grid.Row="4" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z5" Grid.Row="5" Foreground="White"></TextBlock>
</Grid>
</Grid>
and the style
<Style TargetType="Button" x:Key="FlatButtonStyle">
<Setter Property="Background" Value="#253135"/>
<Setter Property="Foreground" Value="#253135"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="150"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0"
Background="{TemplateBinding Background}"
CornerRadius="12"
Name="Border">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter TargetName="Border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

This is just to give you the idea:
I removed all Margin properties, in order to not use an absolute position, but relative positions if you want to achieve a dynamic layout.
I put your left part of the layout into a grid with three rows where the first two are for your headers text, and the last one for the buttons.
In the last row I put another grid with two rows and two columns where each cell contains a buttons
This part of markup corresponds to the next grid after your: <Grid Margin="12">:
<Grid HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="48"
Foreground="#FFE0D2D2"
Text="Hi"
TextWrapping="Wrap" />
<TextBlock
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="20"
Foreground="#FFE0D2D2"
Text="Please choose one option below to get started quickly."
TextWrapping="Wrap" />
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Name="QuickGuide"
Grid.Row="0"
Grid.Column="0"
Background="#253135"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
Text="Quick Guide"
TextAlignment="Center" />
</Button>
<Button
Name="PlanAMeeting"
Grid.Row="1"
Grid.Column="1"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
Text="Plan a meeting"
TextAlignment="Center" />
</Button>
<Button
Name="StartAMeeting"
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
TextAlignment="Center"
TextWrapping="Wrap">
Start a scheduled
<LineBreak />
meeting
</TextBlock>
</Button>
<Button
Name="CreateAMeeting"
Grid.Row="0"
Grid.Column="1"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
TextAlignment="Center">
Create a new
<LineBreak />
meeting for now
</TextBlock>
</Button>
</Grid>
</Grid>

C# WPF Dynamic created Labels in a Grid dont show on the Top of the Grid

Hi (sry for bad english) i have the problem that i create dynamic rows with label content in a grid but they dont begin at the top of the Grid.
private void SelectAccounts(string AccountUsername) //Findet Nutzer und Account ID und gibt alle Accounts des Nutzers aus //// neu machen jede reihe einzeln zurückgeben!!!!!!!
{
MId=database.GetID(this.MasterUsername,"MasterUser","MId"); //for database request
AccId = database.GetID(AccountUsername, "Accounts","AccId"); //for database request
AccountsList.Children.Clear(); //My Grid where i safe it
int rows = database.GetRows("Accounts", "AccID"); //How many Rows i have in my table
for (int i = 1; i <= rows; i++)
{
stringusername=database.GetUsernameById("Accounts","Username", i, MId); //getting the username back as string
if(username!="") // not evry username has the right condition so somtimes the function returns me only ""
{
Label l = new Label();
RowDefinition newRow = new RowDefinition();
newRow.Height = new GridLength(40);
AccountsList.RowDefinitions.Add(newRow);
l.Content = username;
AccountsList.Children.Add(l);
l.SetValue(Grid.RowProperty, i);
}
}
}
the problem is when i now start the programm it looks like this:
enter image description here
if i use the loop like this:
for (int i = 1; i <= rows; i++)
{
Label l = new Label();
RowDefinition newRow = new RowDefinition();
newRow.Height = new GridLength(40);
AccountsList.RowDefinitions.Add(newRow);
string username= database.GetUsernameById("Accounts", "Username", i, MId);
if(username!="")
{
l.Content = username;
AccountsList.Children.Add(l);
l.SetValue(Grid.RowProperty, i);
}
}
and it looks like this: enter image description here
I can normally add a label in the .xaml and it show normal on the top of the grid.
MyUserControll where i want to show the rows:
<UserControl x:Class="AccountManager.Login"
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"
d:DesignHeight="500" d:DesignWidth="750">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="400"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13*"/>
<ColumnDefinition Width="37*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Label Content="Your Accounts" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="21.333" FontFamily="Tekton Pro" FontWeight="Bold"></Label>
<Border BorderBrush="LightBlue" BorderThickness="1.5" HorizontalAlignment="Right"/>
<Border BorderBrush="LightBlue" BorderThickness="1.5" VerticalAlignment="Bottom"/>
<Border BorderBrush="Blue" BorderThickness="1.5" VerticalAlignment="Bottom" Opacity="0.2"/>
<Border BorderBrush="Blue" BorderThickness="1.5" HorizontalAlignment="Right" Opacity="0.2"/>
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="146*"/>
<ColumnDefinition Width="348*"/>
<ColumnDefinition Width="91*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Border BorderBrush="LightBlue" BorderThickness="1.5" HorizontalAlignment="Right"/>
<Border BorderBrush="Blue" BorderThickness="1.5" Opacity="0.2" HorizontalAlignment="Right"/>
</Grid>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110*"/>
<ColumnDefinition Width="191*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Content="Benutzername:" VerticalAlignment="Center" HorizontalAlignment="Right" Height="26" Width="90"/>
<TextBox x:Name="addBenutzername" Grid.Row="0" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1" />
<PasswordBox x:Name="addPw" Grid.Row="1" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1" ></PasswordBox>
<Label Grid.Row="1" Grid.Column="0" Content="Password:" VerticalAlignment="Center" HorizontalAlignment="Right" Height="26" Width="62"/>
<Label x:Name="repeatPasswordLabel" Grid.Row="2" Grid.Column="0" Content="Repeat Password:" HorizontalAlignment="Right" VerticalAlignment="Center" Height="26" Width="102" />
<PasswordBox x:Name="addReapeatPw" Grid.Row="2" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1" />
<Label Content="Email:" Grid.Row="3" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Right" Height="26" Width="41"/>
<TextBox x:Name="addEmail" Grid.Row="3" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Right" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="1"/>
<Button Grid.Row=" 5" Grid.Column="1" Content="ADD" Height="36" HorizontalAlignment="Center" VerticalAlignment="Center" Width="80" Click="AddAccount"></Button>
</Grid>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<RadioButton x:Name="r1" Grid.Row="0" Width="70" Height="30">
<Image Source="Bilder/Facebook.png"></Image>
</RadioButton>
<RadioButton x:Name="r2" Grid.Row="1" Width="70" Height="30">
<Image Source="Bilder/Skype.png"></Image>
</RadioButton>
<RadioButton x:Name="r3" Grid.Row="2" Width="70" Height="30">
<Image Source="Bilder/Youtube.png"></Image>
</RadioButton>
<RadioButton x:Name="r4" Grid.Row="3" Width="70" Height="30">
<Image Source="Bilder/Twitter.png"></Image>
</RadioButton>
<RadioButton x:Name="r5" Grid.Row="4" Width="70" Height="30">
<Image Source="Bilder/Microsoft.png"></Image>
</RadioButton>
<RadioButton x:Name="r6" Grid.Row="5" Width="70" Height="30">
<Image Source="Bilder/reddit.png"></Image>
</RadioButton>
<RadioButton x:Name="r7" Grid.Row="6" Width="70" Height="30">
<Image Source="Bilder/Origin.png"></Image>
</RadioButton>
<RadioButton x:Name="r8" Grid.Row="8" Width="70" Height="30">
<Image Source="Bilder/Steam.png"></Image>
</RadioButton>
</Grid>
</Grid>
<Grid VerticalAlignment="Top" x:Name="AccountsList" Grid.Row="1" Grid.Column="0">
<Border BorderBrush="LightBlue" BorderThickness="1.5" HorizontalAlignment="Right"/>
<Border BorderBrush="Blue" BorderThickness="1.5" HorizontalAlignment="Right" Opacity="0.2"/>
</Grid>
<Grid Grid.Row="0" Grid.Column="1">
<Border BorderBrush="LightBlue" BorderThickness="1.5" VerticalAlignment="Bottom"/>
<Border BorderBrush="Blue" BorderThickness="1.5" VerticalAlignment="Bottom" Opacity="0.2"/>
<Button x:Name="delete" Content="Delete" HorizontalAlignment="Left" Width="80" Height="36" Margin="85,19,0,19"/>
<Button x:Name="change" Content="Change" HorizontalAlignment="Center" VerticalAlignment="Center" Width="80" Height="36"></Button>
</Grid>
</Grid>
My Main Windows is:
<Window x:Class="AccountManager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="750" MaxWidth="750" MinWidth="750" MinHeight="500" MaxHeight="500">
<Grid x:Name="Main">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="371"></ColumnDefinition>
<ColumnDefinition Width="371"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="190"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Accountmanager" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White" FontSize="24" FontFamily="Snap ITC"/>
<Grid Grid.Row="0" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="1" x:Name="bilder">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Source="Bilder/Facebook.png" Height="70" HorizontalAlignment="Center" VerticalAlignment="Center" Width="70"/>
<Image Grid.Row="0" Grid.Column="1" Source="Bilder/Skype.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Image Grid.Row="0" Grid.Column="2" Source="Bilder/Youtube.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Image Grid.Row="0" Grid.Column="3" Source="Bilder/Twitter.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Image Grid.Row="1" Grid.Column="0" Source="Bilder/Microsoft.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Image Grid.Row="1" Grid.Column="1" Source="Bilder/reddit.png" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
<Image Grid.Row="1" Grid.Column="2" Source="Bilder/Origin.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<Image Grid.Row="1" Grid.Column="3" Source="Bilder/Steam.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="Benutzername:" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<TextBox x:Name="benutzername" Grid.Row="0" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1"></TextBox>
<PasswordBox x:Name="pw" Grid.Row="0" Grid.Column="1" Width="185" Height="30" HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Bottom"/>
<Label Grid.Row="0" Grid.Column="0" Content="Password:" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Button Grid.Column="0" Grid.Row="1" Content="Add" Width="80" Height="40" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="47,0,23,0" Click="ClickAddAccount"/>
<Button Grid.Column="1" Grid.Row="1" Content="Login" Width="80" Height="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,23,0" Click="Login" />
<Button Grid.Column="1" Grid.Row="1" Content="Forgot Password" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="40" Width="95" Click="ForgotPw" />
</Grid>
</Grid>
</Grid>

In your place, I would use an ItemsControl and create an object to bind the ItemsSource to. Create an ItemsControl like this:
<ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=Header}">//Instead of header, use your own sourceobject
<ItemsControl.ItemTemplate>
<DataTemplate>
//Insert your Itemtemplate here, you can bind to any object in the ItemsSource!
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
This prevents you from the hassle to create each and every control manually and you can leave the creation of the controls to the wpf!

GridView Data overlays with Header after vertical scrolling in Microsoft Store App

I have a GridView that looks as follows:
<Page
x:Name="pageRoot"
x:Class="View.ServiceModule"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:View"
xmlns:common="using:View.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding ServiceTasksFiltered}"
IsSourceGrouped="true"
ItemsPath="ServiceTasksFiltered">
</CollectionViewSource>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GridView
Visibility="Collapsed"
x:Name="serviceTasksFilteredGridView"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
ItemsSource="{Binding ServiceTasksFiltered, Mode=TwoWay}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="true"
ScrollViewer.VerticalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
VerticalAlignment="Top">
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="500"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Debitornr." TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="1" Text="Name" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Text="Belegnr." TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="3" Text="Reaktionsdatum" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="4" Text="Priorität" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
</Grid>
</GridView.Header>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="500"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding CustomerNo}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="1" Text="{Binding CustomerName}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="2" Text="{Binding DocumentNo}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="3" Text="{Binding ResponseDateDisplay}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="4" Text="{Binding PriorityDisplay}" TextWrapping="Wrap" FontSize="20"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0"
Click="BackButton"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="Serviceaufgaben" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
When I try to scroll down to display the bottom rows, the top rows are being moved higher instead of disappearing. Please see the following picture for a better descirption:
GridView with wrong scrolling settings
As you can see the GridView is scrolled down and the rows are behind the header of the page. I need them to disappear.
Any help would be greatly appreciated.

LongListSelector focus on item

I have this LongListSelector in my app page:
<Controls:LongListSelector x:Name="searchList" Margin="0,0,0,0" Background="White" SelectionChanged="DidPressSelectSearchList" HorizontalContentAlignment="Stretch" Grid.Row="1">
<Controls:LongListSelector.ItemTemplate>
<DataTemplate>
<local:SearchTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch">
<local:SearchTemplateSelector.GoogleSuggestTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3"/>
<TextBlock Text="{Binding}" FontSize="25" Foreground="Black" TextWrapping="Wrap" Grid.Row="1" Margin="0,10"/>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.GoogleSuggestTemplate>
<local:SearchTemplateSelector.VideoTemplate>
<DataTemplate>
<Grid>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Margin="0" Source="{Binding Path=ImgUrl}" HorizontalAlignment="Left" Width="100" Height="100" Tag="{Binding idStr}"/>
<Grid Grid.Column="1" Margin="10,0,8,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" FontSize="20" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<StackPanel Orientation="Horizontal" Margin="0,-5,0,0" Grid.Row="1">
<TextBlock Text="Views: " FontSize="20" Foreground="Black"/>
<TextBlock Text="{Binding ViewCount}" FontSize="20" Foreground="Black"/>
</StackPanel>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TimeStr}" FontSize="20" Foreground="Black" Margin="0,0,0,0" />
<TextBlock Text="Cached" FontSize="20" Foreground="Red" Margin="20,0,0,0" Grid.Column="1" />
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.VideoTemplate>
</local:SearchTemplateSelector>
</DataTemplate>
</Controls:LongListSelector.ItemTemplate>
</Controls:LongListSelector>
And i noticed that when i press a item in the list so the user not have any thing to know which item he pressed, something like focus the item when he press it.
In iPhone the the selected row get blue and when release the blue selection is disappear,there is some equivalent to this in windows phone too?

Use TiltEffect from Silverlight Toolkit for Windows Phone, details are here http://www.geekchamp.com/articles/silverlight-for-wp7-toolkit-tilteffect-in-depth. Also to make an effect more expressive use Button as a container for your ItemTemplate with EmptyButtonStyle http://www.jeff.wilcox.name/2011/10/hyperlinkbutton-empty-style-for-phone/.