Domanda Il pulsante Immagine risponde solo quando si fa clic sull'immagine e non nell'area intorno al pulsante


Sto usando il seguente stile di pulsante che rimuove i bordi e crea uno sfondo trasparente per rendere i miei pulsanti immagine:

  <Style x:Key="EmptyButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#00000000"/>
    <Setter Property="BorderBrush" Value="#00000000"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <ContentPresenter 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    RecognizesAccessKey="True" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Lo stile è dalla seguente risposta: Pulsante WPF con l'immagine di un cerchio

Il problema ora è che l'area cliccabile è limitata all'immagine indipendentemente da quanto è grande il pulsante attuale:

Button problem

Il mio codice pulsante:

<Button Name="n02" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Style="{DynamicResource EmptyButtonStyle}" Canvas.Left="308" Canvas.Top="157" Height="106" Width="120">
        <Image Source="boto_face_off.PNG" Height="61" Width="59" />
    </Button>

Domanda: come faccio a reagire all'intera area del pulsante al clic? Voglio mantenerlo trasparente e senza confini come ora.


12
2017-09-24 20:55


origine


risposte:


Potresti avvolgere il presentatore in a Border con un limite Background.

<ControlTemplate TargetType="{x:Type Button}">
     <Border Background="{TemplateBinding Background}">
          <!-- ContentPresenter here -->
     </Border>
</ControlTemplate>

Lo stile imposta il Background a qualcosa di trasparente ma non è mai stato nemmeno usato nel Template, in questo modo il Border renderà l'intera area hit-test.


20
2017-09-25 05:27



Basta aggiungere alcune informazioni alla risposta sopra dopo aver esaminato il problema per ore.

Se stai definendo il tuo modello come nell'esempio sopra, stai modificando l'albero visivo dell'elemento. Nell'esempio sopra, applicare il Style="{DynamicResource EmptyButtonStyle}" diventa:

Button
  |
ContentPresenter

Ma se guardi l'albero visivo di un pulsante standard (puoi farlo in Visual Studio) sembra che questo:

Button
  |
ButtonChrome
  |
ContentPresenter

Quindi nel pulsante in stile non c'è nulla intorno al ContentPresenter per essere cliccato, e se il contenuto è nel "mezzo", l'area circostante sarà lasciata completamente vuota. Dobbiamo aggiungere un elemento per prendere questo posto:

Puoi farlo con a <Border>(Penso che sia meglio perché Border è un elemento leggero suppongo) o qualche altro elemento, ho provato <Grid> e <DockPanel> ed entrambi hanno funzionato.

L'unica cosa che non capisco è il motivo per cui devi impostare esplicitamente lo sfondo su qualcosa di trasparente, lasciandolo semplicemente fuori non produrre un'area cliccabile.

Modifica: l'ultimo punto ha risposto nei commenti qui Il pulsante Immagine risponde solo quando si fa clic sull'immagine e non nell'area intorno al pulsante


5
2017-09-26 02:14