2012-04-13 12 views
6

Tengo un control WPF.Dibuje una cruz en WPF

necesito tener en el fondo de una cruz, así:
enter image description here

Después de eso, me gustaría ser capaz de añadir otros controles sobre mi "cruzado" de fondo: enter image description here

¿Cómo debe Dibujé la cruz, sabiendo que cuando rediseñé el control, ¿la cruz debería seguir su tamaño?

Respuesta

11

La manera rápida y sucia es usar líneas y unir sus coordenadas a la wid th y altura de algún contenedor principal. Algo como esto:

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

El uso de una rejilla que significa que el padre de cualquier otro niño añaden a la red después de que las líneas van a aparecer en la parte superior de las líneas:

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

+1 por la atención al detalle :) –

0
<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" /> 

si usted se pregunta donde los valores X y están, simplemente sacan coordenadas cartesianas y enchufe

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

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

ponen la etiqueta después de/por debajo de la línea de elementos en XAML, que harán que dibuje sobre las líneas

+1

Por cierto, me he dado cuenta de su nombre, soy originaria de Chisinau, pequeño mundo, de todos modos, espero que esto le ayudará a comenzar –

+1

no cambia de tamaño. –

+1

bah, eso es correcto se olvidó de eso, lo agregaré en un poco –

5

Otra manera de resolver esto es simplemente ponga todo en Viewbox y use Stretch="fill". Se encargará de redimensionar para usted manteniendo las proporciones adecuadas. No necesitará usar enlace de datos en este caso.

<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

Una cosa a tener en cuenta con el uso del ViewBox es que también ampliará el grosor de las líneas (es decir, al cambiar el tamaño de la ventana, las líneas se harán más gruesas). Si esto es deseable o no, es una pregunta aparte. –

+0

@MattBurland Eso es verdad. Gracias por mencionarlo. –

1

La respuesta de Matt Burland hizo que mi aplicación constantemente parpadeando (porque yo supongo que la referencia a 'padre' redimensionado que ... y luego cambiar el tamaño de las líneas, etc ...)

Así que he usado Stretch = Fill y suprimió la referencia a 'parent'. Funciona bastante bien ahora.

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

Ésta es una mezcla de esta solución y esta one