当前位置：文江博客话题详情

灯箱式效果“锁定”用户界面？

发布于 2024-10-14 19:58:25 字数 646 浏览 2 评论 0原文

我正在 WPF 中寻找一种从用户角度本质上“锁定”UI 的方法：使其无法在不实际导致锁定条件的情况下进行交互，并直观地显示它已锁定。

我们的内部网络框架完全实现了我想要做的事情。如果您手边有 firebug （或类似的），您可以亲自看看我在说什么：

1) 转到 http ://www.livetechnology.com/

2) 打开 firebug 控制台

3) 输入 LT.LiveUI.Util.lockUI(LO.MainSkin.MainArea, { Message: "Optional Text" });进入控制台

您应该看到用户界面以我想要实现的方式“锁定”。用户无法与该界面交互，并且除了隐含地让用户意识到该界面无法使用之外，还会显示一条消息。

这类似于灯箱覆盖界面并显示内容的方式。

我的应用程序通过网络完成一些工作，这需要一些时间，我不想使用简单的模式或禁用 UI 上的每个元素并使其看起来很愚蠢（除了无法使用之外），我想采用这种效果。

透明的阴影覆盖层会是一个很好的触感（在我看来）。我（当然）知道我可以在没有模式对话框的阴影覆盖的情况下完成此任务，但是用户经常左键单击那里的 UI，但什么也不做。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九公里浅绿 2024-10-21 19:58:25

当然;您只需要一个半透明矩形，其可见性绑定到布尔“lock”属性（使用 BooleanToVisibilityConverter）。

只要该元素可见并且命中测试可见，它将阻止对其下方所有内容的点击访问。我记得，您可能还需要捕获 Tab 键按下并将其标记为已处理，以防止用户按 Tab 键切换到其他控件。

我已经使用这种技术来创建灯箱，并使用了一个背景按钮，这样单击对话框外部就会将其关闭。

回复收藏 0 原文

汐鸠 2024-10-21 19:58:25

这是我在阅读了几篇关于修改颜色的 Alpha 以模拟灯箱效果的文章后所做的事情。我有一个将占据全屏的窗口，它的背景颜色是使用故事板进行动画处理的。只需将您的内容/xaml 添加到 grdContent 中即可。希望它有帮助。

lt;Window x:Name="window" x:Class="DropShadowEffect.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" WindowState="Maximized"  WindowStyle="None" AllowsTransparency="True"   >
<Window.Resources>
    <Storyboard x:Key="Storyboard1">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="window">
            <EasingColorKeyFrame KeyTime="0" Value="Transparent"/>
            <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#66605757"/>
        </ColorAnimationUsingKeyFrames>

    </Storyboard>

</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    </EventTrigger>
</Window.Triggers>
<Grid Name="grdContent" Width="400" Height="500"  Background='#FFFFFFFF'>
    <TextBlock>your cobtent goes here!!!!!!!!!!</TextBlock>
</Grid>

This is what i have done after reading couple of posts about modifying the alpha of the color to simulate the lightbox effect. i have the window which is gonna occupy full screen, its bacground color is animated using a Storyboard. Just add your content/xaml to the grdContent. hope its helpful.

lt;Window x:Name="window" x:Class="DropShadowEffect.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" WindowState="Maximized"  WindowStyle="None" AllowsTransparency="True"   >
<Window.Resources>
    <Storyboard x:Key="Storyboard1">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="window">
            <EasingColorKeyFrame KeyTime="0" Value="Transparent"/>
            <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#66605757"/>
        </ColorAnimationUsingKeyFrames>

    </Storyboard>

</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    </EventTrigger>
</Window.Triggers>
<Grid Name="grdContent" Width="400" Height="500"  Background='#FFFFFFFF'>
    <TextBlock>your cobtent goes here!!!!!!!!!!</TextBlock>
</Grid>

回复收藏 0 原文

~没有更多了~