2012-04-13 14 views
6

Ho un controllo WPF.Disegna una croce in WPF

ho bisogno di avere in fondo una croce, come questo:
enter image description here

Dopo di che, io sarei in grado di aggiungere altri controlli sopra la mia "incrociato" background: enter image description here

Come dovrebbe Traggo la croce, sapendo che quando ridimensionerò il controllo, la croce dovrebbe seguire le sue dimensioni?

risposta

11

modo rapido e sporco è quello di utilizzare le linee e associare le loro coordinate alla larghezza th e altezza di un contenitore genitore. Qualcosa di simile a questo:

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

Utilizzando una griglia come mezzo il genitore eventuali altri figli aggiunti alla griglia dopo le linee apparirà sulla parte superiore delle linee:

<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 per l'attenzione ai dettagli :) –

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

se vi chiedete dove il valori xey vengono, basta tirare fuori coordinate cartesiane e collegare

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

rif su forme http://msdn.microsoft.com/en-us/library/ms747393.aspx

mettere sull'etichetta dopo/al di sotto della linea elementi in XAML, che lo fanno disegnare sulle linee

+1

BTW, ho appena notato il tuo nome, io sono originario di Chisinau, piccolo mondo, in ogni caso, spero che questo è una buona partenza –

+1

non viene ridimensionato. –

+1

bah, è giusto dimenticarlo, lo aggiungerò tra un po ', –

5

Un altro modo per risolvere questo è quello di basta mettere tutto in un Viewbox e utilizzare Stretch="fill". Gestirà il ridimensionamento per te mantenendo le giuste proporzioni. In questo caso non sarà necessario utilizzare l'associazione dati.

<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 cui prestare attenzione con l'utilizzo del ViewBox è che ingrandirà anche lo spessore delle linee (ad esempio quando ridimensionate la finestra, le linee diventeranno più spesse). Indipendentemente dal fatto che sia desiderabile, è una domanda separata. –

+0

@ MattBurland È vero. Grazie per averlo menzionato. –

1

La risposta di Matt Burland ha reso la mia app costantemente lampeggiante (causa suppongo il riferimento al 'genitore' ridimensionata ... e poi ridimensionato le righe, ecc ...)

quindi ho usato Stira = Riempi e sopprime il riferimento a 'genitore'. Funziona abbastanza bene ora.

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

Questo è un mix da questa soluzione e questo one