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>
精彩评论