Pulsante modello con immagine e testo in wpf

Voglio creare pulsanti con immagini e testo all’interno. Per esempio, vorrei utilizzare diverse immagini e testo per i pulsanti come “Sfoglia cartelle” e “Importa”.
Una delle opzioni potrebbe essere quella di utilizzare un modello.
Ho dato un’occhiata al simliar domanda

La creazione di un’immagine+testo pulsante con un modello di controllo?

Ma c’è un modo con cui posso associare l’origine dell’immagine senza l’utilizzo di una proprietà di dipendenza o di qualsiasi altra classe?

Grazie

InformationsquelleAutor Archie | 2010-04-28



6 Replies
  1. 3

    No. Cosa vorresti associare il Image.Source per? Hai bisogno di una DependencyProperty per questo. Naturalmente, si potrebbe anche definire una classe normale, che contiene due proprietà: Text e ImageSource o Uri, e quindi utilizzare un modello di dati per eseguire il rendering di istanze di questa classe, ma sarebbe ancora più codice da scrivere, ed è un po ‘ “puzzolente”.

    Che cosa è la ragione per cui non si desidera utilizzare una proprietà di dipendenza o una classe personalizzata?

    • L’unico motivo è che volevo sapere se c’è qualche altro modo semplice o si può dire un po ‘meno-codice’ modo di farlo. Con texblock posso usare <TextBlock Text=”{TemplateBinding Contenuto}” /> volevo sapere perché non riesco a fare lo stesso con la proprietà di Origine di un’Immagine?
    • Ma dove vuoi mettere che TemplateBinding? E per proprietà si legano?
    • Posso usare il ‘Tag’ proprietà di legare?
    • Io non sono sicuro. Potrebbe funzionare. Tuttavia, personalmente, vorrei prendere in considerazione di questo, quanto piuttosto di cattivo codice, perché l’intenzione non è chiara, non è necessario alcun tipo di sicurezza… è fino a voi.
  2. 41

    Non deve essere così complicato. Qualcosa di semplice come mettere un StackPanel all’interno di un pulsante farà il trucco:

    <Button>
      <StackPanel>
        <TextBlock>My text here</TextBlock>
        <Image Source="some.jpg" Stretch="None" />
      </StackPanel>
    </Button>

    È quindi possibile configurare lo StackPanel di controllo in cui il testo deve essere visualizzato, allineamento, etc.

    • Ok, ma come si fa a impostare il carattere di sottolineatura? Se metto “_My qui il testo” rende la sottolineatura e alt+M non funziona più. Così come si fa a ottenere che indietro?
    • Inoltre, come arrivare a ridurre l’immagine in modo che il pulsante non esplode per la dimensione dell’immagine (ad esempio, se ho un’immagine che 40×40 e un pulsante di qualsiasi dimensione pulsanti — non voglio impostare manualmente che — come faccio a ottenere l’immagine a cui ridurre la dimensione giusta, invece di saltare in aria il mio pulsante per essere uber grande?
    • Vorrei aggiungere che probabilmente si vorrà impostare la Orientation del StackPanel per Horizontal per farli allineare fianco a fianco. Si noti che se si è utilizzata una griglia invece di un StackPanel devi giocare con margini per centrare l’immagine e il testo in orizzontale (in Modo stackpanel è il modo per go).
    • QUESTA è la risposta
    • Ora l’immagine e il testo sono stata centrata all’interno del pulsante. Come posso allineare a sinistra di loro?
  3. 14

    Ho aggiunto un paio di cose alla linea ben

    <Button>
       <StackPanel Orientation="Horizontal">
           <Image Source="/ApplicationName;component/Images/MyImage.ico"/>
           <Label Padding="0">My Button Text</Label>
       </StackPanel>
    </Button>
    • Bene che ha lavorato per darmi un normale pulsante etichetta, cioè con alt+lettera di tasti) — l’ho provato fa clic con il pulsante quando premo la combinazione corretta. — Ora ho solo bisogno di capire come ridurre la mia immagine la dimensione del pulsante e non la causa esso per rendere i pulsanti grandi.
    • Come posso allungare StackPanel all’interno del Pulsante? HorizontalAlignment="Stretch" non funziona. P. S. WPF è imprevedibile e stupido.
  4. 7
        <Button>
            <StackPanel Orientation="Horizontal">
                <Image Source="Resources/add.png" Stretch="None" />
                <TextBlock Margin="5,0,0,0">Add</TextBlock>
            </StackPanel>
        </Button>
  5. 4
    <Button x:Name="MyCoolButton"Width="200" Height="75">
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="Pete-Brown-Silverlight-in-Action.png" Margin="5" Grid.Column="0" />
        <StackPanel Grid.Column="1" Margin="5">
            <TextBlock Text="Buy My Book!" FontWeight="Bold" />
            <TextBlock Text="Pete is writing THE Silverlight 4 book" TextWrapping="Wrap" />
        </StackPanel>
    </Grid>

  6. 1

    Aggiunto Stretch=”Uniforme” di Sean risposta per affrontare caso se l’immagine è originariamente di dimensioni maggiori rispetto alle dimensioni del pulsante (problema BrainSlugs83 menzionato nei suoi commenti che mi sono imbattuto in così). Ulteriori dettagli del Tratto opzioni a MSDN.

    <Button>
        <StackPanel Orientation="Horizontal">
            <Image Source="/ApplicationName;component/Images/MyImage.ico" Stretch="Uniform"/>
            <Label Padding="0">My Button Text</Label>
        </StackPanel>
    </Button>

    Voluto aggiungere questo come commento alla risposta sotto BrainSlugs83 ma non può a causa della mancanza di punti ed è stato respinto dalla redazione di Sean risposta.

Lascia un commento