Kéo dài Đường dẫn XAML để điền vào phần tử chứa của nó

Question

Tôi có một số ControlTemplate với một số Path s trong đó. Tôi muốn các Path s để kéo dài và điền vào kiểm soát họ đang ở, chẳng hạn như một Button. Tôi có thể làm cái này như thế nào?

Những gì tôi hiện có trông như thế này:

<ControlTemplate x:Key="SomeTemplate" TargetType="Button"> 
    <Canvas Background="AliceBlue"> 
     <Path Data="M 99.5,50 A 49.5,49.5 0 1 1 0.5,50 A 49.5,49.5 0 1 1 99.5,50 z" 
      Fill="White" Stroke="Black" StrokeThickness="1" /> 
     <Path Data="M 15,50 C 17.5,22.5 47.5,22.5 50,50 C 52.5,77.5 82.5,77.5 85,50" 
      Stroke="Black" StrokeThickness="1" /> 
    </Canvas> 
</ControlTemplate> 

... 

<Button Template="{StaticResource SomeTemplate}" Height="120" Width="120" /> 

tôi biết ScaleTransform 'StrechX và StretchY thuộc tính s, nhưng chúng chỉ là tỉ lệ tương ứng của bản gốc Path' kích thước s.

Tôi có sử dụng trình chuyển đổi giá trị không? Hoặc có lẽ một số hình thức liên quan tương đối với kích thước của cha mẹ?

Answer 1

Việc ném Hộp xem xung quanh Canvas trong ví dụ của bạn sẽ hoạt động.

Answer 2

Để kéo dài Đường dẫn, hãy sử dụng thuộc tính Stretch. Nó hoạt động giống như hình ảnh kéo dài - được mô tả ở đây: https://msdn.microsoft.com/en-us/library/system.windows.media.stretch(v=vs.110).aspx (System.Windows.Media> Stretch Enumeration). Trong trường hợp được hiển thị bên dưới, đặt giá trị thành Uniform sẽ giữ nguyên tỷ lệ chiều rộng chiều rộng của đường dẫn làm đầy quyền kiểm soát mà nó chiếm để toàn bộ đường dẫn hiển thị.

<Path Stretch="Uniform" Data="..."/> 

Có một tác dụng phụ: Trải dài một con đường theo cách này sẽ "bình thường hóa" dữ liệu của nó tức là thậm chí nếu các dữ liệu sẽ được viết sao cho tất cả các điểm được chuyển từ nguồn gốc [1], khi căng các chuyển đổi được bỏ qua [2] (hy vọng tôi đang giải thích rõ ràng điều này).

Bạn có thể sử dụng điều này để lợi thế của bạn khi có một đối tượng lộn xộn từ Inkscape chẳng hạn (không chuyển thành nguồn gốc) không đáng lo ngại về dữ liệu được chuyển đổi.

<Grid Width="200" Height="200"> 
    <TextBlock Text="(0,0)" /> 
    <TextBlock Text="(200,200)" VerticalAlignment="Bottom" HorizontalAlignment="Right"/> 
    <Path Stroke="Blue" Stretch="None" Fill="Beige" Data="M 63,50 82,86 107,62 84,65 Z"/> 
    <Rectangle Stroke="Red" StrokeThickness="1"/> 
</Grid> 

<Grid Width="200" Height="200"> 
    <TextBlock Text="(0,0)" /> 
    <TextBlock Text="(200,200)" VerticalAlignment="Bottom" HorizontalAlignment="Right"/> 
    <Path Stroke="Blue" Stretch="Uniform" Fill="Beige" Data="M 63,50 82,86 107,62 84,65 Z"/> 
    <Rectangle Stroke="Red" StrokeThickness="1"/> 
</Grid>