Draw a cross in WPF

问题:

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?

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

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

回答3:

The answer of Matt Burland made my app constantly blinking (cause I suppose the reference to 'parent' resized it ... and then resized the lines, etc ...)

So I used Stretch=Fill and suppressed the reference to 'parent'. Works pretty fine now.

<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 mix from this solution and this one

回答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 wonder where the x and y values come, just draw out Cartesian coordinates and plug in

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

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

put the label after/below the Line elements in XAML, that will make it draw over the lines