代码之家 › 专栏 › 技术社区 › Pieter Breed

wpf:在wpf中使用设计的向量图像作为控制模板

graphics templates wpf

Pieter Breed · 技术社区 · 15 年前

我正在探索在我的WPF应用程序中使用专业设计的矢量图像作为控制模板的想法。其想法是制作几种类型的控件,每种控件都有不同的视觉设计,然后可以拖放。这与可视化设计器(a'la Visio)的用例完全相同。

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

3 回复 | 直到 15 年前

Oren Trutner 15 年前

将画布包装在 Viewbox . 画布本身的维度与其内容的维度不相关。因此,您可以看到内容随画布移动,但不能调整大小。当画布自身的尺寸发生变化时,视图框通过拉伸其内容来增强画布的行为。可以控制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>

Jobi Joy 15 年前

通常,Canvas不考虑父控件的大小,因此,如果用网格替换Canvas,则可以将按钮大小放到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,它可以将按钮的属性提供给ControlTemplate。例如。

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

如果你根本不能移除画布,那就在画布周围使用一个视图框,正如Oren上面建议的那样。

-1

Fabrício Matté 15 年前

你可以设置 Path.RenderTransform 风俗习惯 ScaleTransform 将子元素缩放为父级宽度/高度。