GridViewItems 中间出现细小的白线

Question

我弄了一个demo 放在：https://onedrive.live.com/redir?resid=99FA80783EE47103!3779&authkey=!AHUgN1oDj4gugyg&ithint=file%2czip 中。

我的思路是将gridviewitems分组，组内的每块item都显示一张图片它们能组合成一张大图，所以不需要组内的item有border显示出来。现在这种做法，在缩小或者放大页面之后就会在Items中间出现白线。

我试过多种办法，改变ItemContainStyle  改变 ItemTemplate  去除各种Border都不能去掉白线

<GridView x:Name="ReaderGridView" 
              IsItemClickEnabled="False"
              Background="Black"                                 
              SelectionMode="None" 
              IsSwipeEnabled="false"
              ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" >
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid Orientation="Horizontal" GroupPadding="0,0,0,10"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.Template>
                <ControlTemplate TargetType="GridView">
                    <ScrollViewer
                        HorizontalScrollBarVisibility="Auto"
                        VerticalScrollBarVisibility="Auto"
                        ZoomMode="Enabled" 
                        IsZoomChainingEnabled="False" 
                        ZoomSnapPointsType="None"
                        ViewChanged ="ScrollViewer_ViewChanged">
                        <!--<ScrollViewer.RenderTransform>
                            <CompositeTransform SkewY="0" TranslateY="0"/>
                        </ScrollViewer.RenderTransform>-->
                        <ItemsPresenter>
                        </ItemsPresenter>
                    </ScrollViewer>
                </ControlTemplate>
            </GridView.Template>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="White">
                        <Image Source="1.bmp" Width="{Binding RenderWidth}" Height="{Binding RenderHeight}"></Image>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>

        </GridView>

Answer 1

 <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="White">
                        <Image Source="1.bmp" Width="{Binding RenderWidth}" Height="{Binding RenderHeight}"></Image>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>

試這在ItemTemplate加上Margin上下左右皆為-1呢？

Answer 2

感谢你的回复。

之前就已经试过了，没有任何效果。

Answer 3

这个需要重新修改Template了，需要把所有的Margin和Thickness设为0才可以。

我把代码共享给你，略微有点长

<Page
    x:Class="App3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <FontFamily x:Key="ContentControlThemeFontFamily">Segoe WP</FontFamily>
        <x:Double x:Key="ControlContentThemeFontSize">12</x:Double>
        <Thickness x:Key="GridViewItemMargin">0</Thickness>
        <SolidColorBrush x:Key="CheckBoxBackgroundThemeBrush" Color="Transparent"/>
        <x:Double x:Key="CheckBoxBorderThemeThickness">0</x:Double>
        <x:Double x:Key="ListViewItemContentOffsetX">-40.5</x:Double>
        <Thickness x:Key="ListViewItemMultiselectCheckBoxMargin">0,0,0,0</Thickness>
        <Thickness x:Key="GridViewItemMultiselectBorderThickness">0</Thickness>
        <x:Double x:Key="ListViewItemDisabledThemeOpacity">0.4</x:Double>
        <x:Double x:Key="ListViewItemContentTranslateX">40.5</x:Double>
        <x:Double x:Key="ListViewItemReorderHintThemeOffset">32</x:Double>
        <Style x:Key="GridViewItemStyle1" TargetType="GridViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="IsHoldingEnabled" Value="False"/>
            <Setter Property="Margin" Value="{ThemeResource GridViewItemMargin}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewItem">
                        <Border x:Name="OuterContainer" RenderTransformOrigin="0.5,0.5">
                            <Border.RenderTransform>
                                <ScaleTransform x:Name="ContentScaleTransform"/>
                            </Border.RenderTransform>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="Pressed" To="Normal">
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="TiltContainer"/>
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <PointerDownThemeAnimation Storyboard.TargetName="TiltContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckboxPressed">
                                        <Storyboard>
                                            <PointerDownThemeAnimation Storyboard.TargetName="CheckboxTiltContainer"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="{ThemeResource ListViewItemDisabledThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="NormalRectangle">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SelectedBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedGlyph">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DataVirtualizationStates">
                                    <VisualState x:Name="DataAvailable"/>
                                    <VisualState x:Name="DataPlaceholder">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderTextBlock">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderRect">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="MultiSelectStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="ListMultiSelect" GeneratedDuration="0:0:0.15" To="NoMultiSelect"/>
                                        <VisualTransition From="NoMultiSelect" GeneratedDuration="0:0:0.15" To="ListMultiSelect"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="NoMultiSelect"/>
                                    <VisualState x:Name="ListMultiSelect">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="CheckboxContainerTranslateTransform"/>
                                            <DoubleAnimation Duration="0" To="{ThemeResource ListViewItemContentTranslateX}" Storyboard.TargetProperty="X" Storyboard.TargetName="ContentBorderTranslateTransform"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="GridMultiSelect">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ReorderModeStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="ReorderEnabled" GeneratedDuration="00:00:00.2" To="ReorderDisabled"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="ReorderEnabled">
                                        <Storyboard>
                                            <DropTargetItemThemeAnimation Storyboard.TargetName="OuterContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Reorderable">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="ContentScaleTransform">
                                                <LinearDoubleKeyFrame KeyTime="00:00:00.075" Value="1.05"/>
                                                <LinearDoubleKeyFrame KeyTime="00:00:00.2" Value="1.0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="ContentScaleTransform">
                                                <LinearDoubleKeyFrame KeyTime="00:00:00.075" Value="1.05"/>
                                                <LinearDoubleKeyFrame KeyTime="00:00:00.2" Value="1.0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ReorderDisabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ReorderHintStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.2" To="NoReorderHint"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="NoReorderHint"/>
                                    <VisualState x:Name="BottomReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation Direction="Bottom" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Storyboard.TargetName="ReorderHintContent"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="RightReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation Direction="Right" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Storyboard.TargetName="ReorderHintContent"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="TopReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation Direction="Top" ToOffset="0" Storyboard.TargetName="ReorderHintContent"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="LeftReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation Direction="Left" ToOffset="0" Storyboard.TargetName="ReorderHintContent"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="ReorderHintContent" Background="Transparent">
                                <Border x:Name="CheckboxTiltContainer" HorizontalAlignment="Left" Margin="{ThemeResource ListViewItemMultiselectCheckBoxMargin}" VerticalAlignment="Top">
                                    <Border x:Name="CheckboxOuterContainer">
                                        <Border.Clip>
                                            <RectangleGeometry Rect="0,0,25.5,25.5"/>
                                        </Border.Clip>
                                        <Grid x:Name="CheckboxContainer">
                                            <Grid.RenderTransform>
                                                <TranslateTransform x:Name="CheckboxContainerTranslateTransform" X="{ThemeResource ListViewItemContentOffsetX}"/>
                                            </Grid.RenderTransform>
                                            <Rectangle x:Name="NormalRectangle" Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" Height="25.5" Stroke="{ThemeResource CheckBoxBorderThemeBrush}" StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" Width="25.5"/>
                                            <Path x:Name="CheckGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="17" IsHitTestVisible="False" Opacity="0" Stretch="Fill" StrokeThickness="0" StrokeLineJoin="Round" VerticalAlignment="Center" Width="18.5"/>
                                        </Grid>
                                    </Border>
                                </Border>
                                <Border x:Name="ContentContainer">
                                    <Border x:Name="TiltContainer">
                                        <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                            <Border.RenderTransform>
                                                <TranslateTransform x:Name="ContentBorderTranslateTransform"/>
                                            </Border.RenderTransform>
                                            <Grid>
                                                <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                <TextBlock x:Name="PlaceholderTextBlock" AutomationProperties.AccessibilityView="Raw" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg"/>
                                                <Rectangle x:Name="PlaceholderRect" Fill="{ThemeResource GridViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>
                                            </Grid>
                                        </Border>
                                    </Border>
                                </Border>
                                <Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" IsHitTestVisible="False" Opacity="0">
                                    <Grid x:Name="SelectedCheckMark" HorizontalAlignment="Right" Height="34" Opacity="0" VerticalAlignment="Top" Width="34">
                                        <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
                                        <Path x:Name="SelectedGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="14.5" Margin="0,0,0,0" Stretch="Fill" VerticalAlignment="Top" Width="17"/>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid>

        <GridView Margin="74,111,90,158" ItemContainerStyle="{StaticResource GridViewItemStyle1}">
            <GridViewItem Height="50" Width="100" Background="Orange"></GridViewItem>
            <GridViewItem Height="50" Width="100" Background="Orange"></GridViewItem>
            <GridViewItem Height="50" Width="100" Background="Orange"></GridViewItem>
            <GridViewItem Height="50" Width="100" Background="Orange"></GridViewItem>
            <GridViewItem Height="50" Width="100" Background="Orange"></GridViewItem>
            <GridViewItem Height="50" Width="100" Background="Orange"></GridViewItem>
            <GridViewItem Height="50" Width="100" Background="Orange"></GridViewItem>
            <GridViewItem Height="50" Width="100" Background="Orange"></GridViewItem>
        </GridView>

    </Grid>
</Page>

--James

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 4

 感谢您的回复。 但是问题还未解决，我稍微修改了一下您提供的XAML

 <Grid>

        <GridView Margin="0,0,0,0" ItemContainerStyle="{StaticResource GridViewItemStyle1}" ScrollViewer.ZoomMode="Enabled" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Enabled">
            <GridViewItem Height="100" Width="400" Background="Orange"></GridViewItem>
            <GridViewItem Height="100" Width="400" Background="Orange"></GridViewItem>
            <GridViewItem Height="100" Width="400" Background="Orange"></GridViewItem>
            <GridViewItem Height="100" Width="400" Background="Orange"></GridViewItem>
            <GridViewItem Height="100" Width="400" Background="Orange"></GridViewItem>
            <GridViewItem Height="100" Width="400" Background="Orange"></GridViewItem>
            <GridViewItem Height="100" Width="400" Background="Orange"></GridViewItem>
            <GridViewItem Height="100" Width="400" Background="Orange"></GridViewItem>
        </GridView>

    </Grid>

只需要放大缩小一下，线就又出现了。

Answer 5

是的，我也发现这个问题了，如果直观生成的话，不会有线，但是缩放的话，会有线产生。我再看看到底怎么回事。

--James

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 6

这样能基本消除细线，但是Item的高度会被盖掉一个像素，导致我们拼出来的图片失真。 按道理Margin设置为0就不应该出现边界线了，放大缩小之后的线条是如何产生的呢？

 <Style x:Key="GridViewItemStyle1" TargetType="GridViewItem">

            <Setter Property="Margin" Value="0,0,0,-1"/>