2010-01-14 2 views
17

Come creare uno stile flat di un pulsante in wpf? Ho provato la proprietà BasedOn ma non funziona.pulsante flat wpf

+8

Vedi anche: http://stackoverflow.com/questions/697381/setting-button-flatstyle-in-wpf soprattutto se ti piacciono le one-liner. – greenoldman

risposta

22

Tanto per iniziare:

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Page.Resources> 
    <Style x:Key="Flat"> 
     <Setter Property="Control.Background" Value="{x:Null}" /> 
     <Setter Property="Control.BorderBrush" Value="{x:Null}" /> 
     <Style.Triggers> 
      <Trigger Property="Control.IsMouseOver" Value="True"> 
       <Setter Property="Control.Background" Value="{x:Null}" /> 
       <Setter Property="Control.BorderBrush" Value="{x:Null}" /> 
       <Setter Property="Control.FontWeight" Value="Bold" /> 
      </Trigger> 
      <Trigger Property="Control.IsFocused" Value="True"> 
       <Setter Property="Control.FontWeight" Value="Bold" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
    </Page.Resources> 
    <StackPanel> 
    <Button Style="{StaticResource Flat}">Hello</Button> 
    </StackPanel> 
</Page> 

Poi si dispone di uno Millon altri modi per farlo, anche cambiando il ControlTemplate per completare ridefinire il pulsante

+2

Non riesco a far funzionare tutto questo. Lo stile di esempio non rimuove il bordo o lo sfondo di un pulsante. L'unica cosa che funziona da questo esempio è che il testo del pulsante diventa in grassetto al passaggio del mouse. – Johncl

+0

@Johncl vedere la mia risposta sotto –

1

Soluzione rapida: Incorpora il pulsante in un <ToolBar/>

Disclaimer: Aggiungerà una barra degli strumenti chrome, potrebbe essere un problema in alcuni casi. (Grazie Indeera)

+0

Questo aggiunge una barra degli strumenti chrome e non risolve il problema. – Indy9000

+0

Aggiunge una barra degli strumenti chrome: sì; Non risolve il problema: soggettivo –

6

Per aggiungere alla risposta di Eduardo, questa soluzione si libera di qualsiasi stile in più, come il bordo attorno al pulsante se lo spessore è impostato su 0.

È possibile aggiungere stile in più, se necessario:

<Style x:Key="Flat" TargetType="Button"> 
    <Setter Property="Background" Value="{x:Null}" /> 
    <Setter Property="BorderBrush" Value="{x:Null}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> 
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsKeyboardFocused" Value="true"> 
        </Trigger> 
        <Trigger Property="IsDefaulted" Value="true"> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="true"> 
        </Trigger> 
        <Trigger Property="ToggleButton.IsChecked" Value="true"> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Background" Value="{x:Null}" /> 
      <Setter Property="BorderBrush" Value="{x:Null}" /> 
      <Setter Property="FontWeight" Value="Normal" /> 
     </Trigger> 
     <Trigger Property="IsFocused" Value="True"> 
      <Setter Property="FontWeight" Value="Normal" /> 
     </Trigger> 
    </Style.Triggers> 
</Style> 
+0

Un altro miglioramento che vorrei aggiungere è di impostare 'SnapsToDevicePixels =" True "' per ''. Ciò eliminerebbe qualsiasi linea di confine sfocata nel caso in cui l'utente imposta "BorderThickness" su un valore diverso da zero. – DaveS

22

Più semplice soluzione qui utilizzando già definito lo stile della barra degli strumenti:

<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
     Content="You know I'm flat..." /> 
0

Se avete solo bisogno di fare il pulsante "invisibile", ma highlight in grado:

bb.Background = new SolidColorBrush (Colors.White); bb.BorderBrush = new SolidColorBrush (Colors.White);