Search code examples
.netxamlwindows-runtimewindows-store-appswindows-store

How to remove gap between Grid columns in XAML (Windows Store app)

I'm building a UI in XAML for a Windows Store app; it uses two background graphics in adjacent columns. The XAML is as follows:

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="11" />
            </Grid.ColumnDefinitions>
            <Image Source="/Assets/stop-title-background-strip.png" Stretch="Fill" />
            <Image Grid.Column="1" Source="/Assets/routes-chevron.png" Stretch="Fill" />
            <TextBlock Text="Available Routes" />
        </Grid>

However, when this is rendered, there is an obvious tiny gap between the columns:

enter image description here

I've tried setting the UseLayoutRounding attribute of the Grid and Image elements to "true" (and false) but this doesn't fix the problem.

How can I stop this gap appearing?

Solution

  • You would need to use negative values for one or more of your images. Normally it is not recommended, but this seems like a good enough exception. You'd need to do something like

    <Image
    Source="/Assets/stop-title-background-strip.png"
    Stretch="Fill" />
<Image
    Grid.Column="1"
    Source="/Assets/routes-chevron.png"
    Stretch="Fill"
    Margin="-20,0,0,0" />

    or

    <Image
    Source="/Assets/stop-title-background-strip.png"
    Stretch="Fill"
    Margin="0,0,-20,0" />
<Image
    Grid.Column="1"
    Source="/Assets/routes-chevron.png"
    Stretch="Fill" />