带图像的 WPF 按钮

我试图在 WPF 中的一个按钮上附加一个图像，但是这个代码失败了。在 MozillaXUL 中，类似的代码可以完美工作，这似乎有些奇怪。

<Button Height="49.086" Margin="3.636,12,231.795,0" Name="button2"
VerticalAlignment="Top" Grid.Column="1" Click="button2_Click"
Source="Pictures/apple.jpg">Disconnect from Server</Button>
236123 次浏览
小开
最佳答案

你应该这样做:

<Button>
<StackPanel>
<Image Source="Pictures/apple.jpg" />
<TextBlock>Disconnect from Server</TextBlock>
</StackPanel>
</Button>
小开

Another way to Stretch image to full button. Can try the below code.

<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="/Demoapp;component/Resources/AddButton.png" Stretch="UniformToFill"/>
</Grid.Resources>


<Button Content="Load Inventory 1" Background="{StaticResource AddButtonImageBrush}"/>

转自 给你

也可以帮助其他人。我发布了相同的 点击这里。

小开 
<Button x:Name="myBtn_DetailsTab_Save" FlowDirection="LeftToRight"  HorizontalAlignment="Left" Margin="835,544,0,0" VerticalAlignment="Top"  Width="143" Height="53" BorderBrush="#FF0F6287" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontFamily="B Titr" FontSize="15" FontWeight="Bold" BorderThickness="2" Click="myBtn_DetailsTab_Save_Click">
<StackPanel HorizontalAlignment="Stretch" Background="#FF1FB3F5" Cursor="Hand" >
<Image HorizontalAlignment="Left"  Source="image/bg/Save.png" Height="36" Width="124" />
<TextBlock HorizontalAlignment="Center" Width="84" Height="22" VerticalAlignment="Top" Margin="0,-31,-58,0" Text="ثبت مشتری" />
</StackPanel>
</Button>
小开

这个应该可以了，不是吗？

<Button Content="Test">
<Button.Background>
<ImageBrush ImageSource="folder/file.PNG"/>
</Button.Background>
</Button>
小开

You can create a custom control that inherits from the Button class. This code will be more reusable, please look at the following blog post for more details: WPF-创建带图像的自定义按钮(ImageButton)

使用这个控件:

<local:ImageButton Width="200" Height="50" Content="Click Me!"
ImageSource="ok.png" ImageLocation="Left" ImageWidth="20" ImageHeight="25" />

Cs 文件:

public class ImageButton : Button
{
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
}


public ImageButton()
{
this.SetCurrentValue(ImageButton.ImageLocationProperty, WpfImageButton.ImageLocation.Left);
}


public int ImageWidth
{
get { return (int)GetValue(ImageWidthProperty); }
set { SetValue(ImageWidthProperty, value); }
}


public static readonly DependencyProperty ImageWidthProperty =
DependencyProperty.Register("ImageWidth", typeof(int), typeof(ImageButton), new PropertyMetadata(30));


public int ImageHeight
{
get { return (int)GetValue(ImageHeightProperty); }
set { SetValue(ImageHeightProperty, value); }
}


public static readonly DependencyProperty ImageHeightProperty =
DependencyProperty.Register("ImageHeight", typeof(int), typeof(ImageButton), new PropertyMetadata(30));


public ImageLocation? ImageLocation
{
get { return (ImageLocation)GetValue(ImageLocationProperty); }
set { SetValue(ImageLocationProperty, value); }
}


public static readonly DependencyProperty ImageLocationProperty =
DependencyProperty.Register("ImageLocation", typeof(ImageLocation?), typeof(ImageButton), new PropertyMetadata(null, PropertyChangedCallback));


private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var imageButton = (ImageButton)d;
var newLocation = (ImageLocation?) e.NewValue ?? WpfImageButton.ImageLocation.Left;


switch (newLocation)
{
case WpfImageButton.ImageLocation.Left:
imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 1);
imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 0);
break;
case WpfImageButton.ImageLocation.Top:
imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 0);
imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 1);
break;
case WpfImageButton.ImageLocation.Right:
imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 1);
imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 2);
break;
case WpfImageButton.ImageLocation.Bottom:
imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 2);
imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 1);
break;
case WpfImageButton.ImageLocation.Center:
imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 1);
imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 1);
break;
default:
throw new ArgumentOutOfRangeException();
}
}


public ImageSource ImageSource
{
get { return (ImageSource)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}


public static readonly DependencyProperty ImageSourceProperty =
DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));


public int RowIndex
{
get { return (int)GetValue(RowIndexProperty); }
set { SetValue(RowIndexProperty, value); }
}


public static readonly DependencyProperty RowIndexProperty =
DependencyProperty.Register("RowIndex", typeof(int), typeof(ImageButton), new PropertyMetadata(0));


public int ColumnIndex
{
get { return (int)GetValue(ColumnIndexProperty); }
set { SetValue(ColumnIndexProperty, value); }
}


public static readonly DependencyProperty ColumnIndexProperty =
DependencyProperty.Register("ColumnIndex", typeof(int), typeof(ImageButton), new PropertyMetadata(0));
}


public enum ImageLocation
{
Left,
Top,
Right,
Bottom,
Center
}

Xaml 文件:

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfImageButton">
<Style TargetType="{x:Type local:ImageButton}" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImageSource, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
Width="{Binding ImageWidth, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
Height="{Binding ImageHeight, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
Grid.Row="{Binding RowIndex, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
Grid.Column="{Binding ColumnIndex, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<ContentPresenter Grid.Row="1" Grid.Column="1" Content="{TemplateBinding Content}"
VerticalAlignment="Center" HorizontalAlignment="Center"></ContentPresenter>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
小开

Most simple approach would be using the Image tag.

<Button Name="btn" Width="26" Height="26" Click="btnClick">
<Image Source="Resource/btn-icon.png"/>
</Button>

假设您的图像文件添加到 Resource 文件夹中


提交答案