UWP中禁用的GridViewItem背景控件边框泄露显示问题

在UWP开发中，使用GridView展示设备列表时，禁用部分GridViewItem后，背景控件的边框会泄露到视图中，需要让禁用项的前后控件显示效果与未禁用项保持一致。

相关代码实现 #

GridView代码

<GridView x:Name="DeviceTargets"
            ContainerContentChanging="GridViewContainerContentChanging"
            Grid.Row="1"
            x:DeferLoadStrategy="Lazy"
            Visibility="Collapsed"
            Margin="0 14 0 10"
            IsItemClickEnabled="True"
            ItemClick="OnDeviceTargetsItemClicked"
            ItemContainerStyle="{StaticResource GridViewItemStyleSV}"
            ItemsSource="{x:Bind ViewModel.DeviceList, Mode=OneWay}"
            Padding="0"
            SelectionMode="None"
            ScrollViewer.HorizontalScrollMode="Disabled"
            ScrollViewer.VerticalScrollMode="Disabled">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="viewModels:DeviceViewModel">
            <local:DeviceItem ViewModel="{x:Bind}"/>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

DeviceItem控件代码

<Grid Style="{StaticResource ItemRootGridStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    
    <local:BadgedPersonPicture
        x:Name="DeviceBadge"
        Grid.Row="0"
        Contact="{x:Bind ViewModel.DeviceContact, Mode=OneWay}" 
        BadgeImageSource="{x:Bind ViewModel.DeviceBadgeImage, Mode=OneWay}" />

    <local:TwoLinesTextBlock
        x:Name="DeviceName"
        Grid.Row="1"
        Text="{x:Bind ViewModel.DeviceDisplayName, Mode=OneWay}" />
</Grid>

BadgedPersonPicture控件代码

<Grid Width="64">
    <PersonPicture
        Width="48"
        Height="48"
        HorizontalAlignment="Center"
        Contact="{x:Bind Contact, Mode=OneWay}"
        ProfilePicture="{x:Bind ProfilePicture, Mode=OneWay}" />
    <Ellipse Width="23" Height="23" StrokeThickness="1" Fill="{ThemeResource PersonBadgeBackgroundBrush}"
        HorizontalAlignment="Right" VerticalAlignment="Bottom" />
    <Ellipse Width="23" Height="23" StrokeThickness="1" Stroke="{ThemeResource PersonBadgeBorderBrush}"
        HorizontalAlignment="Right" VerticalAlignment="Bottom">
        <Ellipse.Fill>
            <ImageBrush ImageSource="{x:Bind BadgeImageSource, Mode=OneWay}" Stretch="None"></ImageBrush>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

修复方案 #

禁用项边框泄露通常是因为容器未正确裁剪内容，或控件超出了容器边界，可通过以下方式解决：

• 为GridViewItem容器添加裁剪
  修改GridViewItemStyleSV样式，在容器根元素开启ClipToBounds，确保超出容器的内容被裁剪：

  <Style x:Key="GridViewItemStyleSV" TargetType="GridViewItem">
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="GridViewItem">
                  <Grid x:Name="ContentContainer" ClipToBounds="True">
                      <!-- 原有模板内容 -->
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>
  

• 调整BadgedPersonPicture的布局边界
  当前徽章控件的Ellipse可能超出了GridViewItem的显示范围，可通过添加内边距限制控件边界：

  <Grid Width="64" Padding="0 0 8 8">
      <!-- 原有控件内容 -->
  </Grid>
  

• 统一禁用状态的样式约束
  在GridViewItemStyleSV的Disabled视觉状态中，设置与正常状态一致的Margin、Padding、ClipToBounds等属性，避免状态切换导致容器尺寸变化。

内容的提问来源于stack exchange，提问作者rsp