Question

If you test the code below and any bright image you will see 4 columns and 4 rows painted over the used image. I need this configuration to use for some kind of effect. Basically I made it and it works but these grid lines I would like to remove and do not know how. Is it maybe related to the implementation of the Grid control itself ? Grid's property ShowGridlines is false.

There is a possibility to use the Canvas instead of the grid and do the placement manually but I would like to stay with the Grid and use the Canvas as the last solution.

<Image Source="/Image1.tif" Visibility="Visible" >
        <Image.OpacityMask>
            <VisualBrush x:Name="DissolveInBrush" TileMode="None" >
                <VisualBrush.Visual>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="50" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50" />
                            <RowDefinition Height="50" />
                            <RowDefinition Height="50" />
                            <RowDefinition Height="50" />
                        </Grid.RowDefinitions>
                        <Rectangle Grid.Column="0" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="1" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="2" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="3" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="4" Grid.Row="0" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>

                        <Rectangle Grid.Column="0" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="1" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="2" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="3" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="4" Grid.Row="1" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>

                        <Rectangle Grid.Column="0" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="1" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="2" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="3" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="4" Grid.Row="2" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>

                        <Rectangle Grid.Column="0" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="1" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="2" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="3" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                        <Rectangle Grid.Column="4" Grid.Row="3" Fill="#FF000000" StrokeThickness="0" Stroke="Transparent"/>
                    </Grid>
                </VisualBrush.Visual>
            </VisualBrush>
        </Image.OpacityMask>
    </Image>
Was it helpful?

Solution

You may set the RenderOptions.EdgeMode property to Aliased on the Grid to avoid this effect:

<VisualBrush x:Name="DissolveInBrush" TileMode="None" >
    <VisualBrush.Visual>
        <Grid RenderOptions.EdgeMode="Aliased">
            ...
        </Grid>
    </VisualBrush.Visual>
</VisualBrush>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top