Làm thế nào để cắt bớt quy mô hình học với mục tiêu?

Question

Trong ví dụ sau khi thay đổi kích thước lưới, kích thước vùng cắt vẫn như được thể hiện trong tọa độ tuyệt đối.

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

Có thể bằng cách nào đó để cắt khu vực sao cho hình cắt bớt được chia tỷ lệ cùng với đối tượng cắt bớt không?

Các giải pháp mã phía sau không được chấp nhận, vì điều này sẽ được sử dụng trong mẫu kiểm soát. Ngoài ra, khu vực trong ví dụ là một hình dạng đơn giản vì lợi ích rõ ràng. Vùng được sử dụng thực tế là một hình dạng phức tạp và không đối xứng.

EDIT:

Có vẻ như tôi phải cụ thể hơn. Đây là một phần của mẫu điều khiển tùy chỉnh cho ProgressBar. Khi mở rộng lưới ngoài, hình chữ nhật PART_Indicator không mở rộng vùng cắt của nó. Thành phần chính xác là khi lưới có kích thước 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> 

CẬP NHẬT: Rick cung cấp đề xuất tuyệt vời, mặc dù tôi mất thời gian để hiểu cách sử dụng. Đây là mã cuối cùng.

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

Answer 1

Đặt Grid bên trong một Viewbox và thay đổi kích thước của Viewbox thay vì Grid.

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

Answer 2

Một cách tiếp cận thay thế cho điều này là để xác định con đường clipping sử dụng yếu tố chứ không phải là cú pháp thuộc tính, và sau đó sử dụng sự chuyển đổi tương tự trên clip như bạn áp dụng cho nguyên tố này như một toàn thể, ví dụ:

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