2011-05-10 9 views
5

En el siguiente ejemplo cada vez que se cambia el tamaño de la cuadrícula, el tamaño de la región de recorte permanece tal como se expresa en coordenadas absolutas.¿Cómo hacer que la geometría de recorte se escale con el objetivo?

<Grid Clip="M10,10 L10,150 L150,150 L150,10 Z"> 
    <Rectangle Fill="Red"/> 
</Grid> 

Is es posible de alguna manera para recortar la región de tal manera que la geometría de recorte se escala junto con el objeto recortado?

No se aceptan códigos detrás de las soluciones, porque esto se va a utilizar en la plantilla de control. Además, la región en el ejemplo es una forma simple para mayor claridad. La región utilizada real es una forma compleja y asimétrica.

EDIT:

Parece que tengo que ser más específico. Este es el recorte que es parte de la plantilla de control personalizado para ProgressBar. Al escalar la cuadrícula exterior, el rectángulo PART_Indicator no escala su región de recorte. La composición correcta es cuando la cuadrícula tiene un tamaño de 200x200.

<Grid> 
    <Path Name="PART_Track" 
      Data="M100,0 A100,100 0 1 0 100,200 A100,100 0 1 0 100,0 Z" 
      Fill="AliceBlue" Stretch="Fill"/> 

    <Rectangle Clip="M100,0 A100,100 0 1 0 100,200 A100,100 0 1 0 100,0 Z" 
       Stretch="Fill" 
       Name="PART_Indicator" Fill="Red" 
       Height="100" VerticalAlignment="Top"/> 

    <Path Name="Border" Data="M100,0 A100,100 0 1 0 100,200 A100,100 0 1 0 100,0 Z" 
      Stretch="Fill" StrokeThickness="3" Stroke="Black"/> 
</Grid> 

ACTUALIZACIÓN: Rick proporciona una excelente sugerencia, aunque se tomó el tiempo para mí entender cómo usarlo. Aquí está el código final.

<Viewbox StretchDirection="Both" Stretch="Fill" > 
    <Grid> 
     <Path Name="PART_Track" 
       Data="M100,0 A100,100 0 1 0 100,200 A100,100 0 1 0 100,0 Z" 
       Fill="AliceBlue" Stretch="Fill"/> 

     <Border Clip="M100,0 A100,100 0 1 0 100,200 A100,100 0 1 0 100,0 Z" 
       Height="200" VerticalAlignment="Bottom"> 
      <Rectangle Name="PART_Indicator" Fill="Red" VerticalAlignment="Bottom" 
         Height="40"/> 
     </Border> 

     <Path Name="Border" 
       Data="M100,0 A100,100 0 1 0 100,200 A100,100 0 1 0 100,0 Z" 
       StrokeThickness="3" 
       Stretch="Fill" Stroke="Black"/> 
    </Grid> 
</Viewbox> 
+0

Esto plantea la pregunta: ¿cuál es la escala inicial? Una grilla puede comenzar siendo cualquier tamaño basado en la pantalla, etc. pero una geometría tiene un tamaño fijo. Se debe establecer una escala inicial. En ese punto, escribiría un panel personalizado heredando de la grilla, agregando un dep. apuntalar. para la escala inicial, y llamadas de gancho para organizar; no hay "código detrás", sino un control personalizado. –

+0

Sí, me di cuenta de eso, de la escala, ahora. Cuadrícula reemplazada con rectángulo con estiramiento = intento de relleno para lograr el mismo efecto que Path Stretch = Fill does. No ayudó sin embargo. La solución que estoy buscando es usar plantillas de control, no cómo escribir controles personalizados. – AlexK

Respuesta

3

Coloque el Grid en el interior de un Viewbox y cambiar el tamaño de la Viewbox en lugar de la Grid.

<Viewbox> 
    <Grid Clip="M10,10 L10,150 L150,150 L150,10 Z" Width="200" Height="200"> 
     <Rectangle Fill="Red"/> 
    </Grid> 
</Viewbox> 
+0

Viewbox no parece escalar la grilla. De hecho, no lo muestra en absoluto. Snooping muestra que Viewbox.RenderSize == 0,0. Además, ¿no está seguro de cómo cambiar el tamaño de Viewbox ayuda? – AlexK

+0

Parece que tiene algún tamaño en mente para la cuadrícula cuando lo recorta. Establezca el 'Grid.Width' y' Grid.Height' a ese tamaño. Entonces la vista sabrá qué tan grande es. –

1

Un enfoque alternativo para esto es definir el trazado de recorte utilizando el elemento en lugar de sintaxis de atributo, y luego usar la misma transformación de la cinta como se aplica al elemento en su conjunto, por ejemplo:

<Grid.Clip> 
    <PathGeometry FillRule="Nonzero" Transform="{Binding Path=MatrixTransform, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"> 
     <PathFigure StartPoint="715, 96.3333" IsClosed="True" IsFilled="True"> 
      <PolyLineSegment IsStroked="False"> 
       <PolyLineSegment.Points> 
        <Point X="1255.2526" Y="540" /> 
        <Point X="426.3333" Y="1342.3333" /> 
        <Point X="64.66666" Y="7356.6666" /> 
       </PolyLineSegment.Points> 
      </PolyLineSegment> 
     </PathFigure> 
    </PathGeometry> 
</Grid.Clip> 
Cuestiones relacionadas