Растяжение пути XAML для заполнения содержащего его элемента

Question

У меня есть ControlTemplate с некоторыми Path с. Я бы хотел, чтобы Path s растягивались и заполняли элемент управления, в котором они находятся, например 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

Бросок ViewBox вокруг Canvas в вашем примере должен работать.

Answer 2

Чтобы растянуть путь, используйте свойство 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 ], когда stretch, преобразование опущено [ 2 ] (надеюсь, я объясню это ясно).

Вы можете использовать это в своих интересах, когда имеете грязный объект из Inkscape, например (не преобразованный в источник), не беспокоясь о преобразованных данных.

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