开发者

Lightbox-esque effect to "lock" UI?

I'm looking for a way in WPF to essentially "lock" the UI from the user perspective: make it impossible to interact with without actually causing a lock-up condition, and intuitively displaying that it is locked.

Our in-house web framework accomplishes exactly开发者_高级运维 what I would like to do. If you've got firebug (or similar) handy, you can see for yourself what I am talking about:

1) go to http://www.livetechnology.com/

2) open the firebug console

3) enter LT.LiveUI.Util.lockUI(LO.MainSkin.MainArea, { Message: "Optional Text" }); into the console

You should see the user interface get "locked" in the way I would like to achieve. The user cannot interact with the interface, and a message is displayed, in addition to the user being made aware rather implicitly that the interface cannot be used.

This is similar to how a Lightbox will cover over an interface and display the content.

My application does some work over the network which will take some time, and instead of using a simple modal or disabling every element on my UI and making it look stupid (in addition to being unusable), I would like to employ this effect.

The transparent, shaded overlay would be a nice touch (in my opinion). I (of course) know that I can accomplish this without the shaded overlay with a modal dialog, but then the user is often left clicking on a UI that is there but does nothing.


Sure; you just need a semitransparent rectangle whose visibility is bound to a boolean "lock" property (with the BooleanToVisibilityConverter).

As long as the element is visible and hit-test visible, it will block click access to everything below it. As I recall, you may also need to catch a tab press and mark it as handled to prevent the user from tabbing to other controls.

I've used this technique to create lightboxes, and have used a button for the background so that clicking outside of the dialog would dismiss it.


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.

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜