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

所以这里是我过去如何做到这一点的一个例子。我将采取额外的步骤并将一个Storyboard动画放在一起，对一个对象上Clip的属性更改进行排序，以向您展示它在您的教程场景中是如何工作的（它在最后一个版本中做得非常好）项目我这样做了。）除了星期五，我已经迟到了离开办公室。：）

PS：忘了提到原来我只是将命名的矩形折叠在我希望以-5边距展示的每个控件的顶部。一旦他们的可见性切换为可见并且他们返回Rectangle.RenderedGeometry，您就可以使用xaml的几何图形绑定Rect。

或者......如果你不需要它是动态的，并且你不介意在最外面的父级上面使用x层。你总是可以在Blend中加载它 - ＆gt;将Rectangle放在最顶部的z-index上，使其覆盖所有具有不透明度的内容，在高亮区域上绘制一个矩形 - ＆gt;选择两者 - ＆gt; [从顶部文件菜单]选择对象 - ＆gt;选择路径 - ＆gt;选择“制作复合路径”，瞧，你有一个形状，你只需切换可见性并循环播放故事板。

如果您有任何问题或者如果您希望我向您展示更多地使用这个概念，请告诉我们，您可以在“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的控件

1 个答案: