视口宽度略宽于实际视图窗口WPF

Question

我准备了自己的DataTemplate来显示我自己的Item类objets。要设置宽度，我使用绑定到ViewportWidth的{​​{1}}。这是如何：

ScrollViewer

我如何显示数据：

<DataTemplate x:Key="MyItemTemplate">
        <Grid Margin="5" HorizontalAlignment="Stretch"
              Width="{Binding ViewportWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}}">
            ...
        </Grid>
    </DataTemplate>

问题是<TabItem Header="Shop"> <!--<ScrollViewer>--> <ListView Name="ShopListView" ItemsSource="{Binding itemList}" ItemTemplate="{StaticResource MyItemTemplate}" ItemContainerStyle="{StaticResource alternatingListViewItemStyle}" AlternationCount="2" ScrollViewer.CanContentScroll="True" /> <!--</ScrollViewer>--> </TabItem> 使我的grid更加宽松 - 它与DataTemplate的右边界重叠。

修改 它们右边缘的按钮被剪掉了。

View Window

Answer 1

ListView为每个项目生成的项容器元素的默认样式包含一些填充。这意味着，渲染项的宽度通常略小于视口宽度。

要不让物品穿过视口的右边框，可以将项目容器的填充设置为零。这可以通过项容器的简单样式轻松完成。由于您已经提供了项容器样式，因此您可以让它设置填充属性。

但是，这可能没有必要。要跨视图端口的宽度拉伸项目内容，您不需要将项目模板中的Grid.Width属性绑定到ListView.ViewPortWidth。可以更简单地完成：可以通过相应地设置其HorizontalContentAlignment来指示项目容器水平拉伸项目内容。当然，这也可以使用项目容器样式来完成。

以下示例样式（基于您的问题中给出的样式）演示了设置HorizontalContentAlignment和Padding属性。如果要保持项目和ListView边框之间的默认填充，只需省略我的示例中的填充设置器：

<Style x:Key="alternatingListViewItemStyle" TargetType="{x:Type ListViewItem}">

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

    <Style.Triggers>
        <!-- setting up triggers for alternate background colors -->
        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
            <Setter Property="Background" Value="#FF4C85FF"></Setter>
        </Trigger>
        <Trigger Property="ItemsControl.AlternationIndex" Value="2">
            <Setter Property="Background" Value="#FFFF8C7C"></Setter>
        </Trigger>
    </Style.Triggers>
</Style>