首页 文章

在WPF模板中屏蔽（opacitymask颠倒）

提问于
浏览 次
2

我目前正在重做一个groupBox的模板 . 我希望 Headers 顶部有圆角，底部有“倒”圆角：

alt text

我通过将内容部分的顶角四舍五入并将内容放在具有最暗颜色作为背景的“背景”容器之上来轻松管理上述模板 .

但...

我的规范要求内容的背景（图片上的lightgray）可能是透明的（即：应该可以直观地看到内容部分，而不必松开 Headers 的背景颜色） . 这就是我被困的地方......

我可以很容易地将这个控件分成两排网格，一个用于 Headers ，另一个用于内容，顶部有一个很圆的角落，但我无法在 Headers 底部获得那些“倒”圆角， 我可以吗？

所以，如果有人可以，我会很高兴：

  • 指向我的解决方案（涉及任何脏技巧）

  • 确认我想做的事是不可能的

提前致谢

wpf templates masking

3 回答

  • 1

    我想出来了，使用Andrei提交的路径选项 .

    对于那些感兴趣的人，这里是最后的模板（使用cornerRadius为3）：

    <Border x:Name="Border"
        CornerRadius="3"
        Background="{TemplateBinding local:MyGroupBox.ContentBackground}"
        BorderThickness="{TemplateBinding BorderThickness}"
        BorderBrush="{TemplateBinding BorderBrush}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="3" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3"/>
            <ColumnDefinition/>
            <ColumnDefinition Width="3"/>
        </Grid.ColumnDefinitions>
        <Border x:Name="HeaderBorder"
                Grid.Row="0"
                Grid.ColumnSpan="3"
                CornerRadius="3,3,0,0"
                Background="{TemplateBinding Background}" />
        <ContentPresenter Grid.Row="0"
                            Grid.ColumnSpan="3"
                            Margin="6"
                            ContentSource="Header"
                            RecognizesAccessKey="True"
                            HorizontalAlignment="Center"/>
        <Path x:Name="LeftCorner"
                Grid.Row="1"
                Grid.Column="0"
                Stretch="Fill"
                Data="M0,0 L3,0 C1.3431457,0 0,1.3431457 0,3 L0,0 z"
                Fill="{TemplateBinding Background}"/>
        <Path x:Name="RightCorner"
                Grid.Row="1"
                Grid.Column="2"
                Stretch="Fill"
                Data="M0,0 L3,0 3,3 C3,1.3431457 1.6568543,0 0,0 z"
                Fill="{TemplateBinding Background}"/>
    </Grid>
</Border>
    回复于
  • 1

    您可以使用路径获取所需内容，该路径描述 Headers 的整个深灰色区域 . 您可以查看示例here并找出Path的数据 .

    回复于
  • 0

    也许顶部区域包含两个边界？

    <Border Background="Gray"
        Height="{TemplateBinding CornerRadius, 
                                 Converter={StaticResource ExtractHeight}}">
    <Border Background="{TemplateBinding Background}"
            CornerRadius="{TemplateBinding CornerRadius,
                                           Converter={StaticResource UseTop}}" />
</Border>

    你的下部区域在 Border 中会有类似的东西，只有 CornerRadius 属性的底角 .

    回复于

相关问题