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

时间:2017-05-09 22:52:41

标签: c# wpf xaml binding

我准备了自己的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的右边界重叠。

修改 The problem is visible on the right side 它们右边缘的按钮被剪掉了。

View Window

1 个答案:

答案 0 :(得分:1)

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

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

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

以下示例样式(基于您的问题中给出的样式)演示了设置HorizontalContentAlignmentPadding属性。如果要保持项目和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>