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