UWP Xaml disabled GridViewItem background control leaking into view

Question

I have following Xaml

<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 control:

<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 control :

<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>

When I disable some of the GridViewItem, it shows as following

As you can in red box, border from the control in the background is leaking into view. Any idea how I can make it look like the one that is not disabled as far as controls in the front and back are concerned?

Note: text under the image is intentionally obfuscated.

Update: Attaching the badge image for reference.

Answer 1

I've checked this and talked with the team about this. A possible reason is that when you disable the item, it gets a transparent filter on it which will change how it looks like. This behavior is by design.

After discussion, if you want to avoid this behavior, the possible solution is to manually create style which looks like the item is disabled. Apply the style to the item instead of disabling the item.