ListView ItemTemplate 网格 100% 宽度

Question

我制作了一个 ListView ItemTemplate，我希望它能够响应（当方向发生变化时，例如，listView 项目的大小发生变化）。我正在使用网格作为网格内部元素的控件，但它没有表现。 ListView.ItemContainerStyle 有属性 HorizontalAlignment="Stretch" 这是我想要的行为，并且 ItemContainerStyle 是正确的宽度。在 Border 和 Grid 内部，我有相同的 HorizontalAlignment="Stretch" 并且当其中包含的 TextBox 包含大量文本时它们会溢出，而当 TextBox 中的文本很少或没有文本时，Border 元素会缩小到小于正在显示 ItemContainerStyle。

<ListView ItemsSource="{Binding TileStories}" x:Name="cont" Margin="0,10,0,10" Background="{StaticResource CustomResourceBrush}" BorderBrush="{StaticResource CustomResourceBrush}" Foreground="{StaticResource CustomResourceBrush}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Margin" Value="20,10,20,10" />
                <Setter Property="Foreground" Value="{StaticResource BTVioletBrush}" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border CornerRadius="20" BorderThickness="0" Width="{Binding ScrollViewerWidth}" Background="White" HorizontalAlignment="Stretch">
                    <StackPanel Height="160" Orientation="Horizontal">
                        <Grid Background="black">
                            <TextBox Text="Example">
                        </Grid>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Answer 1

将 ItemContainerStyle 的 MinHeight 定义为 0

Answer 2

添加到您的 ItemContainerStyle

            <Setter Property="HorizontalContentAlignment"
                    Value="Stretch" />

而且我认为 Width="{Binding ScrollViewerWidth}" 不是必需的。您可以删除它。

Answer 3

我没有完全找到解决方案，但确实找到了解决方法。如果我使用 {Binding ActualWidth, ElementName=StackPanel, Mode=OneWay}，则网格将与 Width="0" 绑定，其中 StackPanel 是数据模板中的面板。我在 VS2013 中四处寻找设计师，发现 Width 是 0，因为（我假设）数据模板中的项目是一个接一个地绘制的，因此 Width 在第一个时为零绘制了模板等等。我想我还没有解释得很好，但重要的是解决方案：

<PivotItem x:Name="Feed">
    ....
    <Border CornerRadius="20" BorderThickness="0" Background="White" HorizontalAlignment="Stretch">
        <StackPanel Height="160" Orientation="Horizontal">
            <Grid HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Feed, Mode=OneWay}">
            ........
            </Grid>
        </StackPanel>
    </Border>
...
</PivotItem>

我认为 PivotItem 有一个非变量 Width 意味着 Grid 有一个具体的 Width 可以继承。

Answer 4

就这样做

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

ListView ItemTemplate 网格 100% 宽度

ListView ItemTemplate Grid 100% Width

xaml

user-controls

responsive-design

windows-phone-8.1