2

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

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

谁能给我任何关于如何简单地完成这个面具的提示？

4

1 回答 1

1

所以这是我过去如何做到这一点的一个例子。我将采取额外的步骤，将故事板动画组合在一起，以Clip对一个对象的属性更改进行排序，以向您展示它如何在您的教程场景中工作（它在我做的最后一个项目中做得很好） .) 除了今天是星期五，我离开办公室已经迟到了。:)

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

或者...如果您不需要它是动态的，并且您不介意在最外层的父级上添加 x 层。您总是可以在 Blend 中加载它-> 将 Rectangle 放在最顶部的 z-index 上，以便它覆盖所有不透明的东西，在突出显示区域上绘制一个 Rectangle -> 选择两者 -> [从顶部文件菜单] 选择对象 -> 选择路径 -> 选择“制作复合路径”，瞧，你有一个形状，你可以切换可见性并在故事板中循环。

如果您有任何问题，或者如果您想让我向您展示更多地利用这个概念，请告诉我，您可以StaticResource在“PresenterForeground”上手动更改 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>

希望这会有所帮助，周末愉快，干杯！

于 2015-03-06T22:24:18.167 回答