Double Border con VisualBrush in WPF - wpf, visualbrush

Sono curioso di sapere se qualcuno è in grado di ottenere facilmente un effetto doppio bordo in WPF simile a quello che si vede negli elementi selezionati in Windows Explorer in Windows 7.

Se osservi attentamente, noterai che l'elemento selezionato ha un bordo scuro, uno più chiaro, un bordo interno e uno sfondo sfumato.

Attualmente sto usando due bordi attorno a un oggettoogni volta che voglio ottenere questo effetto. Farlo in questo modo è brutto sintatticamente e davvero confonde il mio punto di vista xaml. Essendo uno sviluppatore web in fondo mi piacerebbe separare il più possibile la struttura xaml dallo stile, quindi ho iniziato a inserirlo in Stili e Modelli di contenuto per estrarlo dalla mia vista xaml.

Tuttavia, sono curioso di sapere se potrebbe esserci un modo migliore per farlo.

Ho giocato per un po 'usando un VisualBrushcome sfondo per cercare di ottenere l'effetto. Tuttavia, voglio essere in grado di applicare lo sfondo a elementi che possono essere di qualsiasi dimensione e il modo in cui VisualBrush ha allungato la visuale per adattarsi allo sfondo dell'elemento non ha funzionato nel modo in cui volevo. Essenzialmente, mi piacerebbe davvero per estendere la visuale nel modo in cui il sistema di layout WPF lo farebbe.

Qualsiasi idea sarebbe molto apprezzata.

- Polveroso

risposte:

1 per risposta № 1

Un VisualBrush non è probabilmente quello che vuoi fare in questo scenario, in quanto è piuttosto pesante.

Puoi risolvere il problema con alcuni Xaml senza nidificare i bordi.

Per esempio,

<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>

È possibile, naturalmente, modificare le proprietà per ottenere l'aspetto desiderato.

EDIT: se vuoi creare uno stile, così puoi ridimensionare l'aspetto e il tatto, puoi fare qualcosa del genere:

<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>

Inoltre, trasformalo in un controllo personalizzato con tutti i parametri di stile e di tematizzazione necessari.

Spero possa aiutare,

Sergio

---