We Keep Coding

How to add TextBox over PasswordBox?

I want to put a TextBox over the PasswordBox to make the encrypted password visible with a button.
When I press the button I want to see the password from the PasswordBox in the TextBox, but my problem is the alignment, because these two components are in the Grid, the TextBox is aligned to the right of the PasswordBox.
This is my XAML file:
<UserControl
x:Class="Waters.NuGenesis.LmsBundle.Plugins.Views.RpcView"
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"
xmlns:controls="clr-namespace:Waters.NuGenesis.UiEngine.Presentation.Controls;assembly=Waters.NuGenesis.UiEngine.Presentation"
xmlns:presentation="clr-namespace:Waters.NuGenesis.UiEngine.Presentation;assembly=Waters.NuGenesis.UiEngine.Presentation"
xmlns:viewModels="clr-namespace:Waters.NuGenesis.LmsBundle.Plugins.ViewModels"
xmlns:buttons="clr-namespace:Waters.NuGenesis.UiEngine.Presentation.Controls.Buttons;assembly=Waters.NuGenesis.UiEngine.Presentation"
mc:Ignorable="d"
d:DesignHeight="450"
d:DesignWidth="800"
d:DataContext="{d:DesignInstance viewModels:RpcViewModel}">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</UserControl.Resources>
<DockPanel>
<controls:PageTitleBlock
DockPanel.Dock="Top"
Title="RPC & SDMS Login"
Description="Configure SDMS RPC and SDMS Login services." />
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Margin" Value="0 3" />
</Style>
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="Margin" Value="0 3 15 0" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource {x:Type PasswordBox}}">
<Setter Property="Margin" Value="0 3" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Grid.Row="0"
Content="User Name"
Visibility="{Binding IsRpcUserNameVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="0"
Text="{Binding RpcUserName, UpdateSourceTrigger=LostFocus}"
Visibility="{Binding IsRpcUserNameVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Label
Grid.Column="0"
Grid.Row="2"
Content="Password"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<DockPanel
Grid.Column="1"
Grid.Row="2">
<buttons:SmallButton
DockPanel.Dock="Right"
Content="See"
Margin="15 0 0 0"
Command="{Binding ShowPasswordCommand}" />
<PasswordBox
Grid.Column="1"
Grid.Row="2"
presentation:UnsafePasswordBox.BindPassword="True"
presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="2"
Name="TestShowPassword"
Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding SetVisibility}" />
</DockPanel>
<Label
Grid.Column="0"
Grid.Row="4"
Content="Domain"
Visibility="{Binding IsRpcDomainVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="4"
Text="{Binding RpcDomain}"
Visibility="{Binding IsRpcDomainVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
</Grid>
</DockPanel>
</UserControl>
What I want to modify is this DockPanel:
<DockPanel
Grid.Column="1"
Grid.Row="2">
<buttons:SmallButton
DockPanel.Dock="Right"
Content="See"
Margin="15 0 0 0"
Command="{Binding ShowPasswordCommand}" />
<PasswordBox
Grid.Column="1"
Grid.Row="2"
presentation:UnsafePasswordBox.BindPassword="True"
presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="2"
Name="TestShowPassword"
Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding SetVisibility}" />
</DockPanel>

You put the PasswordBox and the TextBox in a DockPanel, but set the attached Grid.Row and Grid.Column properties, which do not have any effect here, they are only respected by Grid.
The DockPanel will arrange items next to each other, but not overlapping.
Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.
You should use a Grid instead which the same column for the PasswordBox and the TextBox.
<Grid
Grid.Column="1"
Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<buttons:SmallButton
Grid.Column="1"
Content="See"
Margin="15 0 0 0"
Command="{Binding ShowPasswordCommand}"/>
<PasswordBox
Grid.Column="0"
presentation:UnsafePasswordBox.BindPassword="True"
presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="0"
Name="TestShowPassword"
Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding SetVisibility}"/>
</Grid>

GridSplitter getting stuck after dragging some pixels

GridSplitter getting stuck after dragging some pixels,and have to reselect the splitter and drag again.
I am using RadTreeView in one column, and ListBox in second column, in which user can select Item from ListBox and Drag it into RadTreeView.
Please find below screenshot for the UI.
I tried to find solution on SO, but not getting any useful answer.
Please find below code for the same, Let me know if you require more information for the same.
<UserControl x:Class="StructureDesigner.StructureDesigner"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
xmlns:vm="clr-namespace:StructureDesigner.ViewModel"
MinHeight="400" MinWidth="400" AllowDrop="True" telerik:DragDropManager.AllowCapturedDrag="True" Name="StructureDesignerScreen">
<UserControl.Resources>
<Style TargetType="telerik:RadTreeViewItem">
<Setter Property="AllowDrop" Value="true" />
<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
<Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
</Style>
<Style TargetType="ListBoxItem">
<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
</Style>
</UserControl.Resources>
<Grid x:Name="MainGrid" ScrollViewer.CanContentScroll="false" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter x:Name="gridSplitter" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Width="10" Background="DarkGray" Height="Auto" />
<telerik:RadTreeView x:Name="radStructureTreeView" IsDragTooltipEnabled="True" IsDragDropEnabled="True"
IsDragPreviewEnabled="True" IsDropPreviewLineEnabled="True"
Grid.Row="0" Grid.Column="0" SelectionMode="Extended"
HorizontalAlignment="Stretch" Margin="2,2,11,2" IsLoadOnDemandEnabled="True"
LoadOnDemand="radStructureTreeView_LoadOnDemand"
ExpanderStyle="{StaticResource ExpanderStyle}"
ItemContainerStyle="{StaticResource ItemContainerStyle}"
IsExpandOnSingleClickEnabled="False" ItemsSource="{Binding StructureDesignerList}"
ItemTemplate="{StaticResource NavigationTemplate}"
telerik:TreeViewSettings.DragDropExecutionMode="New"
>
</telerik:RadTreeView>
<Grid Grid.Row="0" Grid.Column="1" Name="gridEntities" HorizontalAlignment="Stretch" Margin="1,2,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListBox x:Name="listBox1" Grid.Row="0" Grid.Column="0" Margin="8" HorizontalAlignment="Stretch"
SelectionMode="Extended" Width="Auto" ItemsSource="{Binding EntityList}"
AllowDrop="True">
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Hide posted entities" Tag="Hide posted entities" IsCheckable="True" IsChecked="{Binding Path=IsHidePostedEntitiesChecked}"></MenuItem>
</ContextMenu>
</ListBox.ContextMenu>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Label Name="lblSpacer1" Height="5"></Label>
<StackPanel Orientation="Horizontal">
<Image Grid.Column="1" Width="25" Height="16" Source="{Binding Path=Icon}" VerticalAlignment="Top"></Image>
<Label Content="" Width="1" Height="16" ></Label>
<TextBlock Text="{Binding Description}" FontWeight="Bold" VerticalAlignment="Center" />
</StackPanel>
<Label Name="lblSpacer2" Height="5"></Label>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
</UserControl>

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>

Changing Grid Row background color in WPF

I want to set 2 colors to my grid rows, the even ones will have one color and the others will have another.
I dont know ho to even start of doing it.
<ListBox
ItemsSource="{Binding}" x:Name="station_list"
HorizontalAlignment="Left" Height="378" Margin="10,31,0,0"
VerticalAlignment="Top" Width="570" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="Stations_Template">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name: " />
<TextBlock Grid.Column="1" Text="{Binding Path=sname}" />
<TextBlock Grid.Column="2" Text="Last Name: " />
<TextBlock Grid.Column="3" Text="{Binding Path=mahoz}" />
<CheckBox Grid.Column="4" Content="Is Active?"
IsEnabled="False"
IsChecked="{Binding Path=isactive}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Use Rectangles to fill the rows first, then add data to them.
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="AliceBlue" />
<TextBlock Grid.Row="0" Text="Row 1" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="1" Fill="AntiqueWhite" />
<TextBlock Grid.Row="1" Text="Row 2" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="2" Fill="AliceBlue" />
<TextBlock Grid.Row="2" Text="Row 3" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="3" Fill="AntiqueWhite" />
<TextBlock Grid.Row="3" Text="Row 4" HorizontalAlignment="Center"/>
</Grid>
Edit:
If you're loading an unknown amount of items, then i think you need something like an itemscontrol to load them in. You can then use the alternationcount and triggers to handle the alternating color.
<ItemsControl ItemsSource="{Binding DataList}" AlternationCount="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="FooBar" Margin="0,0,0,10">
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="Blue" TargetName="FooBar"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="Red" TargetName="FooBar"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="Cyan" />
<Border Grid.Row="2" Grid.Column="1" Background="Red" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="2" Background="Orange" />
<Border Grid.Row="0" Grid.Column="1" Background="Green" />
<TextBlock Grid.ColumnSpan="2" Grid.Row="1" Text="Here is some more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Text="Here is some text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Grid.Row="2" Text="Here is even more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Window>
![enter image description here][1]
[1]: http://i.stack.imgur.com/LX9X8.png

Stretch two buttons inside a WrapPanel

I am switching from Windows Forms to WPF and I would like to copy the GUI over. Since just running it through a converter gives horrible code I am giving it a go myself. Though when I try to create a simple groupbox, it already is giving me troubles.
I want to create this:
But I end up with this:
This is the XAML:
<GroupBox Header="Search" Width="200">
<StackPanel>
<TextBox />
<WrapPanel>
<Button Content="Reset" />
<Button Content="Search" />
</WrapPanel>
</StackPanel>
</GroupBox>
If I play around with HorizontalAlignment it doesn't do anything. I want to stretch the buttons (50% each) but I can't seem to find a way to get it done. I feel as if WrapPanel maybe isn't the right container here, but I can't find an alternative.

You can use the Grid container or the UniformGrid container.
Example 1 (Grid instead of WrapPanel):
<GroupBox Header="Search" Width="200">
<StackPanel>
<TextBox />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Reset" Margin="0,5,5,0" />
<Button Grid.Column="1" Content="Search" Margin="5,5,0,0" />
</Grid>
</StackPanel>
</GroupBox>
Example 2 (Grid for whole layout):
<GroupBox Header="Search" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Button Grid.Row="1" Grid.Column="0" Content="Reset" Margin="0,5,5,0" />
<Button Grid.Row="1" Grid.Column="1" Content="Search" Margin="5,5,0,0" />
</Grid>
</GroupBox>
Example 3 (UniformGrid instead of WrapPanel):
<GroupBox Header="Search" Width="200">
<StackPanel>
<TextBox />
<UniformGrid Columns="2" Rows="1">
<Button Content="Reset" Margin="0,5,5,0" />
<Button Content="Search" Margin="5,5,0,0" />
</UniformGrid>
</StackPanel>
</GroupBox>
Result layout for all examples:
Useful links
MSDN: WPF Container Controls Overview
MSDN: Grid
MSDN: UniformGrid
CodeProject: WPF Tutorial : Layout-Panels-Containers & Layout Transformation
CodeProject: WPF Layouts - A Visual Quick Start
2,000 Things You Should Know About WPF: UniformGrid

Try this:
<GroupBox Header="Search" Width="200" >
<GroupBox.Resources>
<Style TargetType="{x:Type FrameworkElement}">
<Setter Property="Margin" Value="4"></Setter>
</Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
</GroupBox.Resources>
<StackPanel Margin="2">
<TextBox />
<UniformGrid Rows="1">
<Button Content="Reset" />
<Button Content="Search" IsDefault="True" />
</UniformGrid>
</StackPanel>
</GroupBox>