WPF：在WPF中使用設計的矢量圖像作爲控件模板

Question

我正在探索在我的WPF應用程序中使用專業設計的矢量圖像作爲ControlTemplates的想法。這個想法是製作幾種類型的控件，每種都有不同的視覺設計，然後可以拖放它們。這與視覺設計師（a'la visio）完全相同的用例

我有以下XAML。它定義了一個帶有目標類型Button的控件模板，並且我有一個使用此模板的Button。我想知道的是，我如何修改此模板，以便它只使用Button的高度和寬度。在我看來，如果模板呈現自己相對於按鈕的左上角（如果我移動按鈕的圖像移動），但它不考慮按鈕的尺寸，所以它保持其「設計」的大小不管我做什麼。

<Window x:Class="Euphrosyne.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="Window1" Height="300" Width="300"> 
<Window.Resources> 
    <ControlTemplate TargetType="{x:Type Button}" x:Key="PresentBox"> 

     <Canvas Name="svg2" > 
      <Canvas.Resources/> 
      <Canvas Name="layer1"> 
       <Path Name="path2385" Fill="#D45500" Stroke="#FF000000" StrokeThickness="1px" StrokeLineJoin="Miter" StrokeEndLineCap="Flat" Data="M 110 82.362183 A 40 30 0 1 1 39.041709 63.365048 L 70 82.362183 z"/> 
       <Path Name="path2387" Fill="#FF0000" Data="M 100 100 L 79.96762 89.419767 L 59.895213 99.923868 L 63.767267 77.602471 L 47.574559 61.758424 L 69.999999 58.543274 L 80.064762 38.247014 L 90.052393 58.581339 L 112.46547 61.881608 L 96.212721 77.664061 L 100 100 z"/> 
       <Path Name="path2389" Fill="#C83737" Data="M 100 40.000002 L 97.601178 65.149257 L 116.9586 81.382849 L 92.298963 86.872981 L 82.841672 110.29944 L 70 88.543275 L 44.797648 86.788031 L 61.520697 67.85185 L 55.402078 43.340588 L 78.579163 53.393551 L 100 40.000002 z"> 
        <!--path--> 
       </Path> 
      </Canvas> 
     </Canvas> 

    </ControlTemplate> 
</Window.Resources> 
<Grid> 
    <Button Template="{StaticResource PresentBox}" >Hi there</Button> 
</Grid> 
</Window> 

Answer 1

將畫布包裹在Viewbox中。畫布不會將其自身的尺寸與其內容的尺寸相關聯。因此，您可以看到內容隨「畫布」移動，但不能調整大小。 Viewbox通過在其自己的尺寸更改時擴展其內容來增強Canvas的行爲。您可以控制Viewbox的行爲，例如水平，垂直或兩者拉伸。不幸的是，沒有豪華轎車伸展，這對UI控制來說會很好。

下面是它的外觀。請注意，我猜測的寬度和高度。他們應該匹配那些實際路徑。您還應該確保路徑與X和Y軸對齊，以避免留下意外邊距。

<Viewbox Name="viewbox1" 
     Height="200" Width="200" 
     HorizontalAlignment="Left" VerticalAlignment="Top" 
     Stretch="Fill"> 
    <Canvas Name="layer1"> 
     <Path Name="path2385" Fill="#D45500" Stroke="#FF000000" StrokeThickness="1px" StrokeLineJoin="Miter" StrokeEndLineCap="Flat" Data="M 110 82.362183 A 40 30 0 1 1 39.041709 63.365048 L 70 82.362183 z"/> 
     <Path Name="path2387" Fill="#FF0000" Data="M 100 100 L 79.96762 89.419767 L 59.895213 99.923868 L 63.767267 77.602471 L 47.574559 61.758424 L 69.999999 58.543274 L 80.064762 38.247014 L 90.052393 58.581339 L 112.46547 61.881608 L 96.212721 77.664061 L 100 100 z"/> 
     <Path Name="path2389" Fill="#C83737" Data="M 100 40.000002 L 97.601178 65.149257 L 116.9586 81.382849 L 92.298963 86.872981 L 82.841672 110.29944 L 70 88.543275 L 44.797648 86.788031 L 61.520697 67.85185 L 55.402078 43.340588 L 78.579163 53.393551 L 100 40.000002 z"/> 
    </Canvas> 
</Viewbox> 

Answer 2

您可以設置Path.RenderTransform到自定義ScaleTransform縮放子元素的父寬度/高度。

Answer 3

一般帆布不尊重父控件的大小，所以如果你用網格代替畫布，你可以得到的按鈕大小到裏面的ControlTemplate的路徑。

<Grid x:Name="layer1" Width="Auto" Height="Auto"> 
       <Path x:Name="path2385" Fill="#D45500" Stroke="#FF000000" StrokeThickness="1px" StrokeLineJoin="Miter" StrokeEndLineCap="Flat" Data="M 110 82.362183 A 40 30 0 1 1 39.041709 63.365048 L 70 82.362183 z" Margin="0,0,6.459,49.147" d:LayoutOverrides="Width, Height"/> 
       <Path x:Name="path2387" Fill="#FF0000" Data="M 100 100 L 79.96762 89.419767 L 59.895213 99.923868 L 63.767267 77.602471 L 47.574559 61.758424 L 69.999999 58.543274 L 80.064762 38.247014 L 90.052393 58.581339 L 112.46547 61.881608 L 96.212721 77.664061 L 100 100 z" Margin="0,0,4.493,62" d:LayoutOverrides="Width, Height"/> 
       <Path x:Name="path2389" Fill="#C83737" Data="M 100 40.000002 L 97.601178 65.149257 L 116.9586 81.382849 L 92.298963 86.872981 L 82.841672 110.29944 L 70 88.543275 L 44.797648 86.788031 L 61.520697 67.85185 L 55.402078 43.340588 L 78.579163 53.393551 L 100 40.000002 z" Margin="0,0,0,51.7" d:LayoutOverrides="Width, Height"> 
        <!--path--> 
       </Path> 
    </Grid> 

否則，您可以使用TemplateBinding，它可以將Button的屬性給控件模板。例如。

Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"> 

如果你不能刪除畫布的所有然後使用視框周圍的奧倫表明上述