Je ne peux pas supprimer étrange "frontière" lors du stylisme WPF bouton

J'essaye de styler un bouton WPF pour avoir des coins arrondis et une bordure noire. À la suite de plusieurs exemples en ligne, je suis venu avec le style suivant:Je ne peux pas supprimer étrange "frontière" lors du stylisme WPF bouton

<Style x:Key="MyBlackButton" TargetType="{x:Type Button}"> 
    <Setter Property="Background" Value="#FF282828"/> 
    <Setter Property="Foreground" Value="White"/> 
    <Setter Property="FontSize" Value="16"/> 
    <Setter Property="FontWeight" Value="Bold"/> 
    <Setter Property="Height" Value="40"/> 
    <Setter Property="OverridesDefaultStyle" Value="true" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid x:Name="ButtonGrid"> 
        <Border CornerRadius="5" BorderBrush="Black" BorderThickness="1" Background="{TemplateBinding Background}"> 
         <Grid Margin="10,0,10,2"> 
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/> 
         </Grid> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Button Content="My button" Style="{StaticResource MyBlackButton}" />

Cela ressemble presque bien, à l'exception de la frontière ne soit pas affichée correctement en haut et en bas du bouton, comme vous pouvez le voir ci-dessous le zoom sur le bouton réelle:

pour essayer d'isoler le problème que j'ajouté une bordure plus épaisse pour voir s'il y avait des changements. Comme vous pouvez le voir sur l'image suivante il y a une sorte de « frontière » à l'intérieur du bouton:

Donc, avec une fine bordure, la frontière semble flou en haut et en bas du bouton, et une bordure épaisse et une bordure intérieure sont visibles (ce que je suppose est visible au-dessus de la mince bordure qui la rend floue).

Que se passe-t-il ici? Pourquoi ne puis-je obtenir une jolie bordure autour du bouton?

Source

2017-02-20 GTHvidsten

'UseLayoutRounding = "true"' '&& SnapsToDevicePixels = "true"' – dymanoid

L'ajout de ces deux propriétés au style (en tant que setters) aidé un peu, mais pas complètement. Regardez cette image et vous pouvez voir la bordure supérieure n'est toujours pas une ligne noire: http://i.imgur.com/KdoMMur.png – GTHvidsten

C'est l'anti-aliasing qui cause cela.

Essayez le réglage

RenderOptions.EdgeMode="Aliased"

sur votre bouton.

Source

2017-02-20 16:04:17

Cela ne va pas rendre les bords des coins arrondis déchiquetés? (Pas en mesure de tester cela maintenant) – GTHvidsten

Oui, il le fera! Vous devez sélectionner des bordures lisses anti-aliasées qui ne semblent pas parfaites lorsque vous zoomez dessus, ou des bordures aliasées qui sont parfaites lorsque vous zoomez, mais qui ont l'air plus irrégulières en général. Je ne pense pas que vous puissiez avoir les deux sens. Personnellement, je pense que votre exemple que vous avez posté à l'origine semble très bien à des niveaux de zoom normaux. Il est difficile de dire avec la couleur gris foncé que vous utilisez, mais si vous définissez votre arrière-plan au rouge par exemple, la bordure noire 1px semble bien. –

Essayez cette

style = "{{x StaticResource: statique ToolBar.ButtonStyleKey}}">

Source

2017-02-21 06:13:26 Ragavan

Sur quel élément? – GTHvidsten

Je ne peux pas supprimer étrange "frontière" lors du stylisme WPF bouton

Répondre

Questions connexes