Grid line in WPF canvas

Question

Referring to this question I tried to use grid lines for my user control. At design time the control looks good, but when I try to insert the component into my main window all the grid lines are gone away and instead there is that ugly gray corner:

<UserControl x:Class="mx_sachdaten.View.FormWorkspaceView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" Loaded="FormWorkspaceView_Loaded"
         d:DesignHeight="400" d:DesignWidth="400">
    <UserControl.Resources>
        <DrawingBrush x:Key="FormCanvasGridTile" Stretch="None" TileMode="Tile" 
                  Viewport="0,0,30,30" ViewportUnits="Absolute">
            <DrawingBrush.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                            <LineGeometry StartPoint="0,0" EndPoint="30,0" />
                            <LineGeometry StartPoint="30,0" EndPoint="30,30" />
                            <LineGeometry StartPoint="30,30" EndPoint="0,30" />
                            <LineGeometry StartPoint="0,30" EndPoint="0,0" />
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                    <GeometryDrawing.Pen>
                        <Pen Thickness="1" Brush="LightGray" />
                    </GeometryDrawing.Pen>
                    <GeometryDrawing.Brush>White</GeometryDrawing.Brush>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Canvas Grid.Column="0" x:Name="FormCanvas" Background="{StaticResource FormCanvasGridTile}"
            MouseLeftButtonDown="FormCanvas_MouseLeftButtonDown" VerticalAlignment="Stretch"
            HorizontalAlignment="Stretch" />
        <ToolBarTray Grid.Column="1" Orientation="Vertical">
            <ToolBar Band="1">
                <Button Content="Label" HorizontalAlignment="Right" />
                <Button Content="TextBox" HorizontalAlignment="Right" />
                <Button Content="Button" HorizontalAlignment="Right" />
            </ToolBar>
        </ToolBarTray>
    </Grid>
</UserControl>

Result of this: User control preview

And this is how it looks like on my main window: Main window

Do you have any idea why my background tile isn't working properly when embedding the user control into my window?

Answer 1

Try this:

<Border>
    <Border.Background>
        <VisualBrush TileMode="Tile"
            Viewport="0,0,50,50" ViewportUnits="Absolute" 
            Viewbox="0,0,50,50" ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Rectangle Stroke="Darkgray" StrokeThickness="1" Height="50" Width="50"
                StrokeDashArray="5 3"/>
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.Background>
</Border>