在WPF中使用VisualBrush的双边框

Question

我很好奇是否有人知道如何在WPF中轻松获得双边框效果，类似于您在Windows 7中的Windows资源管理器中所选项目中看到的内容。

仔细观察，您会发现所选项目的边框较暗，较浅，内边框，然后是渐变背景。

目前，我想在任何时候使用两个边框来实现此效果。这样做是语法上的丑陋，真的混淆了我的观点xaml。作为一名Web开发人员，我希望尽可能地将xaml结构与样式分开。所以，我已经开始将它放入样式和内容模板中，以便将其从我的视图xaml中删除。

然而，我很好奇是否有更好的方法来解决这个问题。

我使用VisualBrush作为背景玩了一会儿试图获得效果。但是，我希望能够将背景应用于任何大小的元素，并且VisualBrush拉伸视觉以适合元素背景的方式不能按我想要的方式工作。从本质上讲，我真的很喜欢以WPF布局系统的方式来扩展视觉效果。

非常感谢任何想法。

- 多尘

Answer 1

在这种情况下，VisualBrush可能不是你想要做的，因为它很重。

您可以使用某些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>

当然，您可以调整属性以获得所需的外观。

编辑：如果你想创建一个风格，你可以重新审视外观，你可以做这样的事情：

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

此外，将其转换为自定义控件，其中包含您需要的所有样式和主题参数。

希望有所帮助，

塞尔吉奥