WPF : 在 WPF 中使用设计的矢量图像作为控件模板答案

【问题标题】：WPF : using a designed vector image as a control template in WPFWPF : 在 WPF 中使用设计的矢量图像作为控件模板
【发布时间】：2009-07-23 19:56:54
【问题描述】：

我正在探索在我的 WPF 应用程序中使用专业设计的矢量图像作为 ControlTemplates 的想法。这个想法是制作几种类型的控件，每种控件都有不同的视觉设计，然后可以拖放。这与视觉设计师的用例完全相同（a'la visio）

我有以下 XAML。它定义了一个目标类型为 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>

【问题讨论】：

标签： wpf templates graphics

【解决方案1】：

将 Canvas 包裹在 Viewbox 中。 Canvas 不会将其自身的维度与其内容的维度相关联。因此，您可以看到内容随 Canvas 移动，但无法调整大小。 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>

【讨论】：

【解决方案2】：

通常 Canvas 不考虑父控件的 Size，因此如果您将 Canvas 替换为 Grid，您可以将 Button 大小添加到控件模板内的 Paths 上。

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

如果您根本无法移除 Canvas，请按照上面 Oren 的建议在其周围使用 ViewBox

【讨论】：

d:LayoutOverrides="Width, Height" 中的 d xml 命名空间从何而来？

【解决方案3】：

您可以将Path.RenderTransform 设置为自定义ScaleTransform 以将子元素缩放到父元素的宽度/高度。

【讨论】：