0

我一直在阅读有关更改 WPF 控件外观的信息。在大多数情况下，尽管按钮是从头开始创建的，因此没有多个来源，更不用说用于显示按钮的单个图像，它可以正确调整大小。

我想显示一个具有自定义外观的按钮。它应该能够从图像（最好是具有每像素 alpha 的 PNG 图像）加载视觉数据，将其切片（请查看下面的方案），从而正确调整按钮的大小，同时保持尽可能多的优点尽可能将原始 WPF Button（包括文本/内容、图标、事件和绑定）。

这样的事情可能吗？

在此处输入图像描述

有没有办法拥有一个 WPF 模板，它将使用某个图像源（或者甚至可能需要几个单独的文件）来允许一个可调整大小的按钮（或者如果这是可行的，则通常是控制）。这个按钮将包含一个图标和一些文本，它会有一个“onMouseOver”图像-“模板”以及一个“onMouseDown”。

我知道在 CSS 中，将图像作为整个图像映射并使用坐标和剪切矩形来确保正确的外观是可行的。有没有人知道这是否可行，并给我一些指示，我可以在其中寻找如何“设计”我自己的控件，这些控件源自已知控件？

在这种特殊情况下，我真的需要按钮和可能的进度条。我想如果我能理解如何设置按钮和进度条的样式，我就会知道如何为其他类型的控件设置样式。

我正在使用 .NET Framework 4.5，将使用此应用程序的人也必须使用相同的框架。

先感谢您！

4

2 回答 2

1

只需使用网格对其进行模板化。在此示例中，我使用纯色填充矩形，只需使用从图像中适当的源矩形中提取像素的图像画笔替换那些：

<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Button.Template>
        <ControlTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="100"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="100"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>
                <Rectangle Grid.Row="0" Grid.Column="0" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="0" Grid.Column="1" Fill="Yellow"/>
                <Rectangle Grid.Row="0" Grid.Column="2" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="0" Grid.Column="3" Fill="Yellow"/>
                <Rectangle Grid.Row="0" Grid.Column="4" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="1" Grid.Column="0" Fill="Green"/>
                <Rectangle Grid.Row="1" Grid.Column="4" Fill="Green"/>
                <Rectangle Grid.Row="2" Grid.Column="0" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="2" Grid.Column="4" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="3" Grid.Column="0" Fill="Green"/>
                <Rectangle Grid.Row="3" Grid.Column="4" Fill="Green"/>
                <Rectangle Grid.Row="4" Grid.Column="0" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="4" Grid.Column="1" Fill="Yellow"/>
                <Rectangle Grid.Row="4" Grid.Column="2" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="4" Grid.Column="3" Fill="Yellow"/>
                <Rectangle Grid.Row="4" Grid.Column="4" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Fill="Gray"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

结果：

在此处输入图像描述

老实说，尽管我认为这是可能需要自定义 UserControl 的情况之一，即使该控件使用我在此处展示的相同技术。在整个 XAML 中需要多次引用每列和每行拆分的确切点，将这些点作为依赖属性添加到用户控件中将使代码更加灵活且更易于定制。为了让您了解我在说什么，这里是前两个矩形在 XAML 中的样子：

<Rectangle Grid.Row="0" Grid.Column="0">
                    <Rectangle.Fill>
                        <ImageBrush ImageSource="http://i.stack.imgur.com/something.jpg" Viewbox="0,0,100,100" ViewboxUnits="Absolute"/>
                    </Rectangle.Fill>
                </Rectangle>
                <Rectangle Grid.Row="0" Grid.Column="1">
                    <Rectangle.Fill>
                        <ImageBrush ImageSource="http://i.stack.imgur.com/something.jpg" Viewbox="100,0,1,100" ViewboxUnits="Absolute" TileMode="None"/>
                    </Rectangle.Fill>
                </Rectangle>

注意“something.jpg”是如何在两个矩形中引用的。模板化 Image 而不是 UserControl 将允许您使用 TemplateBinding 到 Image 源，但是仍然存在剪切行和列的位置的问题。你可以结合附加属性和转换器来做到这一点，但这太愚蠢了。创建一个自定义用户控件并完成它。

于 2015-07-29T08:23:49.663 回答
0

虽然这个问题已经有了答案，但我想我会加入，因为我自己处理了可调整大小的控件。这是一种不同的方法，因为我的控件看起来更“干净”。他们依靠 SVG 数据来随意调整大小。目标是高可重用性和可定制性，并且非常适合当前的 windows 10 外观。这是 GitHub： https ://github.com/MarkoPaul0/PrettyNSharp

于 2018-05-09T03:05:00.670 回答