Question

当下拉列表打开时，我需要在某个元素上添加背景。

我的意思 - 当您打开模态窗口时在Bootstrap中 - 背景变暗并且无法点击（默认设置）(Live example)

我应该在dropDown open事件上添加触发器，它会在某个元素上添加一些背景（背景）并禁用此元素吗？

Answer 1

这是你想要的非常强大的效果模仿。

XAML：

<Grid>
    <TextBlock Text="SomeContent" />
    <Button Content="Click"
            HorizontalAlignment="Center"
            VerticalAlignment="Bottom"
            Click="Button_Click">
        <Button.ContextMenu>
            <ContextMenu Opened="ContextMenu_Opened"
                         Closed="ContextMenu_Closed">
                <MenuItem Header="Test" />
            </ContextMenu>
        </Button.ContextMenu>
    </Button>
    <Grid x:Name="overlay"
          Visibility="Collapsed"
          Background="#50000000" />
</Grid>

CS：

void Button_Click(object sender, RoutedEventArgs e) => ((Button)sender).ContextMenu.IsOpen = true;
void ContextMenu_Opened(object sender, RoutedEventArgs e) => overlay.Visibility = Visibility.Visible;
void ContextMenu_Closed(object sender, RoutedEventArgs e) => overlay.Visibility = Visibility.Collapsed;

以下是它的工作原理：

想法是创建半透明图层（背景？），在菜单打开时显示。

应该很容易改进：使用绑定，添加效果等。

Answer 2

我找到了解决方案。

我刚刚添加了一些带有ZIndex和背景的网格。

当切换按钮被检查时此网格变得可见而在另一种情况下不可见（当点击此GRID（覆盖）时 - 然后我强制点击切换按钮 - 这就是我设法隐藏GRID的方式......简单的事情模态背景的Bootstrap行为）。

<Grid x:Name="Overlay" Panel.ZIndex="2" Grid.Row="1">
        <Grid.Background>
            <SolidColorBrush Color="Black" Opacity=".3"/>
        </Grid.Background>
        <Grid.Style>
            <Style TargetType="Grid">
                <Setter Property="Visibility" Value="Collapsed"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=FiltersButton}" Value="True">
                        <Setter Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="UIElement.MouseDown">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <BooleanAnimationUsingKeyFrames Storyboard.TargetName="FiltersButton" Storyboard.TargetProperty="(ToggleButton.IsChecked)">
                                <DiscreteBooleanKeyFrame KeyTime="0:0:00.0" Value="False" />
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Grid.Triggers>
    </Grid>

也许还有另一种方法（更简单或代码更少）来绑定可见性逻辑......

在WPF中添加BackDrop

2 个答案: