WPF-Taste mit Bild

108

Ich versuche, ein Bild an eine Schaltfläche in WPF anzuhängen, dieser Code schlägt jedoch fehl. Scheint seltsam, nachdem ähnlicher Code in Mozilla XUL perfekt funktionieren würde.

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

Antworten:

234

Sie möchten stattdessen so etwas tun:

<Button>
    <StackPanel>
        <Image Source="Pictures/apple.jpg" />
        <TextBlock>Disconnect from Server</TextBlock>
    </StackPanel>
</Button>
wpfwannabe
quelle
5
Vergessen Sie nicht, apple.jpg zum Projekt hinzuzufügen. (Build Action: Resource)
Watbywbarif
3
Dies ist eine ziemlich schlechte Lösung, da Text und Bild beim Deaktivieren der Schaltfläche nicht ausgegraut werden .
Num Lock
5
@NumLock wo ist deine Lösung so?
MeTitus
Dies funktioniert nicht, wenn Sie nur ein Bild hinzufügen möchten. Ich musste das StackPanel entfernen und das Bild als Inhalt der Schaltfläche hinzufügen, damit dies funktioniert. Ich habe es nicht getestet, aber vielleicht ist dies der richtige Weg, wenn man ein Bild und den Text haben möchte.
Onsokumaru
Wenn Sie das Bild zu Ihrem Projekt hinzugefügt haben, können Sie den Lösungs-Explorer von dort in den xaml-Editor ziehen und den Text des vollständigen Pfads zum Bild einfügen.
Paul McCarthy
11

Eine andere Möglichkeit, das Bild auf die volle Schaltfläche zu strecken. Kann den folgenden Code versuchen.

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

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

Von hier verwiesen

Auch könnte es anderen helfen. Ich habe das gleiche mit MouseOver Option hier gepostet .

Sai
quelle
2
<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>
ehsan A.
quelle
1
Sie sollten Ihre Antwort erklären, manchmal reicht nur Code nicht aus, um den Inhalt zu verstehen
Akshay Paliwal
Wenn Sie diese Schaltfläche verwenden, wird der Fehler "Ein Wert vom Typ 'datagridtextcolumn' kann nicht zu einer Sammlung oder einem Wörterbuch vom Typ beobachtbare Sammlung hinzugefügt werden" oder ein ähnlicher Fehler, den Sie hinzufügen sollten, angezeigt. headerStyle "TargetType =" DataGridColumnHeader "> <Setter Property =" HorizontalContentAlignment "Value =" Center "/> </ Style> </DataGrid.Resources>
ehsan A
Es war nützlich und hat mein Problem gelöst, danke. und vergessen Sie nicht, 'ثبت مشتری' in 'Submit' für andere als persische zu ändern! : D
StudioX
0

Das sollte den Job machen, nein?

<Button Content="Test">
    <Button.Background>
        <ImageBrush ImageSource="folder/file.PNG"/>
    </Button.Background>
</Button>
Eric Pleines
quelle
0

Sie können ein benutzerdefiniertes Steuerelement erstellen, das von der Button-Klasse erbt. Dieser Code ist wiederverwendbarer. Weitere Informationen finden Sie im folgenden Blog-Beitrag: WPF - Benutzerdefinierte Schaltfläche mit Bild erstellen (ImageButton)

Verwenden dieses Steuerelements:

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

ImageButton.cs-Datei:

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
}

Generic.xaml-Datei:

<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>
kmatyaszek
quelle
0

Der einfachste Ansatz wäre die Verwendung des Image-Tags.

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

Angenommen, Ihre Bilddatei wird im Ressourcenordner hinzugefügt

Shangwu
quelle