Home » WPFRSS

How do you dim a WPF page to bring to focus something I want to user to interact with?

In the WPF app I'm writing, to replace an old VB6 app, there are a few places in the app in which it has to collect some text data from the user.  Let me explain.

In the old VB6 app we've got several combo boxes which lists all of the items that the user can select from.  However, since this is for an intake situation, sometimes the clients that the user of our application is working with, will say something which isn't in the dropdown, nor is it in the database.  In such situations the user selects "Other", and then a simple Windows dialog box pops up, asking the user to enter whatever it is that is new, that the client is telling them.  This gets stored in a separate table for these exceptional cases.

This paradigm has worked fine for the last 15 years.  However, user interfaces have changed, and I believe users expectations have too.  What I would like to do is something I've seen done dozens of times on websites.  Sometimes, when the user does something which requires the user to pay particular attention to it, then the whole web page fades and then the thing the user is supposed to work with is front and center.  My guess is what's going on is the web designer has put a hidden <div> element on the page, and then when the user has to do something special, the page fades and, using JavaScript the hidden <div> element is made visible and is centered on the page.  That way the user knows they've got to enter data, or whatever, and click on some sort of OK button.  Then the data is put wherever it's got to go and this <div> element is made invisible again, and lastly the page is no longer made dim.

I would like to do the same thing with WPF, but how do I do that?

 

4 Answers Found

 

Answer 1

I've not yet tried to do it, but you could actually use a very similar technique to that which you described...make a Grid or Panel the size of the window or page  and give it a background color like gray or something...have it's opacity set to 0 and you can then animate the opacity to say .5 or so at the time you want your background to become gray.  It should be a pretty straight forward implementation...just remember to put  your grid/panel on top of the rest of your controls (ie. at the bottom of the window/page's xaml).

 

Hope it helps,

Aj

 

Answer 2

Yep, to add to what Aj said, you may wish to alter the ZIndex of the dimming rectangle and focused control so the control is on top, then the dimming rectangle, then the rest of the control on the window/page.

 

I suppose you could also use 4 rectangles, and position them around the control you want lit up.

 

Answer 3

I've got some follow-up questions that I'd like to ask.  First, I like what you said here, Matt, about specifying the ZOrder for the control on top of the border.  Unfortunately, for me, it appears to still be as dimmed as the border is, and I'm not sure how to fix that.  The XAML is small enough, so I'm going to include it all here:

<Window x:Class="SimpleWPFwithDimming.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
				xmlns:local="clr-namespace:SimpleWPFwithDimming"
  Title="Window1" Height="400" Width="400">
  <Grid>
		<TextBlock Height="21" Margin="120,42,138,0" Name="textBlock1" VerticalAlignment="Top" Text="This is some text" />
		<Button Margin="82,84,75,0" Name="btnDoSomething" Click="btnDoSomething_Click" Height="29" VerticalAlignment="Top">Bring up the dialog  box (or whatever)</Button>
		<Border Name="theShadowbox" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Black"
						Opacity="0.50" Width="378" Height="362" Visibility="Collapsed" Panel.ZIndex="10">
			<local:UserControlTest x:Name="ucMyControl" WeAreDone="ucMyControl_WeAreDone" Panel.ZIndex="12" />
		</Border>
	</Grid>
</Window>

Second, how do I make the user  control resize properly as the user resizes the main window (Window1)?

 

 

Answer 4

Sure. In response to the first question, you've specified ucMyControl to be a child of 'theShadowBox' Border, therefore ucMyControl will always be drawn *under* that border if you get me. You don't have to make ucMyControl a child of that border, it can just be another child of the Grid, but you could also use a DataTrigger to set the Visibility of it if you wanted.

 

The reason the UserControl is not resizing is because you've hardcoded a size for the Border it's a child of. 

<BorderName="theShadowbox"VerticalAlignment="Center"HorizontalAlignment="Center"Background="Black" Opacity="0.50"Width="378"Height="362"Visibility="Collapsed"Panel.ZIndex="10"><local:UserControlTestx:Name="ucMyControl"WeAreDone="ucMyControl_WeAreDone"Panel.ZIndex="12"/></Border>

Just remove the Height=/Width= ( they'll default to 'Auto'), and everything should resize correctly.

Warm regards,
Matt

 
 
 
 
 
 

<< Previous      Next >>

Microsoft   |   Windows   |   Visual Studio   |   Follow us on Twitter