अपने युक्त तत्व को भरने के लिए XAML पथ को खींचना

Question

मेरे पास एस के साथ ControlTemplate है। मैं Path एस को उस नियंत्रण को भरने और भरने के लिए चाहूंगा, जैसे Button। मैं यह कैसे कर सकता हूँ?

क्या मैं वर्तमान में है इस तरह दिखता है:

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

मैं ScaleTransform के बारे में पता कर रहा हूँ के StrechX और StretchY गुण है, लेकिन वे मूल Path का केवल आनुपातिक स्केलिंग हैं के आकार।

क्या मैं एक मूल्य कनवर्टर का उपयोग करूंगा? या शायद माता-पिता के आकार के सापेक्ष बाध्यकारी के कुछ रूप?

Answer 1

कैनवास के आस-पास एक व्यूबॉक्स को फेंकना आपके उदाहरण में काम करना चाहिए।

Answer 2

पथ को खींचने के लिए Stretch संपत्ति का उपयोग करें। यह छवि खींचने की तरह काम करता है - यहां वर्णित: https://msdn.microsoft.com/en-us/library/system.windows.media.stretch(v=vs.110).aspx (System.Windows.Media> स्ट्रेच गणना)। नीचे दिखाए गए मामले में, मान को Uniform पर सेट करना पथ चौड़ाई-ऊंचाई अनुपात को उस नियंत्रण को भरने के लिए संरक्षित करेगा जो पूरे कब्जे में है। एक पथ इस तरह से "सामान्य" होगा अपने डेटा यानी डेटा लिखा जाएगा, भले ही इतना है कि सभी बिंदुओं मूल [1], जब खिंचाव से बदल रहे हैं स्ट्रेचिंग:

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

वहाँ

एक पक्ष प्रभाव है परिवर्तन छोड़ा गया है [2] (उम्मीद है कि मैं इसे स्पष्ट रूप से समझा रहा हूं)।

उदाहरण के लिए इंकस्केप से गन्दा वस्तु होने पर आप अपने लाभ के लिए इसका उपयोग कर सकते हैं (मूल में परिवर्तित नहीं) परिवर्तित डेटा के बारे में चिंता न करें।

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