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

    Question

  • 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?


    Rod
    Thursday, June 03, 2010 8:18 PM

Answers

  • 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

    • Marked as answer by Rod at Work Friday, June 04, 2010 7:05 PM
    Thursday, June 03, 2010 8:44 PM
  • 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.

    • Marked as answer by Rod at Work Friday, June 04, 2010 7:05 PM
    Friday, June 04, 2010 1:54 AM

All replies

  • 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

    • Marked as answer by Rod at Work Friday, June 04, 2010 7:05 PM
    Thursday, June 03, 2010 8:44 PM
  • 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.

    • Marked as answer by Rod at Work Friday, June 04, 2010 7:05 PM
    Friday, June 04, 2010 1:54 AM
  • 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)?

     


    Rod
    Friday, June 18, 2010 5:03 PM
  • 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. 

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

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

    Warm regards,
    Matt

    Monday, June 21, 2010 1:28 AM