如何使文本框的寬度與父視圖的寬度相同

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

如果列表設置爲紅色的背景顏色，你會看到，當手機橫向模式全名單被裁剪。