We Keep Coding

wpf grid background with image brush and visual brush combined

I am trying to set an image as a background of my window. I want to apply a gradient opacity mask over the window, and have the image tiled. So far, I can get either or, but not both. Here's my lame attempt at this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height = "40*" />
<RowDefinition Height="133*"/>
</Grid.RowDefinitions>
<Grid.Resources>
<Image x:Key="myImage" Source="/GrimshawRibbon;component/Resources/GeometricBackground.png">
<Image.OpacityMask>
<LinearGradientBrush EndPoint = "0.5,0" StartPoint="0.5,1">
<GradientStop Color = "#00000000" Offset="0.6"/>
<GradientStop Color = "#FF000000" Offset="1"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<ImageBrush x:Key="imageBrush" ImageSource="/GrimshawRibbon;component/Resources/GeometricBackground.png" TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0,800,800"/>
<VisualBrush x:Key="myBrush" Visual="{StaticResource myImage}" Stretch="None" TileMode="Tile"/>
</Grid.Resources>
<DockPanel LastChildFill = "False" Grid.RowSpan="2" Background="{StaticResource imageBrush}"/>
<ContentControl x:Name="MainContentControl" Content="{Binding CurrentPageViewModel}" Margin="10" Grid.Row="1"/>
<Button x:Name="btnCancel" Content="Close" Margin="0,0,90,10" HorizontalAlignment="Right" Width="75" Height="36" VerticalAlignment="Bottom" Command="{Binding CloseWindowCommand, Mode=OneWay}" CommandParameter="{Binding ElementName=win}" Grid.Row="1"/>
<Button x:Name="button" Content="?" Margin="0,0,170,10" Height="36" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="36" Command="{Binding NavigateToHelpCommand, Mode=OneWay}" Grid.Row="1"/>
<Label x:Name="label" Content="Some label" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" FontWeight="Bold" FontSize="14"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="10,39,0,0" TextWrapping="Wrap" Text="Some tool description that is not too long. It would be good to keep it under two sentences." VerticalAlignment="Top" Height="36" Width="272"/>
</Grid>

You may assign the DockPanel's OpacityMask:
<DockPanel Grid.RowSpan="2" Background="{StaticResource imageBrush}">
<DockPanel.OpacityMask>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#00000000" Offset="0.6"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</DockPanel.OpacityMask>
</DockPanel>
Or probably just use a Rectangle for the background image:
<Rectangle Grid.RowSpan="2" Fill="{StaticResource imageBrush}">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#00000000" Offset="0.6"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>

c# WPF application UI really slow on other computers

I don't know how vague this may sound, so if you require more information, please let me know!
I've finished my program, and I've attempted to try running it on other machines, I have not used any installers to deploy this, I just have been using the debug/release programName.exe after compiling it.
My question is that is there reason why my program is running incredibly slow when it's not running on the system it was compiled on? the entire UI lags, as in it takes several sections just to switch to another tab, while running on its native computer, it runs perfectly smooth.
I've tried the publish wizard, so I don't think that'll help. I was wondering if it has to do with any the my xaml, the DLLs, or the program's dependencies? At the moment, I don't have any sort of pictures or resources that it's relying on.
Any advice on any changes that I can make to get this running more smoothly would be greatly appreciated.
Here's my mainWindow Xaml:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:custom="clr-namespace:RemotePatch"
x:Class="RemotePatch.MainWindow"
mc:Ignorable="d"
Title="Remote Patch" Height="350" Width="525" AllowsTransparency="True" WindowStyle="None" ResizeMode="CanResizeWithGrip" Loaded="Window_Loaded_1" Closed="Window_Closed">
<Window.Effect>
<DropShadowEffect BlurRadius="0" ShadowDepth="0" Direction="0" Opacity="0"/>
</Window.Effect>
<Grid RenderTransformOrigin="0.497,0.518">
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition/>
<RowDefinition Height="317*"/>
</Grid.RowDefinitions>
<Grid.Background>
<RadialGradientBrush Center="0.5,0.6">
<GradientStop Color="#FF1A8BA2"/>
<GradientStop Color="#FF293855" Offset="1"/>
<GradientStop Color="#FF1799AE" Offset="0.043"/>
</RadialGradientBrush>
</Grid.Background>
<Rectangle Fill="#FFF4F4F5" Height="29" Stroke="Black" VerticalAlignment="Top" Opacity="0" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"/>
<TabControl x:Name="tabControl" Margin="0,5,0,16" Grid.Row="2" >
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="4,4,4,4" Margin="2,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.Foreground>
<ImageBrush/>
</TabControl.Foreground>
<TabControl.BorderBrush>
<ImageBrush/>
</TabControl.BorderBrush>
<TabControl.Background>
<ImageBrush/>
</TabControl.Background>
<TabItem Header="General" Margin="0,7,0,-7">
<TabItem.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF040101" Offset="1"/>
</LinearGradientBrush>
</TabItem.Background>
<Grid>
<ListBox x:Name="listBox1" Margin="4,154,358,0" Foreground="White" Background="#FF14142E"/>
<TextBox x:Name="txtFile" Height="18" Margin="79,80,264,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="#FF14142E" Foreground="White" MinWidth="56"/>
<TextBox x:Name="txtPSexec" Height="18" Margin="79,47,264,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="#FF14142E" Foreground="White" MinWidth="56" />
<TextBox x:Name="txtGroups" HorizontalAlignment="Left" Height="18" Margin="79,119,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="65" Background="#FF14142E" Foreground="White"/>
<Button x:Name="buttonLoad" Content="Load File" Margin="4,78,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="56" Click="Load_Clicked">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="buttonSplit" Content="Split" Margin="4,117,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="56" Click="Split_Clicked">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="buttonValidate" Content="✔" Foreground="White" Height="15" VerticalAlignment="Top" HorizontalAlignment="Right" Width="15" Click="Validate_Clicked" FontSize="10.667" RenderTransformOrigin="0.062,0" Margin="0,154,358,0" FontWeight="Bold" >
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.413"/>
<GradientStop Color="#FF6C6C6C" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="buttonPsExec" Content="PsExec" Margin="4,46,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="58" Click="Psexec_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="buttonLoginMain" Content="Login" Margin="452,6,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="58" Click="Login_Clicked">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</Grid>
</TabItem>
<TabItem Header="Log" Margin="-3,7,3,-7">
<Grid>
<Grid.Background>
<ImageBrush/>
</Grid.Background>
<RichTextBox x:Name="richTextBox1" Margin="0,6,0,5" Background="Black" Foreground="White" TextChanged="richTextBox1_TextChanged" IsReadOnly="True">
<FlowDocument>
<Paragraph>
<Run Text="Remote Patch v2.0"/>
</Paragraph>
</FlowDocument>
</RichTextBox>
</Grid>
</TabItem>
<TabItem Header="Patch" Margin="-3,7,3,-7">
<Grid Margin="0,5,0.333,-5.333">
<Grid.Background>
<ImageBrush/>
</Grid.Background>
<Button x:Name="buttonLogin" Content="Login" Margin="0,10,1,0" Foreground="White" FontWeight="Bold" Grid.Row="2" Height="20" VerticalAlignment="Top" HorizontalAlignment="Right" Width="47" Click="Login_Clicked">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<GroupBox x:Name="groupBox" Header="Predefined Patches
" Margin="27,56,87,0" VerticalAlignment="Top" Height="55" Foreground="White">
<Button x:Name="buttonPredefined" Content="Run" Margin="9,-7,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="51" Click="buttonPredefined_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</GroupBox>
<ComboBox x:Name="comboBox" Margin="132,81,102,0" VerticalAlignment="Top" Background="#FF0F0F59" SelectionChanged="comboBox_SelectionChanged" Foreground="Black" />
<GroupBox x:Name="groupBox_Copy" Header="Batch File
" Margin="27,143,82,0" VerticalAlignment="Top" Height="55" Foreground="White">
<Button x:Name="buttonBatch" Content="Run" Margin="0,40,0,-43" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="51" Click="Batch_Clicked" Visibility="Hidden">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</GroupBox>
<TextBox x:Name="txtBatchFile" Height="23" Margin="127,168,102,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="#FF14142E" Foreground="White"/>
<Button x:Name="ButtonRunBatch" Content="Run" Margin="42,168,0,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="51" Click="loopBatch_Clicked">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="buttonAddFile" Content="+" Margin="0,168,47,0" Foreground="White" FontWeight="Bold" Height="20" VerticalAlignment="Top" Click="Add_Clicked" HorizontalAlignment="Right" Width="30">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Grid HorizontalAlignment="Left" Height="35" Margin="182,198,0,0" VerticalAlignment="Top" Width="106">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="40" Margin="25,5,-13,-10" VerticalAlignment="Top" Width="94">
<TextBox x:Name="numerical" TextWrapping="Wrap" Width="34" Margin="0,10,0,9.667" Background="#FF14142E" Foreground="White" TextChanged="textBox_TextChanged"/>
<Button x:Name="button1" Content="-" HorizontalAlignment="Left" VerticalAlignment="Top" Width="14" Height="19" Margin="0,10,0,0" Background="#FFFFEFEF" FontSize="10.667" FontWeight="Bold" Click="button1_Click"/>
<Button x:Name="button" Content="+" HorizontalAlignment="Left" VerticalAlignment="Top" Width="14" Height="19" Margin="0,10,0,0" FontSize="10.667" FontWeight="Bold" Click="addNumValue"/>
</StackPanel>
</Grid>
<Label x:Name="label2" Content="Groups" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="209,231,0,0" Foreground="White"/>
</Grid>
</TabItem>
</TabControl>
<Button x:Name="button2" Content="-" Margin="0,2,53,10" Foreground="White" FontWeight="Bold" HorizontalAlignment="Right" Width="21" Click="Minimize_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="button2_Copy" Margin="0,2,27,10" Foreground="White" HorizontalAlignment="Right" Width="21" Click="Maximize_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
<Canvas>
<Rectangle Height="9" Width="9" Stroke="White" Canvas.Top="-2" Canvas.Left="-4"/>
<Rectangle Height="10" Width="10" Stroke="White" Canvas.Left="-2" Canvas.Top="-7" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-0.715"/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Button>
<Button x:Name="button2_Copy1" Content="X" Margin="0,2,0,10" Foreground="White" FontWeight="Bold" HorizontalAlignment="Right" Width="22" Click="button2_Copy1_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.27"/>
<GradientStop Color="#FF4F4F4F" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Label x:Name="label" Content="Remote Patch" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Width="108" Foreground="White" FontSize="16" IsHitTestVisible="False"/>
<Rectangle Grid.Row="2" Height="20" VerticalAlignment="Bottom" Fill="Transparent" Margin="-1,0,0,0"/>
<Label x:Name="label1" Content="Authenticated" HorizontalAlignment="Left" Grid.Row="2" Width="84" RenderTransformOrigin="0.5,0.5" Foreground="White" Height="23" VerticalAlignment="Bottom">
<Label.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="-0.718"/>
<RotateTransform/>
<TranslateTransform Y="-0.294"/>
</TransformGroup>
</Label.RenderTransform>
</Label>
<Ellipse x:Name="authColor" Fill="Red" HorizontalAlignment="Left" Margin="83,0,0,4" Grid.Row="2" Stroke="Black" Width="13" Height="13" VerticalAlignment="Bottom"/>
<Label x:Name="labelSettings" Content="Settings" Margin="0,-1,84,0" VerticalAlignment="Top" Foreground="#FF595555" FontWeight="Bold" HorizontalAlignment="Right" Width="56" MouseLeftButtonDown="labelSettings_MouseLeftButtonDown"/>
<Rectangle x:Name="rectangleNotification" Fill="#FFDDFF03" Grid.Row="2" Stroke="Black" Height="25" VerticalAlignment="Bottom" Opacity="0" Margin="0,0,1,0"/>
<Rectangle Height="2" Margin="30,31,30,0" Stroke="#FF444444" VerticalAlignment="Top" Grid.RowSpan="2" Opacity="0.5"/>
</Grid>
</Window>

You have a DropShadowEffect applied to your Window.
This is a problem because the DropShadowEffect uses all descendant objects to calculate the shape of the shadow. That means every single object contained in your Window is being inspected by this effect while rendering -- this takes a really long time.
Your shadow effect has 0 opacity anyway so you could just remove it.
Alternatively, you should apply the effect to a child of the Window, but make sure that child has no descendants.
The trick I use to apply the shadow to a window without destroying performance is to surround the contents of my window in a grid, place a border (or similar object) at the top of said grid (remember to assign a background to the border otherwise you won't get a shadow) and then apply the effect to the border instead of your window.
Before:
<Window x:Class="MyProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="400"
WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Window.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="0"/>
</Window.Effect>
<StackPanel Margin="8" Background="White">
<Button Margin="4">Test</Button>
<Button Margin="4">Test</Button>
<Button Margin="4">Test</Button>
</StackPanel>
</Window>
After:
<Window x:Class="MyProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="400"
WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Grid Margin="8">
<Border Background="White">
<Border.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="0"/>
</Border.Effect>
</Border>
<StackPanel>
<Button Margin="4">Test</Button>
<Button Margin="4">Test</Button>
<Button Margin="4">Test</Button>
</StackPanel>
</Grid>
</Window>
This provides the exact same appearance, but with better performance because:
The buttons are no longer involved in the calculation of the shadow
The border has no descendants, so the effect is only using the layout of the border in the calculation
General rule of thumb... Only apply the drop shadow effect to objects whose ancestors are intended to be affected by the effect.

Why can't I see the menu I created?

So I'm creating a small wpf application for fun, and I want it to have a menu. I created the menu and what not, but when I run the program the menu doesn't show up at all. The code for the menu is currently:
<Window x:Class="TBA_Alpha.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TBA LogIn" Height="350" Width="525">
<Grid>
<PasswordBox x:Name="tbPsw" HorizontalAlignment="Left" Margin="214,143,0,0" VerticalAlignment="Top" Width="133" SelectionBrush="Black" Background="White">
<PasswordBox.BorderBrush>
<LinearGradientBrush EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
<GradientStop Color="#FFABADB3" Offset="0.05"/>
<GradientStop Color="#FFE2E3EA" Offset="0.07"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</PasswordBox.BorderBrush>
</PasswordBox>
<TextBox x:Name="tbUId" HorizontalAlignment="Left" Height="23" Margin="214,94,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="133" SelectionBrush="Black">
<TextBox.Background>
<SolidColorBrush Color="White"/>
</TextBox.Background>
<TextBox.BorderBrush>
<LinearGradientBrush EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
<GradientStop Color="#FFABADB3" Offset="0.05"/>
<GradientStop Color="#FFE2E3EA" Offset="0.07"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<Button Content="LogIn" HorizontalAlignment="Left" Margin="239,200,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<TextBlock HorizontalAlignment="Left" Margin="214,73,0,0" TextWrapping="Wrap" Text="Your UserID:" VerticalAlignment="Top"/>
<TextBlock HorizontalAlignment="Left" Margin="214,122,0,0" TextWrapping="Wrap" Text="Your Password:" VerticalAlignment="Top"/>
<Menu HorizontalAlignment="Left" Height="25" VerticalAlignment="Top" Width="43" BorderThickness="1">
<MenuItem Header=" New " RenderTransformOrigin="0.5,0.5" Width="63" Height="36" Background="White" Visibility="Visible" AllowDrop="True" IsHitTestVisible="True">
<MenuItem Header=" User " Click="newUser"/>
</MenuItem>
</Menu>
</Grid>
any help whatsoever would be largely appreciated thank-you.
Edit: added the entire XAML code for the wpf, where the menu is near the end of the code
Edit: after removing all of the additional stuff and leaving only the headers, still experiencing the same problem
Edit: Tried the code in a different clean project and it worked, thank-you

The problem is that most of your controls use a Magrin attribute to separate themselves, rather than the functionality of the Grid. Since none of them specify the attached properties Grid.Row, they're all in the same row. Since Menu doesn't specify a Margin, it's at the top of the Grid and thus overlapping your other controls.
Try using actual grid rows
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<PasswordBox x:Name="tbPsw" HorizontalAlignment="Left" Grid.Row="0" VerticalAlignment="Top" Width="133" SelectionBrush="Black" Background="White">
<PasswordBox.BorderBrush>
<LinearGradientBrush EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
<GradientStop Color="#FFABADB3" Offset="0.05"/>
<GradientStop Color="#FFE2E3EA" Offset="0.07"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</PasswordBox.BorderBrush>
</PasswordBox>
<TextBox x:Name="tbUId" HorizontalAlignment="Left" Height="23" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Top" Width="133" SelectionBrush="Black">
<TextBox.Background>
<SolidColorBrush Color="White"/>
</TextBox.Background>
<TextBox.BorderBrush>
<LinearGradientBrush EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
<GradientStop Color="#FFABADB3" Offset="0.05"/>
<GradientStop Color="#FFE2E3EA" Offset="0.07"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<Button Content="LogIn" HorizontalAlignment="Left" Grid.Row="2" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<TextBlock HorizontalAlignment="Left" Grid.Row="3" TextWrapping="Wrap" Text="Your UserID:" VerticalAlignment="Top"/>
<TextBlock HorizontalAlignment="Left" Grid.Row="4" TextWrapping="Wrap" Text="Your Password:" VerticalAlignment="Top"/>
<Menu Grid.Row="5" HorizontalAlignment="Left" Height="25" VerticalAlignment="Top" Width="43" BorderThickness="1">
<MenuItem Header=" New " RenderTransformOrigin="0.5,0.5" Width="63" Height="36" Background="White" Visibility="Visible" AllowDrop="True" IsHitTestVisible="True">
<MenuItem Header=" User " Click="newUser"/>
</MenuItem>
</Menu>
</Grid>

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"

Wait until Code behind WPF Animation is Completed

I am building an application that looks like RoboZZle , but I have a problem:(the programming language in the answer is not important : C# or VB.NET)
I have three animations in the code behind which look like this:
Private Sub btngo_Click(sender As Object, e As RoutedEventArgs) Handles btngo.Click
go_stright()
go_stright()
go_stright()
go_stright()
End Sub
Private Sub go_stright()
Dim da As New DoubleAnimation()
Dim tt As New TranslateTransform()
da.From = offsety
offsety -= 50
da.To = offsety
da.Duration = New Duration(TimeSpan.FromSeconds(1))
tt.BeginAnimation(TranslateTransform.YProperty, da)
End Sub
This is the problem: when I click the "btngo" button, the last animation (4th go_stright) has animation effect. I need to wait until one animation is completed before the next one starts.
How can I do this?
Note: In roboZZle , the user with his algorithm moves sprite to destination and sprite movement isn't pre-defined.
i am a newbie in WPF.
Update: I have no Story Boards.
Update 2:My XAML:
<Page x:Class="Level1"
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="300" d:DesignWidth="300"
Title="Level1" Width="794" Height="535" Loaded="Page_Loaded_1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="735*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="65"/>
</Grid.RowDefinitions>
<Button x:Name="m1" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="10,0,0,0">
<Button.Background>
<SolidColorBrush Color="White"/>
</Button.Background>
</Button>
<Button x:Name="m2" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="69,1,0,0">
<Button.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}"/>
</Button.Background>
</Button>
<Button x:Name="m3" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="128,1,0,0">
<Button.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}"/>
</Button.Background>
</Button>
<Button x:Name="m4" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="187,1,0,0">
<Button.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}"/>
</Button.Background>
</Button>
<Button x:Name="m5" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="246,0,0,0">
<Button.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}"/>
</Button.Background>
</Button>
<Button x:Name="m6" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="305,0,0,0">
<Button.Background>
<SolidColorBrush Color="White"/>
</Button.Background>
</Button>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="215,100,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="215,149,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="215,199,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="215,249,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="215,299,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="264,299,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="314,299,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="364,299,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="413,299,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="413,100,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="413,149,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="413,199,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="413,249,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="264,100,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="314,100,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="364,100,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="g1" HorizontalAlignment="Left" Height="25" Margin="228,313,0,0" VerticalAlignment="Top" Width="25">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF005DFF" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Button Content="" x:Name="btnup" HorizontalAlignment="Center" Width="54" Height="54" FlowDirection="RightToLeft" Margin="721,48,19,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button.Foreground>
<ImageBrush ImageSource="Images/up.jpg" Stretch="None">
<ImageBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform CenterY="0.5" CenterX="0.5"/>
<TranslateTransform/>
</TransformGroup>
</ImageBrush.RelativeTransform>
</ImageBrush>
</Button.Foreground>
<Button.Background>
<ImageBrush ImageSource="Images/up.jpg"/>
</Button.Background>
</Button>
<Button Content="" x:Name="btnleft" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,107,19,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button.Foreground>
<ImageBrush ImageSource="Images/up.jpg" Stretch="None"/>
</Button.Foreground>
<Button.Background>
<ImageBrush ImageSource="Images/left.jpg"/>
</Button.Background>
</Button>
<Button Content="" x:Name="btnright" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,166,19,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button.Foreground>
<ImageBrush ImageSource="Images/up.jpg" Stretch="None"/>
</Button.Foreground>
<Button.Background>
<ImageBrush ImageSource="Images/Right.jpg"/>
</Button.Background>
</Button>
<Button Content="" x:Name="btnf1" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,225,19,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button.Foreground>
<ImageBrush ImageSource="Images/up.jpg" Stretch="None"/>
</Button.Foreground>
<Button.Background>
<ImageBrush ImageSource="Images/F1.jpg"/>
</Button.Background>
</Button>
<Button Content="" x:Name="btnf2" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,284,19,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2" IsEnabled="False">
<Button.Foreground>
<ImageBrush ImageSource="Images/up.jpg" Stretch="None"/>
</Button.Foreground>
<Button.Background>
<ImageBrush ImageSource="Images/F2.jpg"/>
</Button.Background>
</Button>
<Button Content="GO!" x:Name="btngo" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,343,19,0" Background="Red" Foreground="White" FontFamily="Meiryo" FontSize="19" FontWeight="Bold" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2"/>
<Button Content="Reset" x:Name="btnreset" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,402,19,0" Foreground="White" FontFamily="Meiryo" FontSize="16" FontWeight="Bold" Background="Cyan" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2"/>
<Ellipse x:Name="g2" HorizontalAlignment="Left" Height="25" Margin="427,313,0,0" VerticalAlignment="Top" Width="25">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF005DFF" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="g3" HorizontalAlignment="Left" Height="25" Margin="427,112,0,0" VerticalAlignment="Top" Width="25">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF005DFF" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Image x:Name="sprite" Margin="215,100,461,320" Source="Images/downsprite.png" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</Page>

You can add a completed event on the animation in which you will check how many steps you have to make and perform them if you're not there yet:
Private Sub btngo_Click(sender As Object, e As RoutedEventArgs) Handles btnGo.Click
PerformNextAction(actions(0))
End Sub
Private Sub go_stright()
Dim da As New DoubleAnimation(offsety, offsety - 50, New Duration(TimeSpan.FromSeconds(1)))
offsety -= 50
Dim tt As New TranslateTransform()
AddHandler da.Completed, AddressOf AnimationCompleted
tt.BeginAnimation(TranslateTransform.YProperty, da)
End Sub
Private Sub AnimationCompleted(sender As Object, e As EventArgs)
If actionCounter < 4 Then
actionCounter += 1
PerformNextAction(actions(actionCounter))
End If
End Sub
Private Sub PerformNextAction(ByVal action As Action)
Select Case action
Case MainWindow.Action.GoStraight
go_stright()
Case MainWindow.Action.RotateLeft
rotate_left()
Case MainWindow.Action.RotateRight
rotate_right()
End Select
End Sub
Don't forget this one too:
Private goStraightCounter As Integer
This one will keep track of your progress (how many times you need to keep calling the method).
Edit
To answer your comment, you could make an enum like this:
Public Enum Action
GoStraight
RotateRight
RotateLeft
End Enum
In the application you linked, the user has to make a list of action, so you could make that list a list of action (see enum). Then, instead of calling "go_stright", you just look at the next entry in the action list and call the method that goes for that action.
Edit 2:
To go deeper on actions, make a list of actions:
Public actions As ObservableCollection(Of Action)
So if the user has 5 actions he picked, you would have 5 enumactions in your list. So the list might look like this for example: GoStraight, RotateLeft, GoStraight, RotateLeft, GoStraight. In the animationcompleted event, instead of just calling the go_straight, you could implement a select case that checks which method you have to call (see updated code above). I just guessed how your go left and go right methods are called, so you might have to change those names.

Register an new EventHandler for the Completed Event in C#:
public MainWindow()
{
InitializeComponent();
System.Windows.Media.Animation.DoubleAnimation ani = new System.Windows.Media.Animation.DoubleAnimation();
ani.Completed += new EventHandler(ani_Completed);
}
void ani_Completed(object sender, EventArgs e)
{
throw new NotImplementedException();
}

I had the same problem.. Wire up a completed event and a property, then use a method that clears the dispatcher thread before returning..
// at the end of animation routine
progressTransition.Completed += new EventHandler(progressFlyOut_Completed);
progressTransition.Begin(ControlElement);
// allow animation to complete
WaitForCompletion(seconds * 2);
// completion event
private static void progressFlyOut_Completed(object sender, EventArgs e)
{
AnimationCompleted = true;
}
// wait routine
private static void WaitForCompletion(double TimeOut)
{
System.Diagnostics.Stopwatch stopwatch = new System.Diagnostics.Stopwatch();
stopwatch.Start();
while (AnimationCompleted == false)
{
if (stopwatch.Elapsed.TotalSeconds > TimeOut)
break;
Application.Current.Dispatcher.BeginInvoke(DispatcherPriority.ApplicationIdle, new Action(() => { })).Wait();
}
AnimationCompleted = false;
}