如何使文本框的宽度与父视图的宽度相同

Question

我已经尝试使用width="auto"和HorizontalAlignment="Stretch"，但他们两个都不会给我我想要的结果。看起来文本框的宽度总是基于文本框标题的大小。为什么？

这是XMAL：

<ListView Width="auto"> 
    <TextBox Width="auto" 
      Header="Please Enter Email Address"/> 
    <TextBox HorizontalAlignment="Stretch" 
      Header="Please Enter Email address"/> 
</ListView> 

这是输出：

这就是我要找：

我得到的上面的截图通过设置宽度为a固定值。但我想找到一种方法让文本框自动根据父视图调整大小（例如，在本例中为ListView）。

---

编辑：

根据艾伦的答案，它工作在肖像模式很棒。但是仍然没有考虑景观的全部宽度。

<ListView x:Name="lv" Width="auto"> 
    <TextBox Width="{Binding ElementName=lv, Path=ActualWidth}" 
    Header="Please Enter Email Address"/> 
    <TextBox Width="{Binding ElementName=lv, Path=ActualWidth}" 
    Header="Please Enter Email address"/> 
</ListView> 

左图：人像模式;正确的图像：风景模式。

---

编辑2：

我注意到两个@艾伦的答案，并@ Jogy的答案都好，如果父视图是<Page>。但是，如果父视图是<ContentDialog>，它们都不起作用。事实上，如果父视图是<Page>，则简单地使用此<TextBox Width="auto"/>将按预期工作。 Windows Phone可能存在一些我不明白的事情。

Answer 1

绑定宽度其父控件的ActualWidth的象下面这样：

<ListView x:Name="lv" Width="auto"> 
    <TextBox Width="{Binding ElementName=lv, Path=ActualWidth}" 
    Header="Please Enter Email Address"/> 
    <TextBox Width="{Binding ElementName=lv, Path=ActualWidth}" 
    Header="Please Enter Email address"/> 
</ListView> 

[更新]

因为ActualWidth的属性不会对取向变化进行更新。让我们尝试用不同的方式：

<Page.Resources> 
    <Style TargetType="ListViewItem" x:Key="StretchedListViewItem"> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
</Style> 
</Page.Resources> 

<Grid> 
    <ListView ItemContainerStyle="{StaticResource StretchedListViewItem}" x:Name="lv" Width="auto"> 
     <TextBox Width="auto" 
     Header="Please Enter Email Address"/> 
     <TextBox Width="auto" 
     Header="Please Enter Email address"/> 
    </ListView> 

</Grid> 

[更新2]

[为什么]

这是一个很有意思的话题，它是关于如何重写控件的默认样式。

让我解释一下为什么我们无法让页面在ContentDialog中工作。这是因为ContentDialog在泛型中具有以下默认样式。XAML（你可以在Windows Phone发现8.1 SDK）：

<!-- Default style for Windows.UI.Xaml.Controls.ContentDialog --> 
    <!-- NOTE: Because this type didn't ship in WinBlue, we use a prefix to trick the 
     XAML parser to not only consider its own type table when parsing, even though 
     this exists in a jupiter-owned namespace. --> 
    <Style TargetType="controls:ContentDialog"> 
    <Setter Property="Background" Value="{ThemeResource ContentDialogBackgroundThemeBrush}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
     <ControlTemplate TargetType="controls:ContentDialog"> 
      <Border x:Name="Container"> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="Orientation"> 
       <VisualState x:Name="Portrait" /> 
       <VisualState x:Name="Landscape"> 
        <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ContentPanel" EnableDependentAnimation="True"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ContentDialogContentLandscapeWidth}" /> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="HorizontalAlignment" Storyboard.TargetName="ContentPanel"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Left" /> 
        </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 

      <Grid x:Name="LayoutRoot"> 
       <Grid.RowDefinitions> 
       <RowDefinition Height="Auto" /> 
       </Grid.RowDefinitions> 
       <Border x:Name="BackgroundElement" 
         Background="{TemplateBinding Background}" 
         FlowDirection="LeftToRight"> 
       <Border FlowDirection="{TemplateBinding FlowDirection}"> 
        <Grid x:Name="ContentPanel"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogTitleMinHeight}" /> 
         <RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogContentMinHeight}" /> 
         <RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogButtonsMinHeight}" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <ContentControl x:Name="Title" 
            Margin="{ThemeResource ContentDialogTitleMargin}" 
            Content="{TemplateBinding Title}" 
            ContentTemplate="{TemplateBinding TitleTemplate}" 
            FontSize="{StaticResource TextStyleExtraLargeFontSize}" 
            FontFamily="{ThemeResource PhoneFontFamilyNormal}" 
            FontWeight="SemiBold" 
            Grid.ColumnSpan="2" /> 
        <ContentPresenter x:Name="Content" 
             ContentTemplate="{TemplateBinding ContentTemplate}" 
             Content="{TemplateBinding Content}" 
             FontSize="{StaticResource TextStyleLargeFontSize}" 
             FontFamily="{ThemeResource PhoneFontFamilyNormal}" 
             Margin="{ThemeResource ContentDialogContentMargin}" 
             Grid.Row="1" 
             Grid.ColumnSpan="2" /> 
        <Border x:Name="Button1Host" Padding="{ThemeResource ContentDialogButton1HostPadding}" Grid.Row="2" /> 
        <Border x:Name="Button2Host" Padding="{ThemeResource ContentDialogButton2HostPadding}" Grid.Row="2" Grid.Column="1" /> 
        </Grid> 
       </Border> 
       </Border> 
      </Grid > 
      </Border> 
     </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    </Style> 

兴趣的东西造成从页面的区别：

1. 标题和内容的边缘被设置为（建议保持它）：

   ContentDialogTitleMargin 19,33.5,19,0

   ContentDialogContentMargin 19,16.5,19,0

2：在风景模式中的宽度被设定为：

... 
<x:Double x:Key="ContentDialogContentLandscapeWidth">400</x:Double> 
... 

在风景模式中的Horizo​​ntalAlignment设定为： 值= “左”

[解决]

除了我befor提供的步骤E（只需要改变Page.Resources到ContentDialog.Resources），我们需要做以下步骤

要解决此问题，添加以下到您的App.xaml：

<Application.Resources> 
     <Style x:Key="FullScreenContentDialogStyle" TargetType="ContentDialog"> 
      <Setter Property="Background" Value="{ThemeResource ContentDialogBackgroundThemeBrush}" /> 
      <Setter Property="Template"> 

       <Setter.Value> 
        <ControlTemplate TargetType="ContentDialog"> 
         <Border x:Name="Container"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="Orientation"> 
            <VisualState x:Name="Portrait" /> 
            <VisualState x:Name="Landscape"> 
             <Storyboard> 
              <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ContentPanel" EnableDependentAnimation="True"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="HorizontalAlignment" Storyboard.TargetName="ContentPanel"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Stretch" /> 
              </ObjectAnimationUsingKeyFrames>--> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 

          <Grid x:Name="LayoutRoot"> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="Auto" /> 
           </Grid.RowDefinitions> 
           <Border x:Name="BackgroundElement" 
             Background="{TemplateBinding Background}" 
             FlowDirection="LeftToRight"> 
            <Border FlowDirection="{TemplateBinding FlowDirection}"> 
             <Grid x:Name="ContentPanel"> 
              <Grid.RowDefinitions> 
               <RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogTitleMinHeight}" /> 
               <RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogContentMinHeight}" /> 
               <RowDefinition Height="Auto" MinHeight="{ThemeResource ContentDialogButtonsMinHeight}" /> 
              </Grid.RowDefinitions> 
              <Grid.ColumnDefinitions> 
               <ColumnDefinition Width="*" /> 
               <ColumnDefinition Width="*" /> 
              </Grid.ColumnDefinitions> 

              <ContentControl x:Name="Title" 
                  Margin="{ThemeResource ContentDialogTitleMargin}" 
                  Content="{TemplateBinding Title}" 
                  ContentTemplate="{TemplateBinding TitleTemplate}" 
                  FontSize="{StaticResource TextStyleExtraLargeFontSize}" 
                  FontFamily="{ThemeResource PhoneFontFamilyNormal}" 
                  FontWeight="SemiBold" 
                  Grid.ColumnSpan="2" /> 


              <ContentPresenter x:Name="Content" 
                   ContentTemplate="{TemplateBinding ContentTemplate}" 
                   Content="{TemplateBinding Content}" 
                   FontSize="{StaticResource TextStyleLargeFontSize}" 
                   FontFamily="{ThemeResource PhoneFontFamilyNormal}" 
                   Margin="{ThemeResource ContentDialogContentMargin}" 
                   Grid.Row="1" 
                   Grid.ColumnSpan="2" /> 
              <Border x:Name="Button1Host" Padding="{ThemeResource ContentDialogButton1HostPadding}" Grid.Row="2" /> 
              <Border x:Name="Button2Host" Padding="{ThemeResource ContentDialogButton2HostPadding}" Grid.Row="2" Grid.Column="1" /> 
             </Grid> 
            </Border> 
           </Border> 
          </Grid > 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 


    </Application.Resources> 

这里是CustomContentDialog.xaml：

<ContentDialog 
    x:Class="CSharpWP81.CustomContentDialog" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:CSharpWP81" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    Title="DIALOG TITLE" 
    PrimaryButtonText="sign in" 
    SecondaryButtonText="cancel" 
    PrimaryButtonClick="ContentDialog_PrimaryButtonClick" 
    SecondaryButtonClick="ContentDialog_SecondaryButtonClick" 
    HorizontalAlignment="Stretch" 
    VerticalAlignment="Stretch" 
    VerticalContentAlignment="Stretch" 
    HorizontalContentAlignment="Stretch" 
    Style="{StaticResource FullScreenContentDialogStyle}"> 

    <ContentDialog.Resources> 
     <Style TargetType="ListViewItem" x:Key="StretchedListViewItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     </Style> 
    </ContentDialog.Resources> 


    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch"> 
     <ListView ItemContainerStyle="{StaticResource StretchedListViewItem}" x:Name="lv"> 
      <TextBox Width="auto" 
     Header="Please Enter Email Address"/> 
      <TextBox Width="auto" 
     Header="Please Enter Email address"/> 
     </ListView> 

    </StackPanel> 

</ContentDialog> 

Answer 2

而是结合的宽度，尝试添加此开幕的ListView标签如下：

<ListView.ItemContainerStyle> 
     <Style TargetType="ListViewItem"> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     </Style> 
    </ListView.ItemContainerStyle> 

[UPDATE]

显然，ContentDialog和横向模式存在问题。 检查这个线程： https://social.msdn.microsoft.com/Forums/en-US/6c8ad10c-3b27-4991-9a5a-8cb15b338709/contentdialog-behavior-in-landscape-orientation?forum=wpdevelop

如果列表设置为红色的背景颜色，你会看到，当手机横向模式全名单被裁剪。