图像填充 WPF 中按钮上的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14106888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image fill the space on the button in WPF
提问by IamaC
I have Buttonon my WPF app and I want an Imageto fill the Buttoncompletely. Currently I have The following code and it does not fill the Button.
我有Button我的 WPF 应用程序，我想要一个完全Image填充Button。目前我有以下代码，但它没有填充Button.
<Image x:Key="MyResource" Source="Images/up-arrow-icon.jpg" Margin="0" />
<telerik:RadButton Height="25" Width="40" HorizontalAlignment="Left" Margin="417,10,0,0"
Name="radButton1" VerticalAlignment="Top" Click="UpButtonClick">
<telerik:RadButton.Content>
<StaticResource ResourceKey="MyResource"/>
</telerik:RadButton.Content>
</telerik:RadButton>
Do I need resize the Imageoutside WPF then use it?
我是否需要调整Image外部 WPF 的大小然后使用它？
回答by Mark Hall
You can try changing your Imageto an ImageBrushand then assign that to your BackGroundyour image will then stretch over the inner surface of your button.
您可以尝试将您的更改Image为 an ImageBrush，然后将其分配给您BackGround的图像，然后将在按钮的内表面上拉伸。
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ImageBrush x:Key="MyResource" ImageSource="C:\temp\test.jpg" />
</Window.Resources>
<Grid>
<Button Height="25" Background="{StaticResource MyResource}" Width="40" HorizontalAlignment="Left" Margin="417,10,0,0" VerticalAlignment="Top"/>
</Grid>
</Window>
or add a TextBlock to your Button Content and assign your Image as a BackGround to it.
或将 TextBlock 添加到您的按钮内容并将您的图像作为背景分配给它。
<Window.Resources>
<ImageBrush x:Key="MyResource" ImageSource="C:\temp\test.jpg" />
</Window.Resources>
<Grid>
<Button Height="25" Width="40" HorizontalAlignment="Left" Margin="417,10,0,0" VerticalAlignment="Top">
<Button.Content>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="34" Height="19" Margin="0">
<TextBlock.Background>
<StaticResource ResourceKey="MyResource"/>
</TextBlock.Background>
</TextBlock>
</Button.Content>
</Button>
</Grid>
回答by Ramin
Set HorizontalContentAlignmentand VerticalContentAlignmentProperties of the Buttonto be Stretch:
设置HorizontalContentAlignment和VerticalContentAlignment的性质Button是Stretch：
<telerik:RadButton Height="25" Width="40"
HorizontalContentAlignment="Stretch" //this
VerticalContentAlignment="Stretch" //and this
Margin="417,10,0,0"
Name="radButton1" VerticalAlignment="Top" Click="UpButtonClick">
<telerik:RadButton.Content>
<StaticResource ResourceKey="MyResource"/>
</telerik:RadButton.Content>
</telerik:RadButton>
回答by ranisalt
Try setting HorizontalAlignmentand VerticalAlignmentto Stretchand Dockto Fill.
尝试设置HorizontalAlignmentand VerticalAlignmenttoStretch和Dockto Fill。
回答by user8276908
The solution with the Button.Background worked for me only in the vertical direction (the button was shown as a 3 pixel wide vertical slice), because I needed to fit the refresh button on the right side into a horizontal Gridcontainer as shown in this screenshot:
Button.Background 的解决方案仅在垂直方向对我有用（按钮显示为 3 像素宽的垂直切片），因为我需要将右侧的刷新按钮放入水平Grid容器中，如此屏幕截图所示：
So, I ended up binding the Widthto the ActualHeightproperty and everthing's looking good to me:
所以，我最终将 绑定Width到ActualHeight属性，一切对我来说都很好：
<Button Name="RefreshButton"
Width="{Binding ElementName=RefreshButton,Path=ActualHeight}"
Margin="3"
Padding="3"
VerticalAlignment="Stretch"
HorizontalAlignment="Right"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
>
<Button.Background>
<ImageBrush ImageSource="{StaticResource ICON_Refresh}"/>
</Button.Background>
</Button>
The resource I used is an ICO file so the image should be looking good in different sizes and imaging should still be very fast...
我使用的资源是一个 ICO 文件，因此图像在不同尺寸下应该看起来不错，并且成像仍然应该非常快......
