WPF图像按钮格式

Question

如果我创建一个内部带有图像的按钮,它会被炸成比图像大得多的尺寸.

如果我试图约束图像的大小和容器按钮,图像会被切断:

<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填充,但图像仍然在右/底部被切断.

如何使整个按钮与图像的大小完全相同？

Answer 1

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>

Answer 2

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

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

Answer 3

你应该删除任何Width和Height设置,并将Button HorizontalAlignment和VerticalAlignment两者都设置为Center(或Left/ Right或Top/ Bottomresp.).默认情况下,这些属性设置为Stretch使按钮拉伸到可用空间.由于图像是按钮的内容,因此它也会被拉伸.这样的事情应该有效:

以此代码示例为例:

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

.

以下只是作为一种替代方案,具有不同的结果,显然(考虑到您的评论)并不是您想要的.

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