web-dev-qa-db-fra.com

Ajouter une image dans un bouton WPF

J'ai essayé cette solution:

<Button>
    <StackPanel>
        <Image Source="Pictures/img.jpg" />
        <TextBlock>Blablabla</TextBlock>
    </StackPanel>
</Button>

Mais je ne peux voir l’image que dans la fenêtre du projet et elle disparaît lorsque je lance le programme.

Si j'essaye ceci:

  Image img = new Image();
  img.Source = new BitmapImage(new Uri("foo.png"));

  StackPanel stackPnl = new StackPanel();
  stackPnl.Orientation = Orientation.Horizontal;
  stackPnl.Margin = new Thickness(10);
  stackPnl.Children.Add(img);

  Button btn = new Button();
  btn.Content = stackPnl;

Je reçois une exception "'System.Windows.Markup.XamlParseException'" dans PresentationFramework.dll ".

Quelle est la solution?

c#wpfimagebutton
49
Marco

Dans le cas d'une image "manquante", plusieurs éléments sont à prendre en compte:

  1. Lorsque XAML ne peut pas localiser une ressource, il peut l'ignorer (lorsqu'il ne lance pas une XamlParseException)

  2. La ressource doit être correctement ajoutée et définie:

    • Assurez-vous qu'il existe dans votre projet où prévu.

    • Assurez-vous qu'il est construit avec votre projet en tant que ressource.

      (Clic droit → Propriétés → BuildAction = 'Ressource')

Snippet

Une autre chose à essayer dans des cas similaires, ce qui est également utile pour la réutilisation de l'image (ou de toute autre ressource):

Définissez votre image en tant que ressource dans votre XAML: 

<UserControl.Resources>
     <Image x:Key="MyImage" Source.../>
</UserControl.Resources>

Et plus tard, utilisez-le dans le ou les contrôles souhaités:

<Button Content="{StaticResource MyImage}" />
66
Ron.B.I

Veuillez essayer l'extrait XAML ci-dessous:

<Button Width="300" Height="50">
  <StackPanel Orientation="Horizontal">
    <Image Source="Pictures/img.jpg" Width="20" Height="20"/>
    <TextBlock Text="Blablabla" VerticalAlignment="Center" />
  </StackPanel>
</Button>

En XAML, les éléments sont dans une arborescence. Vous devez donc ajouter le contrôle enfant à son contrôle parent. L'extrait de code ci-dessous fonctionne également très bien. Donnez un nom à votre grille racine XAML en tant que «MainGrid».

Image img = new Image();
img.Source = new BitmapImage(new Uri(@"foo.png"));

StackPanel stackPnl = new StackPanel();
stackPnl.Orientation = Orientation.Horizontal;
stackPnl.Margin = new Thickness(10);
stackPnl.Children.Add(img);

Button btn = new Button();
btn.Content = stackPnl;
MainGrid.Children.Add(btn);
25
Vimal CK

Utilisation:

<Button Height="100" Width="100">
  <StackPanel>
    <Image Source="img.jpg" />
    <TextBlock Text="Blabla" />
  </StackPanel>
</Button>

Ça devrait marcher. Mais rappelez-vous qu'une image doit être ajoutée à la ressource de votre projet!

7
Maciek

Vous pouvez définir l'arrière-plan du bouton sur l'image si vous souhaitez ensuite superposer du texte.

<Button>
   <Button.Background>
     <ImageBrush ImageSource="/AssemblyName;component/Pictures/img.jpg"/>
   </Button.Background>
   <TextBlock>Blablabla</TextBlock>
</Button>

Surveillez la syntaxe source de l'image. Voir cette question pour obtenir de l'aide.

5
kjhf

J'ai aussi eu le même problème. Je l'ai corrigé en utilisant le code suivant.

        <Button Width="30" Margin="0,5" HorizontalAlignment="Stretch"  Click="OnSearch" >
            <DockPanel>
                <Image Source="../Resources/Back.jpg"/>
            </DockPanel>
        </Button>

Remarque: Assurez-vous que l'action de construction de l'image dans la fenêtre de propriété doit être Resource.

 enter image description here

2
Ali Asad

Essayez ContentTemplate:

<Button Grid.Row="2" Grid.Column="0" Width="20" Height="20"
        Template="{StaticResource SomeTemplate}">
    <Button.ContentTemplate>
        <DataTemplate>
            <Image Source="../Folder1/Img1.png" Width="20" />
        </DataTemplate>
    </Button.ContentTemplate>
</Button>
2
yu yang Jian

J'ai constaté que je devais également définir Access Modifier dans l'onglet Ressources sur 'Public' - par défaut, il était défini sur Interne et mon icône n'apparaissait qu'en mode Création, mais pas lors de l'exécution de l'application.

0
Robin Bennett