Creare wpf pulsante con un’immagine e un testo

Vorrei creare un pulsante template per la visualizzazione di un’immagine e di un’etichetta del pulsante.
Ho thiking sull’uso orizzontale stackpanel sul pulsante.

Non riesco a visualizzare l’etichetta.

Qui è il mio modello :

<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte">
<Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" >
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <Border CornerRadius="3">
                <ContentPresenter/>
                <Border.Style>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="Background" Value="#58585a" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>
            <Label>
                <Label.Content>Fichiers joints</Label.Content>
                <Label.Foreground>white</Label.Foreground>
                <Label.VerticalAlignment>center</Label.VerticalAlignment>
                <Label.HorizontalAlignment>center</Label.HorizontalAlignment>
            </Label>
        </StackPanel>
    </Button.Content>
    <Button.Style>
        <Style TargetType="{x:Type Button}" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}" >
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

Qui è la mia chiamata di questo modello :

<Grid Margin ="10,180,10,14">
            <Button Template="{StaticResource BoutonImageEtTexte}" HorizontalAlignment="Left" Margin="13,0,0,0"> 
                <Image Source="ToolBar_FicJoints.png" />
            </Button>
        </Grid> 

Qui è un altro metodo con una casella di testo invece di una Etichetta

    <ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte">
    <Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" >
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <Border CornerRadius="3">
                    <ContentPresenter/>
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="Background" Value="#58585a" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                </Border>
                    <TextBlock Text="LabelText" />
                </StackPanel>
        </Button.Content>
        <Button.Style>
            <Style TargetType="{x:Type Button}" >
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}" >
                            <ContentPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>
</ControlTemplate>

Il mio problema è che vedo onl la mia immagine, e non la mia etichetta specificata nel modello.
Qualcuno mi potrebbe aiutare per favore ?

Grazie mille 🙂

  • Il concetto è totalmente off. Se si desidera creare un modello di controllo di un pulsante di prendere in più di un elemento di contenuto, è necessario creare un extra di proprietà di dipendenza.
  • Potrebbe, per favore, me dammi un esempio per fare questo ?
  • Questo mi sembra un buon articolo… blogs.msdn.com/b/knom/archive/2007/10/31/…
  • Questo link è bello ! Grazie ! Ma, utilizza il codice c#, e non pieno di xaml 🙁
  • Non c’è nulla in post è specificato solo l’utilizzo di xaml e ti ha taggato questa domanda con c#, quindi non dovreste commento che il link non è quello voluto. La creazione di proprietà di dipendenza per gestire l’immagine di origine e il contenuto del testo è il modo migliore per essere in grado di associare dati utilizzando MVVM.

 

2 Replies
  1. 12

    Un TextBlock si adatta alle vostre esigenze meglio di una etichetta. Se non si utilizza l’olio extra funzionalità dell’etichetta (come target, oggetto contenuto), bastone con una buona ole TextBlock.

    Se si desidera disattivare tutti i pulsanti di stile e di avere solo un’immagine e l’etichetta del pulsante (nota, questo annulla mouseover/mousedown effetti, ma è in grado di fornire la logica di trigger):

    <ControlTemplate TargetType="{x:Type Button}" x:Key="SimpleButton">
        <ContentPresenter/>
    </ControlTemplate>

    Uso:

    <Button Template="{StaticResource SimpleButton}"> 
        <StackPanel Orientation="Horizontal">
            <Image Source="ToolBar_FicJoints.png" />
            <TextBlock Text="LabelText" />
        </StackPanel>
    </Button>

    Se si desidera solo l’Immagine/TextBlock in un normale stile pulsante, è ancora più semplice:

    <Button> 
        <StackPanel Orientation="Horizontal">
            <Image Source="ToolBar_FicJoints.png" />
            <TextBlock Text="Fichiers joints" />
        </StackPanel>
    </Button>
    • Grazie,proverò 🙂
    • Ho provato, ma la mia textbox presentato fuori il pulsante, avete un’idea ? Posso modificare il mio primo post con il TxtBoxMedthod 🙂 Grazie mille !
  2. 3

    Uso di tela come segue.

    <Button Height="50" Width="150" >
                            <Button.Template>
                                <ControlTemplate>
                                    <Canvas>
                                        <Image Source="./Images/Cancel.png"/>
                                        <TextBlock Canvas.Left="22" Canvas.Top="8" Text="Cancel" FontFamily="Arial" FontSize="18"/>
                                    </Canvas>
                                </ControlTemplate>
                            </Button.Template>
                         </Button>

    È possibile regolare Canvas.Left e Canvas.Top secondo i vostri requisiti. Spero che questo vi aiuterà a come verrà visualizzata Testo sopra l’immagine.

Lascia un commento