Q:

Controls in WPF sticking together when resizing

Hello i am newbies in WPF and i have some problems with designing my UI.
In the design view, i have this:
http://i.stack.imgur.com/papJ2.png
And this is my XAML code:
<mui:ModernWindow
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:mui="http://firstfloorsoftware.com/ModernUI"
                  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:awe="http://schemas.awesomium.com/winfx" x:Name="___No_Name_" mc:Ignorable="d" x:Class="JJADesign.MainWindow"
                  Title="mui" 
                  LogoData="F1 M 24.9015,43.0378L 25.0963,43.4298C 26.1685,49.5853 31.5377,54.2651 38,54.2651C 44.4623,54.2651 49.8315,49.5854 50.9037,43.4299L 51.0985,43.0379C 51.0985,40.7643 52.6921,39.2955 54.9656,39.2955C 56.9428,39.2955 58.1863,41.1792 58.5833,43.0379C 57.6384,52.7654 47.9756,61.75 38,61.75C 28.0244,61.75 18.3616,52.7654 17.4167,43.0378C 17.8137,41.1792 19.0572,39.2954 21.0344,39.2954C 23.3079,39.2954 24.9015,40.7643 24.9015,43.0378 Z M 26.7727,20.5833C 29.8731,20.5833 32.3864,23.0966 32.3864,26.197C 32.3864,29.2973 29.8731,31.8106 26.7727,31.8106C 23.6724,31.8106 21.1591,29.2973 21.1591,26.197C 21.1591,23.0966 23.6724,20.5833 26.7727,20.5833 Z M 49.2273,20.5833C 52.3276,20.5833 54.8409,23.0966 54.8409,26.197C 54.8409,29.2973 52.3276,31.8106 49.2273,31.8106C 46.127,31.8106 43.6136,29.2973 43.6136,26.197C 43.6136,23.0966 46.127,20.5833 49.2273,20.5833 Z"
                  Style="{StaticResource BlankWindow}" d:DesignHeight="1055" d:DesignWidth="1400" WindowStartupLocation="CenterScreen" WindowStyle="SingleBorderWindow">
    <DockPanel>
        <TabControl DockPanel.Dock="Top" Height="69">
            <TabItem Header="TabItem">
                <Grid Margin="0,0,0,1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="225*"/>
                        <ColumnDefinition Width="466*"/>
                    </Grid.ColumnDefinitions>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="147,4,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="218"/>
                    <Button Content="Button" HorizontalAlignment="Left" Margin="95,3,0,0" VerticalAlignment="Top" Width="170" Grid.Column="1"/>
                    <Button Content="Button" HorizontalAlignment="Left" Margin="370,3,0,0" VerticalAlignment="Top" Width="170" Grid.ColumnSpan="2"/>
                    <Label Content="Saisir une produit JJA" HorizontalAlignment="Left" Width="100" Margin="15,7,335,5" />

                </Grid>

            </TabItem>
            <TabItem Header="TabItem">
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="676*"/>
                    </Grid.ColumnDefinitions>
                </Grid>
            </TabItem>
        </TabControl>
        <awe:WebControl DockPanel.Dock="Bottom" Source="http://www.google.com/"/>
    </DockPanel>
</mui:ModernWindow>

But when i run my application, i got this:
Normal:
http://i.stack.imgur.com/IH300.png
How can i make the control not sticking together?

A:

You have the items in the tab grouped in a <grid>, but are using absolute margins to position them within the grid.
Try using the stackpanel with margins on the items inside it, like this :
<TabItem Header="TabItem">
            <StackPanel Orientation="Horizontal" Margin="0,0,0,1">
                    <TextBox HorizontalAlignment="Left" Height="23" margin="0,0,10,0"  TextWrapping="Wrap" Text="TextBox"  Width="218"/>
                    <Button Content="Button" margin="0,0,10,0" Width="170" />
                    <Button Content="Button" margin="0,0,10,0"  Width="170" />
                    <Label Content="Saisir une produit JJA"  Width="100"  />    
            </StackPanel>
</TabItem>

