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>

这是输出：

enter image description here

这就是我要找的：

enter image description here

我通过将宽度设置为固定值来获得上述屏幕截图。但我想找到一种方法让文本框根据父视图自动调整大小（例如在这种情况下为ListView）。

修改：

根据Alan的回答，它在肖像模式下效果很好。但仍然没有在景观中占据全宽。

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

我注意到，如果父视图为<Page>，@ Alan的答案和@ Jogy的答案都可以。但是，如果父视图为<ContentDialog>，则它们都不起作用。事实上，如果父视图为<Page>，使用此<TextBox Width="auto"/>进行简单操作将按预期工作。关于Windows Phone可能有一些显而易见的事情我不明白。

Answer 1

不要绑定Width，而是尝试在打开的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

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

Answer 2

将宽度绑定到其父控件的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]

<强> [为什么]

这是一个非常有趣的主题，它是关于如何覆盖Control的默认样式。

让我解释为什么我们不能让我们以前的Page解决方案在ContentDialog中工作。这是因为ContentDialog在generic.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>

导致与Page：

不同的利益

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

ContentDialogTitleMargin 19,33.5,19,0

ContentDialogContentMargin 19,16.5,19,0

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

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

横向模式中的HorizontalAlignment设置为：值= “左”

<强> [解决]

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

如何使TextBox与父视图的宽度相同

2 个答案: