Border Double avec un VisualBrush dans WPF

Question

Je suis curieux de savoir si quelqu'un connaît un moyen d'obtenir facilement un effet double frontière WPF semblable à ce que vous voyez dans les éléments sélectionnés dans l'Explorateur Windows dans Windows 7.

Si vous regardez attentivement, vous remarquerez que l'élément sélectionné a une bordure sombre, une bordure intérieure plus claire, puis un arrière-plan dégradé.

Actuellement, j'utilise deux bordures autour d'un objet chaque fois que je veux obtenir cet effet. Le faire de cette façon est laide syntaxique et vraiment embrouille ma vue xaml. En tant que développeur web, j'aimerais séparer la structure xaml du style autant que possible. Donc, j'ai commencé à mettre cela dans les styles et les modèles de contenu afin de le sortir de ma vue xaml.

Cependant, je suis curieux de savoir s'il existe une meilleure façon de procéder.

J'ai joué pendant un moment en utilisant un VisualBrush comme arrière-plan pour essayer d'obtenir l'effet. Cependant, je veux pouvoir appliquer l'arrière-plan à des éléments de n'importe quelle taille et la façon dont VisualBrush a étiré le visuel pour qu'il corresponde à l'arrière-plan de l'élément n'a pas fonctionné comme je le souhaitais. Essentiellement, je voudrais vraiment que cela étire le visuel de la façon dont le système de mise en page WPF le ferait.

Toutes les idées seraient grandement appréciées.

- Dusty

Answer 1

Un VisualBrush est probablement pas ce que vous voulez faire dans ce scénario, car il est assez lourd.

Vous pouvez résoudre le problème avec certains Xaml sans bordures imbriquées.

Par exemple,

<Border BorderBrush="#FF00B5C5" BorderThickness="1" CornerRadius="2" Background="White"> 
    <Grid Background="#FF00B5C5" Margin="1"> 
    <Rectangle Fill="#FFA2F2FE" /> 
    <TextBlock Text="This is some text" VerticalAlignment="Center"/> 
    </Grid> 
</Border> 

Vous pouvez, bien sûr, modifier les propriétés pour obtenir le look dont vous avez besoin.

EDIT: Si vous voulez créer un style, vous pouvez Reskin le look-and-feel, vous pouvez faire quelque chose comme ceci:

<Window.Resources> 
    <Style x:Key="BorderedTextBlock" TargetType="ContentControl"> 
     <Setter Property="ContentTemplate"> 
      <Setter.Value> 
       <DataTemplate> 
        <Border BorderBrush="#FF00B5C5" BorderThickness="1" CornerRadius="2" Background="White"> 
         <Grid Background="#FF00B5C5" Margin="1"> 
         <Rectangle Fill="#FFA2F2FE" /> 
         <TextBlock Text="{Binding}" VerticalAlignment="Center"/> 
         </Grid> 
        </Border> 
       </DataTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

<Grid x:Name="LayoutRoot"> 
    <ContentControl Style="{StaticResource BorderedTextBlock}" Content="This is some text" Width="200" Height="24"/> 
</Grid> 

De plus, en faire un contrôle personnalisé avec tous les les paramètres de style et de thème dont vous avez besoin.

Espoir qui aide,

Sergio