2015-04-05 47 views
0

你好,我是WPF的新手,我在设计UI时遇到了一些问题。WPF中的控件在调整大小时粘在一起

在设计视图中,我有这个: http://i.stack.imgur.com/papJ2.png

这是我的XAML代码:

<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> 

但是当我运行我的应用程序,我得到这个:

正常:

http://i.stack.imgur.com/IH300.png

我该如何让控件不粘在一起?

回答

1

您将选项卡中的项目分组在<grid>中,但使用绝对边距将它们放置在网格中。 尝试使用堆栈面板上的物品边距,像这样:

<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>