代码之家  ›  专栏  ›  技术社区  ›  sourcenouveau

拉伸XAML路径以填充其包含元素

  •  6
  • sourcenouveau  · 技术社区  · 15 年前

    我有一个 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 属性,但它们只是原始属性的比例缩放 这是我的尺寸。

    我会使用值转换器吗?或者可能是某种形式的相对绑定到父对象的大小?

    2 回复  |  直到 15 年前
        1
  •  11
  •   Bryan Anderson    15 年前

    在您的示例中,在画布周围抛出一个ViewBox应该是可行的。

        2
  •  5
  •   q23main    9 年前

    要拉伸路径,请使用 Stretch 所有物其工作原理与图像拉伸类似-如下所述: https://msdn.microsoft.com/en-us/library/system.windows.media.stretch(v=vs.110).aspx (System.Windows.Media>拉伸枚举)。在如下所示的情况下,将值设置为 Uniform 将保留填充其所占用控件的路径宽高比,以便整个路径可见。

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

    还有一个副作用:以这种方式拉伸路径将“规范化”其数据,即即使写入数据,以便从原点变换所有点[ 1 ],则忽略拉伸变换[ 2 ](希望我能解释清楚)。

    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>