ItemsControl - Can't remove gaps

[Grim-Reaper-13]

Hello, hoping someone might be able to help. I have a pretty standard ItemsControl where I show a list of items. Each item has three label controls within a horizontal stackpanel. It functionally works great but a gap is left all around each label control, allowing the parent container's background color to slightly bleed through. I have ensured the labels and stackpanel have no margin or padding but still the parent's background color shows. Just can't get the labels to take the full space. I can't trick the background color of the parent to be the same as each label or stackpanel color because each row/label might have a different background color. Searched all over the place and the common answer was to remove margin/padding, which has no effect. I also tried using a -1 margin, which actually removed the gaps correctly but the text within the label was then cut off and became off centered. If I could have the text autosize within the -1 margin and not move it from center and not have text cut off, this would be acceptable solution too.

Thoughts? Thanks in advance

[stevemonaco]

Any screenshot/XAML for context?

[robloo]

You need to style the ItemContainer to remove the default padding

[Grim-Reaper-13]

You need to style the ItemContainer to remove the default padding

Is there any example how to do that? Thought I tried padding all comments of the itemscontrol without luck, but maybe doing wrong. Tried searching for an example myself but couldn’t find . Thanks.

[Grim-Reaper-13]

Here is example code which might illustrate the issue. Really basic. With this code, you can see the very thin bleed from background between the items. I am so puzzled as to what is causing it, so hopefully obvious to someone else.

<ItemsControl.Items>
	<TextBlock Text="Label 1" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White" Foreground="Black" />
	<TextBlock Text="Label 2" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White" Foreground="Black"   />
	<TextBlock Text="Label 3" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White" Foreground="Black"  />
</ItemsControl.Items>

<ItemsControl.Styles>
	<Style Selector="ItemsControl ContentPresenter">
		<Setter Property="Margin" Value="0" />
	</Style>
</ItemsControl.Styles>

[stevemonaco]

I can't seem to repro in a fresh app. Are you using UseLayoutRounding="False"? That could throw it off (with blending for fractional coverage). Also I assume this is in the real app and not the previewer.

[Grim-Reaper-13]

I can't seem to repro in a fresh app. Are you using UseLayoutRounding="False"? That could throw it off (with blending for fractional coverage). Also I assume this is in the real app and not the previewer.

Thanks. For sure running as app and confirmed don't have that setting. However, what I did notice, I have an overall viewbox for the control where the itemscontrol resides within it, if I remove that the spacing goes away so must be something with that. I do want to use the viewbox so not sure what I can do to have it work with everything else. Not sure if there are certain settings that allows the scaling but doesn't make the gaps.

[Grim-Reaper-13]

Turns out this is not specific to itemscontrol, it’s all controls. Anytime within a view box, appears somehow creates the gaps. When view box removed, looks right…tried messing with view box settings but nothing seemed to work…I must be missing something obvious otherwise I suspect others would have seen this. I’ll keep looking:)

[stevemonaco]

Could be a rendering bug when scaling is involved. Generally, you don't want to rely upon the background of individual items being perfectly aligned for the overall background to appear continuous. Instead of setting the Background on each item, set it on the parent container (the ItemsControl or StackPanel / WrapPanel being used as an ItemsPanel) instead if possible.

[Grim-Reaper-13]

Thank you, really appreciate the help your providing. I have tried to change the background of the parent container but I think my specific needs of changing the background color won't work doing it that way. Let me explain.

I have three label controls that show different values for each item in the ItemsControl. Each label has the possibility of having it's own background color. So if I wrap all three labels into a stackpanel and set the background on the stackpanel, it wouldn't allow each label to have it's own background color. I tried creating a stackpanel for each label and not surprisingly, ended up with the same situation because there is a gap between each of the stackpanels. If I didn't have the requirement to have a different background color for each label, I do believe setting the single color on a single stackpanel likely would work.

I just might be out of luck, just surprised this isn't easier to do because on paper all I am trying to do is have no gaps when using ViewBox.

[stevemonaco]

WPF exhibits the same behavior, so I don't think it's a bug. Only a design limitation.

I got it working with a bit of a workaround, but the approach isn't going to transfer to other controls, I think:

<TextBlock
	HorizontalAlignment="Center"
	VerticalAlignment="Center"
	Background="White"
	Foreground="Black"
	RenderOptions.EdgeMode="Aliased"
	RenderOptions.TextRenderingMode="SubpixelAntialias"
	Text="Label 1" />

Basically, if the Background is drawn as aliased, then it will hit the edge. Then you need to specify that the text itself is drawn antialiased so it doesn't look terrible.

I originally tried a Border as a container to draw the BG which worked. I didn't seem to be able to turn back on antialiasing for TextBlock children with only EdgeMode though, but I didn't test much.

[Grim-Reaper-13]

Thank you, I will give that a try and see if something that will work for me. Appreciate all the help!

[Grim-Reaper-13]

I could not find those render options on Avalonia controls, unless just missing them.

[stevemonaco]

I could not find those render options on Avalonia controls, unless just missing them.

They're not shown by IntelliSense because they aren't AvaloniaProperty. They work a bit differently, too. You just need to YOLO and build. They apply settings to the renderer and they're scoped to affect children, so you might be able to set them on a common parent instead of every child.

[Grim-Reaper-13]

Thank you for clarifying, haven’t had a chance to try the different background colors but I applied those values to my viewbox and it cleaned up bleeding between some of my controls so promising