wpf - 图像填充 WPF 中按钮上的空间

Question

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

我是否需要调整Image外部 WPF 的大小然后使用它？

Answer 1

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

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

Answer 2

的设置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>         

有关更多信息，请参阅此问题和此链接

Answer 3

尝试设置HorizontalAlignmentand VerticalAlignmenttoStretch和Dockto Fill。

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