WPF 图像按钮格式

WPF Image Button formatting

提问by Sonic Soul

If I create a button with an image inside, it gets blown up to much larger size than the image.

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

If i try to constrain the size of image, and container button, the image gets cut off:

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

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

Native image size is 16x16. Here the button is 18x18 with 0 padding, yet the image still gets cut-off on right/bottom.

本机图像大小为 16x16。这里的按钮是 18x18 的 0 填充，但图像仍然在右/底部被截断。

how can i make the entire button be exactly the size of the image w/out any cut off?

我怎样才能使整个按钮与图像的大小完全一致，没有任何切断？

回答by Wonko the Sane

The beauty (and curse?) of WPF is the ability to re-template controls.

WPF 的优点（和诅咒？）是能够重新模板控件。

You can set the template of the button something like the following (this is free hand, so you will need to tweak it a bit for your tastes):

你可以像下面这样设置按钮的模板（这是徒手的，所以你需要根据自己的喜好稍微调整一下）：

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

回答by nullqube

You can use Button.Backgroundand ImageBrushas an exampe like this:

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

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

回答by gehho

You should remove any Widthand Heightsettings and set the Button's HorizontalAlignmentand VerticalAlignmentboth to Center(or Left/Rightor Top/Bottomresp.). By default, these properties are set to Stretchwhich makes the button stretch to the available space. Since the image is the content of the button, it also gets stretched. Something like this should work:

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

Take this code example:

以这个代码示例为例：

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

.

.

---

---

The following was just meant as an alternativewith a different result which obviously (considering your comments) is not what you want.

以下只是作为具有不同结果的替代方案，这显然（考虑到您的评论）不是您想要的。

If you want the button to stretch, but not the image, you could also set the Image's alignment properties to something other than Stretch. Or you could set its Stretchproperty to None. This would make the button as large as possible, but keep the image at its original size (16x16). This would work as follows:

如果您希望按钮拉伸而不是图像拉伸，您还可以将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 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>

回答by Steveo

Think thismight give people the answer they are looking for, buttons with image and no borders at all.

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