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

我已经用

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>

左图：纵向模式；右图：横向模式。

---

编辑2:

---

我注意到，如果父视图是

，则@Alan的答案和@Jogy的答案都是可以的。但是，如果父视图是

，则两者都不起作用。事实上，如果父视图是

，那么简单地使用这个

将按预期工作。Windows Phone可能有一些明显的东西我不明白

将宽度绑定到其父控件的实际宽度，如下所示：

<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在generic.xaml中具有以下默认样式（您可以在windows phone 8.1 sdk中找到）：

引起与第页不同的兴趣事项：

标题和内容的边距设置为（建议保留）：

ContentDialogTitleMargin 19,33.5,19,0

ContentDialogContentMargin 19,16.5,19,0

2：横向模式下的宽度设置为：

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

。。。
400
...

横向模式下的水平对齐设置为： Value=“Left”

[解决方案]

除了我之前提供的步骤（只需要将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>

---

不要绑定宽度，而是尝试在开始的ListView标记下面添加以下内容：

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

[更新]

显然，ContentDialog和横向模式存在问题。 检查此线程：

---

如果将列表的背景色设置为红色，则当手机处于横向模式时，您将看到整个列表被裁剪。

太棒了，谢谢！这实际上在纵向模式下工作。但是，如果我旋转设备，它仍然只占屏幕宽度的一部分。有没有想过？我更新了我的答案。之后我注意到Jogy提供了正确的方向。你好，Alan。再次感谢您的编辑！我注意到我的父视图是

，而不是

。因此，我将

更改为。但我看不到任何影响。你知道吗？我能说什么。我不敢相信这么小的功能需要这么多行代码！谢谢！对不起，在编辑我的回复时，我没有注意到您的回复。你的方向是对的。你好，Joggy，谢谢你的回答。然而，我试过了，但它不起作用。我认为只有当父视图是

时，这可能才有效？我的父视图是一个

的事实可能导致了这个问题？

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

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