使用 OpacityMask 控件

Question

我正在写一个应用程序。我想要一个教程模式，在该模式下，应用程序的屏幕会变暗，并且允许应用程序的单个功能通过。在我的实际应用程序中，我有很多数据网格和列表框，所以我认为实现此目的最简单的方法可能是用半透明面板覆盖整个屏幕，然后以某种方式使用不透明蒙版来透视某些区域的蒙版以突出显示它们在我的应用程序中，而教程解释了它们的作用。唯一的问题是，我无法让不透明蒙版与视觉画笔一起工作并挑选出特定对象，如列表框。下面是我编写的一个示例程序，用于演示我正在尝试做的事情。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBlock Text="Two different text listboxes"/>

    <ListBox Grid.Row="1" Name="myListBox1" Grid.Column="0" VerticalAlignment="Top">
        <ListBoxItem Content="Item 1" Margin="3" Background="Tan"/>
        <ListBoxItem Content="Item 2" Margin="3" Background="Aqua"/>
        <ListBoxItem Content="Item 3" Margin="3" Background="Gold"/>
    </ListBox>

    <ListBox Grid.Row="1" Name="myListBox2" Grid.Column="1" VerticalAlignment="Top">
        <ListBoxItem Content="Item A" Margin="3" Background="Magenta"/>
        <ListBoxItem Content="Item B" Margin="3" Background="Chartreuse"/>
        <ListBoxItem Content="Item C" Margin="3" Background="Chocolate"/>
        <ListBoxItem Content="Item D" Margin="3" Background="Pink"/>
    </ListBox>


    <Button Grid.Row="2" Height="40" Margin="5" Content="Click me" Grid.ColumnSpan="2"/>

    <DockPanel Grid.RowSpan="3" Background="#55000000" Grid.ColumnSpan="2">
        <DockPanel.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=myListBox1}"/>
        </DockPanel.OpacityMask>
    </DockPanel>
</Grid>

任何人都可以给我任何关于如何简单地完成这个面具的提示吗？

Answer 1

所以这里有一个例子，说明我过去是如何做到这一点的。我打算采取额外的步骤，将一个情节提要动画放在一起，对一个对象上 Clip 的属性更改进行排序，以向您展示它如何在您的教程场景中工作（它确实做得很好在我做的最后一个项目中做得很好。）除了今天是星期五，我已经运行迟到了离开办公室。 :)

PS: 忘了说，最初我只是把命名的矩形折叠在我想用 -5 边距炫耀的每个控件的顶部。一旦他们的可见性被切换为可见并且他们返回 Rectangle.RenderedGeometry，您只需 xaml.

就可以获取带有几何绑定的 Rect

或者...如果您不需要它是动态的，并且您不介意在最外层的父级之上添加 x 层。您总是可以在 Blend 中加载它 -> 将 Rectangle 放在最顶部的 z-index 上，以便它用不透明度覆盖所有内容，在突出显示区域上绘制一个 Rectangle -> Select 两者 -> [来自顶部文件菜单] Select 对象 -> Select 路径 -> Select "Make Compound Path" 瞧，你有一个形状，你可以打开可见性并在故事板中循环每个形状。

如果您有任何问题或希望我向您展示如何更多地利用这个概念，请告诉我，您可以在 "PresenterForeground" 上的 StaticResource 上手动更改 Box1、Box2、Box3 等] 虽然看到这个概念在行动。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="350">
    <Window.Resources>
        <!-- These guys are for example, you could change the StaticResource on the Clip of the Rectangle
             below to reflect the changes here with a property change in a storyboard, or from a trigger, whatever -->
        <Geometry x:Key="Box1">M0,0 L280,0 L280,280 L0,280 z M10,10 L130,10 L130,130 L10,130 z</Geometry>
        <Geometry x:Key="Box2">M0,0 L280,0 L280,280 L0,280 z M150,10 L270,10 L270,130 L150,130 z</Geometry>
        <Geometry x:Key="Box3">M0,0 L280,0 L280,280 L0,280 z M10,150 L130,150 L130,270 L10,270 z</Geometry>
        <Geometry x:Key="Box4">M0,0 L280,0 L280,280 L0,280 z M150,150 L270,150 L270,270 L150,270 z</Geometry>
    </Window.Resources>

        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.Resources>
                <Style TargetType="Rectangle">
                    <Setter Property="Width" Value="100"/>
                    <Setter Property="Height" Value="100"/>
                    <Setter Property="Margin" Value="20"/>
                </Style>
            </Grid.Resources>

            <Rectangle Fill="Red"/>
            <Rectangle Grid.Column="1" Fill="Blue"/>
            <Rectangle Grid.Row="1" Fill="Green"/>
            <Rectangle Grid.Row="1" Grid.Column="1" Fill="Orange"/>

            <!-- This guy is our main foreground to cut visibility to everything else -->
            <Rectangle Name="PresenterForeground" Grid.ColumnSpan="2" Grid.RowSpan="2"
                Fill="#77000000" 
                Height="Auto"
                Width="Auto" 
                Margin="0"
                Clip="{StaticResource Box1}"/>

        </Grid>

</Window>

希望这对您有所帮助，祝您周末愉快，干杯！

使用 OpacityMask 控件

Using a control for OpacityMask

wpf

xaml

opacitymask