我需要创建一个 UserControl,它有一部分控件的背景是透明的。透明部分被切割成 Border 的形状,CornerRadius 为 2 -- 这是设计所必需的。
这是我无法运行的代码:
<UserControl Margin="1" x:Name="Box">
<UserControl.Resources>
<Style TargetType="UserControl">
<Setter Property="Height" Value="16" />
</Style>
</UserControl.Resources>
<Grid>
<Border CornerRadius="2" BorderThickness="0">
<Border.Background>
<SolidColorBrush Color="Black" Opacity=".3" />
</Border.Background>
<Border.OpacityMask>
<VisualBrush>
<VisualBrush.Visual>
<Grid
Background="Black"
Width="{Binding ElementName=Box, Path=ActualWidth}"
Height="{Binding ElementName=Box, Path=ActualHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Column="1" Margin="1" CornerRadius="2" Background="Transparent" BorderThickness="0" />
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Border.OpacityMask>
</Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
VerticalAlignment="Center" TextAlignment="Right" FontSize="10" Margin="2"
Foreground="White" Text="Property" />
<TextBlock
Grid.Column="1" VerticalAlignment="Center" TextAlignment="Center" FontSize="10" Margin="2"
Text="Value" />
</Grid>
</Grid>
</UserControl>
我做了一些更改,所以你们应该能够将其直接放入 XamlPad 中。
出于某种原因,设置为边框的 OpacityMask 的 VisualBrush 根本无法工作。 OpacityMask 仅显示完全可见的所有内容。为了进行测试,我放入了一个快速的 LinearGradientBrush,它按预期工作。
同时使用 VisualBrush 和 OpacityMask 是否存在问题?这里出了什么问题?
这是我要实现的目标的屏幕截图:
ScreenShot http://monitor.utopiaselfscan.com/Screen.png
UserControl 是显示实体号、进度、小时等的标题。它们是黑色的,透明度为 30%,并有一个圆角矩形不透明蒙版切口。我通常使用图像来渲染这样的东西,因为我们的图形艺术家会为玻璃效果而疯狂。
最佳答案
您代码中的 Box
是谁?您还可以添加您想要实现的目标的图片吗?
您是否尝试过路径来获得您想要的东西?例如。以下路径:
<Path Stroke="Black" Stretch="Fill" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<GeometryGroup FillRule="EvenOdd" >
<EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />
<RectangleGeometry Rect="30,55 100 30" />
</GeometryGroup>
</Path.Data>
</Path>
给你这个切口: alt text http://img704.imageshack.us/img704/928/cutw.jpg
编辑:这是实现您的设计的一种方法:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<SolidColorBrush x:Key="FillBrush" Color="Gray" Opacity="0.3"/>
</Page.Resources>
<Grid>
<!-- Set background image here, instead of border-->
<Border>
<Border.Background>
<LinearGradientBrush>
<GradientStop Color="#FFcacaca"/>
<GradientStop Offset="1" Color="#FF353535"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<!-- Content goes here -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border
MinHeight="24"
MinWidth="100"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Background="{StaticResource FillBrush}"
CornerRadius="15, 0, 0, 15"
Padding="0, 0, 5, 0">
<TextBlock
HorizontalAlignment="Right"
VerticalAlignment="Center"
Foreground="White"
Text="From"/>
</Border>
<Border
MinHeight="24"
MinWidth="100"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
BorderBrush="{StaticResource FillBrush}"
BorderThickness="1"
CornerRadius="0, 15, 15, 0">
<TextBox
Margin="5, 0, 5, 0"
VerticalAlignment="Center"
Background="Transparent"
BorderThickness="0"
Foreground="#2f3740"
Text="Verylongname, Johnathan"/>
</Border>
</Grid>
</Grid>
</Page>
要点就是使用两个边框和一个画笔。对于标题字段,您绘制边框的背景,对于内容字段,您绘制边框的边框:)。
干杯,安瓦卡。
关于C#、WPF - VisualBrush 和 OpacityMask,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1941508/