2009-07-16 12 views
6

ControlTemplateにはPathが含まれています。 は、Buttonのように、それらが入っているコントロールを伸ばして塗りつぶしたいと思います。これどうやってするの?XAMLパスを伸ばしてその要素を埋め込む

<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を認識していのStrechXStretchY属性が、彼らは、元Pathの唯一の比例スケーリングされているのサイズ:

は、私が現在持っていることは、このようになります。

私はバリューコンバータを使用しますか?あるいは、おそらく親のサイズに対する相対的な束縛の何らかの形ですか?

答えて

11

例のキャンバスの周りにViewBoxを投げると効果があります。

+0

、感謝します。 –

+1

これは素晴らしいです、私のために働いた。キャンバスやパスの周りにViewBoxを投げることで、パスが伸びていないという事実が解決された理由を理解しておきたいと思います。 –

+2

まあ、基本的には、それは 'Viewbox'のためです。 :-)コンテナのサイズに固有のサイズ( 'Path'や' Canvas'のような)を持つものを伸ばします。 –

5

パスを伸ばすには、Stretchプロパティを使用します。これは画像の伸縮と同様に動作します。https://msdn.microsoft.com/en-us/library/system.windows.media.stretch(v=vs.110).aspx(System.Windows.Media> Stretch Enumeration)。以下に示す例では、値をUniformに設定すると、パス幅と高さの比率が保持され、パス全体が表示されるように占有するコントロールが満たされます。

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

副作用があります。パスを伸ばすすべてのポイントを原点から変換されているように、この方法はストレッチするとき、[1]のデータが書き込まれる場合でも、つまりそのデータを「正常化」します変換は省略されています[2](私はこれをはっきりと説明してくれることを願っています)。

たとえば、変換されたデータを気にせずに、Inkscapeの乱雑なオブジェクト(原点に変換されていない)がある場合には、これを利用できます。

Stretch="none" (default) - same as not using this property. Notice the data not having single point in the origin

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

Stretch="Uniform"

<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> 
私がまさに必要
+0

このコードは質問に答えるかもしれませんが、どのように問題を解決し、なぜそれを使用するのかを説明する方が良いでしょう。コードのみの回答は長期的には有用ではありません。 –

関連する問題