Question

我在Grid.Row中有3个控件，但是如何让它们使用页面的整个宽度？

这是我的xaml：

 <Grid>
      <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="140" />
            <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>

      <Image Grid.Column="0"
            Grid.Row="1"
            Source="/Assets/image1.png"
            Height="25"
            Width="25" />

      <TextBox Grid.Column="1"
               Margin="10,0,0,0"
               Text="{Binding InputText, Mode=TwoWay}"
               BorderBrush="Black"
               BorderThickness="2"
               VerticalAlignment="Center">
      </TextBox>

      <Button Grid.Column="2"
              BorderThickness="2"
              HorizontalAlignment="Right"
              Command="{Binding AddTextCommand}"
              Margin="10,0,0,0">
       <TextBlock x:Uid="ButtonText" />
       </Button>
 </Grid>

现在结果如下：

正如您所看到的那样，它是左对齐的，如何让它使用全宽？

Answer 1

您的代码仅显示3个控件（Image，TextBox，Button），而您的屏幕截图显示4个控件。我想顶部的全宽度控制缺失了，但回答这个问题没问题。

如果我们分解你的XAML，你有：

第一列宽度自动，填充图像。
第二列宽140，填充TextBox
第三列宽*（或空格的其余部分），填充按钮

在您放置的按钮上HorizontalAlignment="Right"（默认为左），您在其中说：只使用必要的空间并将控件放在右侧。如果您想使用可用的全宽，则必须使用HorizontalAlignment="Stretch"。

 <Grid>
      <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="140" />
            <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>

      <Image Grid.Column="0"
            Source="/Assets/image1.png"
            Height="25"
            Width="25" />

      <TextBox Grid.Column="1"
               Margin="10,0,0,0"
               Text="{Binding InputText, Mode=TwoWay}"
               BorderBrush="Black"
               BorderThickness="2"
               VerticalAlignment="Center">
      </TextBox>

      <Button Grid.Column="2" x:Uid="ButtonText"
              BorderThickness="2"
              HorizontalAlignment="Stretch"
              Command="{Binding AddTextCommand}"
              Margin="10,0,0,0" />
 </Grid>

请注意，我还从TextBlock移除了Button，并将x:Uid标记移至该按钮。只需在资源中使用ButtonText.Content即可对您的按钮进行本地化，无需在其中放置TextBlock。

如何在xaml中使用Phone的全宽？

1 个答案: