einen XAML-Pfad Dehnen des darin enthaltenen Element zu füllen

Question

Ich habe eine ControlTemplate mit einigen Paths drin. Ich würde die Paths gerne die Kontrolle, die sie in, wie ein Button sind strecken und zu füllen. Wie kann ich das tun?

Was ich habe, sieht derzeit wie folgt aus:

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

Ich bin mir dessen bewusst ScaleTransform der StrechX und StretchY Attribute, aber sie sind nur proportionale Skalierung der Größe des ursprünglichen Path.

Würde ich verwenden, um einen Wert Konverter? Oder vielleicht eine Form der relativen Bindung an die Größe der Eltern?

Answer 1

Werfen einen ViewBox um die Leinwand in Ihrem Beispiel sollte funktionieren.

Answer 2

ein Pfad dehnen, um die Stretch Eigenschaft verwenden. Es funktioniert genau wie Bild Stretching - hier beschrieben: https://msdn.microsoft.com/en-us/library/system.windows.media.stretch (v = vs.110) ASPX- (System.Windows.Media> Stretch Enumeration) . In dem Fall, unten gezeigt, wird den Wert Einstellung wird erhalten Breitenhöhenverhältnis des Pfades Uniform die Steuer Füllung, die sie einnimmt, so dass der gesamte Pfad sichtbar ist.

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

Es gibt einen Nebeneffekt: Dehnen Sie einen Pfad auf diese Weise wird „normalisieren“ seine Daten also auch dann, wenn die Daten geschrieben werden würden, so dass alle Punkte vom Ursprung transformiert werden [ 1 ], wenn dehnbar die Transformation [ 2 ] (hoffe, ich bin erklärt dies deutlich).

Sie können dies zu Ihrem Vorteile nutzen, wenn ein schmutziges Objekt von Inkscape zum Beispiel (nicht auf den Ursprung transformiert) nicht über die transformierten Daten besorgniserregend.

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