XAML网格组件放置问题

Question

我在网格中放置组件时出现问题。

atm输出是这样的：

我想要做的就是将这些组件并排放在一起，如下所示：

这是我目前的代码：

<Grid x:Name="Components" Margin="8,8,0,8">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>                  
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label Grid.Row="1" Grid.Column="0" Content="{Binding .[Language.timeOptions1], Mode=OneWay, Source={StaticResource localisation}}" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="11" Foreground="#FF585858" FontFamily="Myriad Pro" Height="23.2"/>
    <TextBox Grid.Row="1" Grid.Column="1" MaxLength="2" x:Name="textTimeHour" TextWrapping="NoWrap" VerticalAlignment="Top" HorizontalAlignment="Left" FontFamily="Myriad Pro" Style="{DynamicResource style1Text}" Height="25.2"/>
    <Label Grid.Row="1" Grid.Column="1" Content=":" HorizontalAlignment="Left" FontSize="11" Foreground="#FF585858" FontFamily="Myriad Pro" VerticalAlignment="Top"/>
    <TextBox Grid.Row="1" Grid.Column="2" MaxLength="1" x:Name="textTimeMin" TextWrapping="NoWrap" VerticalAlignment="Top" FontFamily="Myriad Pro" Style="{DynamicResource style1Text}" Height="25.2" HorizontalAlignment="Left" Width="Auto"/>
    <Button Width="80" Grid.Row="1" Grid.Column="2" x:Name="btnNow" Content="{Binding .[Language.now], Mode=OneWay, Source={StaticResource localisation}}" VerticalAlignment="Top" Style="{DynamicResource style1Btn}" Height="25.2" FontSize="9.333" Click="btnNow_Click"/>
    <TextBlock Grid.Row="2" Grid.Column="0" x:Name="blockIgnoreDate" Text="{Binding .[Language.timeOptions2], Mode=OneWay, Source={StaticResource localisation}}" HorizontalAlignment="Left" FontSize="11" Foreground="#FF585858" FontFamily="Myriad Pro" Height="23.202"/>
    <Custom:DatePicker  Grid.Row="2" Grid.Column="1" x:Name="pickerDate" d:LayoutOverrides="Width" FontFamily="Myriad Pro" IsTodayHighlighted="False" Foreground="#FF585858" Height="24" />
    <CheckBox Grid.Row="2" Grid.Column="2" x:Name="checkIgnoreDate" Content="{Binding .[Language.ignoreDate], Mode=OneWay, Source={StaticResource localisation}}" Foreground="#FF585858" Background="{x:Null}" Checked="checkIgnoreDate_Checked" Unchecked="checkIgnoreDate_Unchecked" Height="15.96"/>
    <Button Grid.Row="3" Grid.Column="0" x:Name="btnAddTask" Content="{Binding .[Language.addTask], Mode=OneWay, Source={StaticResource localisation}}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Style="{DynamicResource style1Btn}" Click="btnAddTask_Click" Height="24.65"/>
</Grid>

有人能指出我正确的方向吗？

Answer 1

将时间控件放在StackPanel内，并将控件的VerticalAlignment更改为Center：

<Label Grid.Row="1" Grid.Column="0" Content="{Binding .[Language.timeOptions1],
       Mode=OneWay, Source={StaticResource localisation}}" HorizontalAlignment="Left"
       VerticalAlignment="Center" FontSize="11" Foreground="#FF585858"
       FontFamily="Myriad Pro" Height="23.2"/>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1">
    <TextBox MaxLength="2" x:Name="textTimeHour" TextWrapping="NoWrap"
             VerticalAlignment="Center" HorizontalAlignment="Left"
             FontFamily="Myriad Pro" Style="{DynamicResource style1Text}"
             Height="25.2"/>
    <Label Content=":" HorizontalAlignment="Left" FontSize="11" Foreground="#FF585858"
           FontFamily="Myriad Pro" VerticalAlignment="Center"/>
    <TextBox MaxLength="1" x:Name="textTimeMin" TextWrapping="NoWrap"
             VerticalAlignment="Top" FontFamily="Myriad Pro"
             Style="{DynamicResource style1Text}" Height="25.2"
             HorizontalAlignment="Left" Width="Auto"/>
    <Button Width="80" x:Name="btnNow" Content="{Binding .[Language.now], Mode=OneWay,
           Source={StaticResource localisation}}" VerticalAlignment="Center"
           Style="{DynamicResource style1Btn}" Height="25.2" FontSize="9.333"
           Click="btnNow_Click"/>
</StackPanel>

您可能还想为CheckBox添加一个保证金，或者将HorizontalAlignment设置为Center。

Answer 2

更改textTimeMin文本框的Grid.Column并将btnNow更改为1，并在textTimeHour，textTimeMin，：label和btnNow -

上设置Grid.ColumnSpan =“2”

<Label Grid.Row="1" Grid.Column="0" Content="{Binding .[Language.timeOptions1], Mode=OneWay, Source={StaticResource localisation}}" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="11" Foreground="#FF585858" FontFamily="Myriad Pro" Height="23.2"/>
<TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" MaxLength="2" x:Name="textTimeHour" TextWrapping="NoWrap" VerticalAlignment="Top" HorizontalAlignment="Left" FontFamily="Myriad Pro" Style="{DynamicResource style1Text}" Height="25.2"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Content=":" HorizontalAlignment="Left" FontSize="11" Foreground="#FF585858" FontFamily="Myriad Pro" VerticalAlignment="Top"/>
<TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" MaxLength="1" x:Name="textTimeMin" TextWrapping="NoWrap" VerticalAlignment="Top" FontFamily="Myriad Pro" Style="{DynamicResource style1Text}" Height="25.2" HorizontalAlignment="Left" Width="Auto"/>
<Button Width="80" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" x:Name="btnNow" Content="{Binding .[Language.now], Mode=OneWay, Source={StaticResource localisation}}" VerticalAlignment="Top" Style="{DynamicResource style1Btn}" Height="25.2" FontSize="9.333" Click="btnNow_Click"/>

我现在无法测试它，但您需要正确使用Grid.Column和Grid.ColumnSpan来实现您想要的效果。