Double Border с визуалой в WPF

Question

Мне интересно, если кто-нибудь знает способ легко получить двойной эффект границы в WPF подобно тому, что вы видите в выбранных элементах в проводнике Windows в Windows 7.

Если вы посмотрите внимательно, вы заметите, что выбранный элемент имеет темную границу, более светлую, внутреннюю границу, а затем фон градиента.

В настоящее время я использую две границы вокруг объекта в любое время, когда хочу достичь этого эффекта. Выполнение этого способа уродливо синтаксически и действительно мешает моему представлению xaml. Будучи веб-разработчиком в глубине души, я хотел бы как можно больше отделить структуру xaml от стиля. Итак, я начал размещать это в шаблонах Styles и Content Templates, чтобы вытащить его из моего представления xaml.

Тем не менее, мне любопытно, может ли быть лучший способ сделать это.

Я некоторое время играл с VisualBrush в качестве фона, чтобы попытаться получить эффект. Тем не менее, я хочу, чтобы иметь возможность применять фон к элементам, которые могут быть любого размера, и способ, которым VisualBrush растягивал визуальную форму, чтобы соответствовать фон элемента, не работал так, как я этого хотел. По сути, я бы просто хотел, чтобы он растягивал визуальный образ, как это делает система макета WPF.

Любые идеи были бы весьма признательны.

- Dusty

Answer 1

визуал, вероятно, не то, что вы хотите сделать в этом случае, так как это довольно тяжелые.

Вы можете решить эту проблему с помощью Xaml без границ вложенности.

Например,

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

Вы можете, конечно, настроить свойства, чтобы получить вид вам нужно.

EDIT: Если вы хотите создать стиль, так что вы можете Рескин внешний вид и на ощупь, вы можете сделать что-то вроде этого:

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

Кроме того, превратить это в пользовательский элемент управления со всеми параметры стиля и тематики, которые вам нужны.

Надежда, что помогает,

Sergio