图像填充 WPF 中按钮上的空间答案

【问题标题】：Image fill the space on the button in WPF图像填充 WPF 中按钮上的空间
【发布时间】：2012-12-15 22:12:17
【问题描述】：

我的 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 的大小然后使用它？

【问题讨论】：

标签： wpf image xaml button telerik

【解决方案1】：

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 文件，因此图像在不同尺寸下应该看起来不错，并且成像应该仍然非常快......

【讨论】：

【解决方案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>

查看question 和this link 了解更多信息

【讨论】：

试过了，它显示“System.Windows.Media.ImageBrush”而不是图像。

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以尝试将您的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 添加到您的 Button Content 并将您的 Image 作为背景分配给它。

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

【讨论】：

我遇到了一个问题，但当我将鼠标悬停在按钮上时，第一个解决方案的图像会消失。如果我使用您的第二个解决方案，图像会保留在那里，但会丢失按钮单击动画。有什么解决办法吗？
这就是我添加第二个选项的原因，我能想到的唯一其他方法是修改按钮模板。
@IamaC 看到这个SO Question