Draw a cross in WPF

Question

I have a WPF control.

I need to have a cross in the background, for example:

After that I can add other controls over my “crossed” background:

How should I draw a cross, knowing that when I adjust the control, the cross must fit its size?

Answer 1

A quick and dirty way is to use the lines and associate their coordinates with the width and height of some parent container. Something like that:

<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 a parent means that other children are added to the grid after the lines 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 simply put everything in the Viewbox and use Stretch="fill" . It will handle the changes for you, while maintaining the right proportions. In this case, you do not need to use data binding.

 <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

Matt Burland's answer made my application blink constantly (because I believe the “parent” link changed its size ... and then changed the size of the lines, etc.)

So, I used Stretch = Fill and suppressed the link to "parent". Now it works very well.

 <Line x:Name="Line1" Visibility="Hidden" Stroke="Red" StrokeThickness="2" Stretch="Fill" X1="0" Y1="0" X2="1" Y2="1" /> <Line x:Name="Line2" Visibility="Hidden" Stroke="Red" StrokeThickness="2" Stretch="Fill" X1="0" Y1="1" X2="1" Y2="0" /> 

This is a combination of this solution, and one

Answer 4

  <Line X1="10" Y1="10" X2="50" Y2="50" Stroke="Black" StrokeThickness="4" /> <Line X1="10" Y1="50" X2="50" Y2="10" Stroke="Black" StrokeThickness="4" /> 

if you are wondering where the x and y values ​​come in, just stretch the Cartesian coordinates and connect

 line 1 - point 1:(10,10), point 2:(50,50) line 2 - point 1:(10,50), point 2:(50,10) 

ref on the figures http://msdn.microsoft.com/en-us/library/ms747393.aspx

place the label after / below the Line elements in XAML, which will make it draw along the lines