WPF中如何使图像填充按钮空间

Question

我在我的WPF应用上有一个Button，我想让一张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>

我需要在WPF之外缩放Image然后再使用它吗？

- IamaC

Answer 1

你可以尝试将你的Image更改为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>

或者将一个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>

- Mark Hall

---

我有一个问题，当我将鼠标悬停在按钮上时，第一种解决方案中的图像会消失。如果使用您的第二种解决方案，图像会保留在那里，但会失去按钮点击动画。是否有任何修复方法？ - IamaC

这就是为什么我添加了第二个选项，我所能想到的唯一另一种方法就是修改按钮模板。 - Mark Hall

@IamaC 请查看此SO问题。 - Mark Hall

Answer 2

将 Button 的 HorizontalContentAlignment 和 VerticalContentAlignment 属性设置为 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>         

See this question and this link for more

- Ramin

---

尝试过这个，但它显示的是“System.Windows.Media.ImageBrush”，而不是图像。 - Paul McCarthy

Answer 3

尝试将HorizontalAlignment和VerticalAlignment设置为Stretch，并将Dock设置为Fill。

- ranieri

Answer 4

对我来说，使用Button.Background的解决方案仅在垂直方向上有效（按钮显示为3像素宽的垂直条），因为我需要将刷新按钮放置在右侧的水平Grid容器中，如下图所示：

所以，最终我绑定了 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>

我使用的资源是ICO文件，因此图像在不同大小下应该看起来很好，并且成像速度仍然非常快...

- user8276908