Draw a cross in WPF

Question

I have a WPF Control.

I need to have in background a cross, like this:

After that, I'd be able to add other controls over my "crossed" background:

How should I draw the cross, knowing that when I rezize the control, the cross should follow its size?

Answer 1

Quick and dirty way is to use lines and bind their coordinates to the width and height of some parent container. Something like this:

<Grid Name="parent">
    <Line  X1="0" Y1="0" X2="{Binding ElementName='parent', Path='ActualWidth'}" Y2="{Binding ElementName='parent', Path='ActualHeight'}" 
           Stroke="Black" StrokeThickness="4" />
    <Line  X1="0" Y1="{Binding ElementName='parent', Path='ActualHeight'}" X2="{Binding ElementName='parent', Path='ActualWidth'}" Y2="0" Stroke="Black" StrokeThickness="4" />
</Grid>

Using a grid as the parent means any other children added to the grid after the lines will appear on top of the lines:

<Grid Name="parent">
    <Line  X1="0" Y1="0" X2="{Binding ElementName='parent', Path='ActualWidth'}" Y2="{Binding ElementName='parent', Path='ActualHeight'}" 
           Stroke="Black" StrokeThickness="4" />
    <Line  X1="0" Y1="{Binding ElementName='parent', Path='ActualHeight'}" X2="{Binding ElementName='parent', Path='ActualWidth'}" Y2="0" Stroke="Black" StrokeThickness="4" />
    <Label Background="Red" VerticalAlignment="Center" HorizontalAlignment="Center">My Label</Label>
</Grid>

Answer 2

Another way to solve this is to just put everything in a Viewbox and use Stretch="fill". It will handle re-sizing for you while maintaining the proper proportions. You won't need to use databinding in this case.

<Grid  HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" >
    <Viewbox HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Stretch="Fill">
        <Grid>
            <Line  X1="0" Y1="0" X2="100" Y2="100" Stroke="Black" StrokeThickness="1" />
            <Line  X1="0" Y1="100" X2="100" Y2="0" Stroke="Black" StrokeThickness="1" />
        </Grid>
    </Viewbox>
    <Label Background="Red" VerticalAlignment="Center" HorizontalAlignment="Center">My Label</Label>
</Grid>

Answer 3

Rather than creating two elements for the layout engine, you can use a single Path item:

<Path Data="M0,0L16,16M16,0L0,16" Stroke="Black" />

This is a 16x16 "X" symbol:

You can specify a different size in the Data element, or use a ViewBox to scale it to its parent size if needed.

Note that the line ends are square, and slightly extend beyond the 16x16 square:

If you want the box to be exactly 16x16, you can set Width="16" Height="16" on the Path, which clips the line ends: