WPF 图像按钮格式答案

【问题标题】：WPF Image Button formattingWPF 图像按钮格式
【发布时间】：2010-06-08 12:41:35
【问题描述】：

如果我创建一个内部带有图像的按钮，它会被放大到比图像大得多的尺寸。

如果我尝试限制图像的大小和容器按钮，图像会被截断：

<Button Background="Transparent" Width="18" Height="18" Margin="0,0,0,0" Padding="0,0,0,0" BorderBrush="{x:Null}">
    <Image Width="16" Height="16" />
</Button>

原生图片尺寸为 16x16。这里的按钮是 18x18，填充为 0，但图像仍然在右侧/底部被截断。

我怎样才能使整个按钮的大小与图像的大小完全一致，而不会被截断？

【问题讨论】：

标签： wpf

【解决方案1】：

您应该删除任何 Width 和 Height 设置，并将按钮的 HorizontalAlignment 和 VerticalAlignment 都设置为 Center（或 Left/Right 或 Top/Bottom resp。 )。默认情况下，这些属性设置为Stretch，这会使按钮拉伸到可用空间。由于图像是按钮的内容，因此它也会被拉伸。这样的事情应该可以工作：

以此代码为例：

<Button Background="Transparent" BorderBrush="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Image Source="thePathToYourImage" Stretch="None"/> <!-- EDIT: added Stretch="None" here! -->
</Button>

。

以下只是作为 alternative 的一个不同的结果，显然（考虑到您的 cmets）不是您想要的。

如果您希望按钮拉伸而不是图像，您还可以将Image 的对齐属性设置为Stretch 以外的其他值。或者您可以将其Stretch 属性设置为None。这将使按钮尽可能大，但保持图像的原始大小（16x16）。这将按如下方式工作：

<Button Background="Transparent" BorderBrush="{x:Null}">
    <Image Source="thePathToYourImage" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
<!-- OR: -->
<Button Background="Transparent" BorderBrush="{x:Null}">
    <Image Source="thePathToYourImage" Stretch="None"/>
</Button>

【讨论】：

我没有经历任何拉伸。默认情况下，图像位于中间，图像和按钮边框之间有很多空间。默认情况下，按钮比包含的图像大很多，并且没有拉伸。图像对齐不是这里的问题
你检查了我的第一个代码示例吗？第二个只是另一种选择。您应该正确设置 Button 的 对齐属性；那么 Button 的大小应与其内容一致，即图像。
是的，我有.. 没有区别。与默认相同。我的代码：
但是设置水平对齐，垂直对齐到中心，并将图像宽度和按钮宽度设置为 16x16，让我接近！ the only thing left is a weird border slill showing on mouse over and when containing row is selected...
您需要在 Button 上设置对齐方式，而不是在 Image 上。再次阅读gehho的原始答案。

【解决方案2】：

WPF 的美妙之处（和诅咒？）在于重新模板控件的能力。

您可以将按钮的模板设置如下（这是随意的，因此您需要根据自己的喜好对其进行一些调整）：

        <Button x:Name="btn16x16">
            <Button.Template>
                <ControlTemplate>
                    <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                        <Image Source="pack://siteoforigin:,,,/Resources/SixteenBySixteen.png" 
                               Width="16" 
                               Height="16"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

【讨论】：

【解决方案3】：

您可以像这样使用Button.Background 和ImageBrush 作为示例：

<Button Height="24" Width="24" >
    <Button.Background>
        <ImageBrush ImageSource="image name or path" Stretch="Fill" TileMode="None" />
    </Button.Background>
</Button>

【讨论】：

我认为最好的方法。但是，如果您使用 16x16 图标作为 OP 状态，则必须小心将按钮的高度和宽度设置为正确的大小，以免挤压图像。我最喜欢这个答案，因为我认为这是最干净的方法。
使用这种方法，当我将鼠标悬停在图像上时，它会淡出并变得不可见。
我的更糟糕——我刚刚在现有表单中添加了一个全新的按钮——很确定没有代码接触它——但图像在可见和不可见之间缓慢闪烁——也许是因为我按钮的 IsDefault 是否设置为 true？ - 没有线索。这有点疯狂。

【解决方案4】：

认为this 可能会为人们提供他们正在寻找的答案，带有图像且完全没有边框的按钮。

【讨论】：

和Wonko的建议不一样吗？我想如果一切都失败了，WPF中的图像按钮需要弄乱控制模板