XAML can't remove border from rectangle

Question

I'm trying to build a chat bubble type of conversation window in xaml/C#.

However, I'm unable to remove the grey border from my rectangle as seen in this screenshot. It should just be white between the rectangle and the triangle.

Here's the coding drawing one of the bubbles:

<Grid Margin="30, 10, 5, 0"
                  local:GridUtils.RowDefinitions=",,">
            <Rectangle Fill="White"
                       Grid.RowSpan="2"/>
            <TextBox Text="{Binding Path=Text}"
                         Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Text="{Binding Path=Timestamp, Converter={StaticResource StringFormatConverter}, ConverterParameter='ddd, HH:mm'}"
                         Style="{StaticResource TimestampStyle}"
                         Grid.Row="1"/>
            <Path Data="m 0,0 l 16,0 l 0,16 l -16,-16"
                    Fill="White"
                    Margin="0,0,5,0"
                    HorizontalAlignment="Right"
                    Grid.Row="2"/>
</Grid>

I've tried the following:

Using stroke/strokethickness with white as the color
Removing gridlines
Changing the z-order

Google only seems to give hints about creating the border, not removing it. There's nothing in my code that should be doing this, could it be the Windows theme?

As a reference, here's a screenshot of the same code but with <Rectangle Fill="Red">.

Remove the style from TextBlock. I tested your XAML without styles and it doesn't show that line you have. — BlueM

GazTheDestroyer GazTheDestroyer · Accepted Answer · 2014-03-17T15:57:42

I've just reproduced here. Your triangle is slightly too low to connect with the rectangle properly, so the gray line you are seeing is WPF's anti-aliasing between the white triangle and the black background. You can fix by nudging the triangle up slightly with a negative margin:

<Path Data="m 0,0 l 16,0 l 0,16 l -16,-16"
                    Fill="White"
                    Margin="0,-1,5,0"           
                    HorizontalAlignment="Right"
                    Grid.Row="2"/>

Or turning off antialising on the Path via RenderOptions.EdgeMode="Aliased" if you don't mind aliasing.

XAML can't remove border from rectangle

1 Answers