Question

我正在开发一个Windows应用商店的应用程序，我已经在几个月前完成了这个，但突然之间，在这个新的应用程序中，我无法将图像显示在按钮内（正确）。

    <Button x:Name="ShowView" Grid.Column="1" Width="32" Height="32" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33">
        <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Image x:Name="ShowViewImage" Source="/Assets/ShowView.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        </StackPanel>
    </Button>

正如你所看到的，代码很好（除非事情发生了巨大变化，从外观来看，它们没有）。什么给出了什么？这是我目前在XAML文件中唯一的代码，而不是VS生成的默认代码，因为它是一个新项目。

P.S。我也尝试过取出StackPanel并只使用Button＆gt;图像，但这会产生相同的结果。

因此，当BUtton在运行时显示时，我所能看到的只是一个非常小的2像素的图像（但图像实际上是 32x32pixels 。如何正确显示“图像按钮” ？

Answer 1

问题是按钮的Width和Height太小了。你已经制作了32x32像素，但按钮几乎全部用于它留在可见边框周围的空间，边框本身以及边框和按钮内容之间的填充。

（它在边缘周围留出空间以提供比可见外观更大的命中目标。这在触摸屏上很有用，其中难以准确放置手指。）

为图像留下的所有内容都是几个像素。

您需要将按钮设置为大约62x52像素，以便为32x32像素位图留出足够的空间。

如果您明确设置较小的Margin和Padding属性，则可以使用稍微小一点的按钮，但如上所述，保证金是有原因的。

Answer 2

您有几个选项，例如Padding属性是模板绑定，并添加了一些预先设置的填充。因此，将Button固定Height和Width设置为32，就像设置Padding="0"一样简单，可以根据您{{1}的实际大小为您修复}}

如果情况变得更糟，你可以随时制作自己的Image模板。有几种简单的方法可以做到这一点。其中一个只是去制作默认Button模板的副本，撕掉那里的所有填充/边距/高度/宽度废话预设，只需更改其名称，然后将新模板直接应用到您的按钮;

Button

或者......另一种选择是，将<Button x:Name="ShowView" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33" Style="{StaticResource YourCustomButtonTemplateForImages}"> <Image x:Name="ShowViewImage" Source="/Assets/ShowView.png"/> </Button>嵌入到按钮内的Image内，它将适合并根据其设置的可用尺寸重新缩放。

哦，你可能还想在你的ViewBox时使它看起来像一张图片一样清洁。

希望这有帮助。

为什么图像只能在我的按钮内部分可见？

2 个答案: