nikobarli
Topic Author
Posts: 164
Joined: 26 Apr 2017, 06:23

Simulating modal dialog inside a view

24 Jul 2017, 07:14

Hi,

I would like to simulate a modal dialog inside a view. Creating a popup panel is easy, but it is hard to handle the details.

For example, I created the following XAML:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:XamlWithBlend"
             d:DesignHeight="600" d:DesignWidth="1000">
    <Grid>
    	<!-- Input bindings to simulate hot-key commands -->
        <Grid.InputBindings>
            <KeyBinding Gesture="CTRL+T" Command="{Binding SayHelloCommand}"/>
        </Grid.InputBindings>
        
        <!-- Contents is here -->
        <Grid IsHitTestVisible="False">
        </Grid>

	<!-- Modal dialog with a textbox hovering on top of contents -->
        <Grid Opacity="0.5" 
          	KeyboardNavigation.ControlTabNavigation="Cycle" 
          	KeyboardNavigation.TabNavigation="Cycle" 
          	KeyboardNavigation.DirectionalNavigation="Cycle">
            <TextBox VerticalAlignment="Center" HorizontalAlignment="Center">Blocker</TextBox>
        </Grid>
    </Grid>
</UserControl>

The details I have added are as follows:
1. Added IsHitTestVisible="False" while displaying the modal dialog to avoid mouse events to be handled by the contents
2. Added KeyboardNavigation.* = "Cycle" to avoid focus to move outside the modal dialog when pressing various navigation keys (Tab, Alt-Tab, Shift-Tab)

One remaining details that I couldn't solve is how to block the Ctrl-T input binding, i.e. to avoid "SayHelloCommand" firing when the dialog is showing.

Do you have any advice ?
 
andekande
Posts: 5
Joined: 23 Jul 2017, 23:33

Re: Simulating modal dialog inside a view

24 Jul 2017, 22:04

I am totally new to Noesis, but in WPF i would spawn a new window and set its Owner property to the MainWindow.
In case there are Adorners available in Noesis, then attatch one to the RootGrid and put a filled Border with HitTestVisible=false in it. As Adorners are always attached Topmost, that acts as a Mouse blocker. Keybindings on the RootGrid are blocked by setting IsEnabled=false on the Border ...

Still if you need to go the View-in-View approach you can check to adapt this project: ModalContentPresenter
<c:ModalContentPresenter IsModal="{Binding DialogIsVisible}">
   <Grid><!--MainContent--></Grid>
   <c:ModalContentPresenter.ModalContent>
      <TextBox VerticalAlignment="Center" HorizontalAlignment="Center">Blocker</TextBox>
   <c:ModalContentPresenter.ModalContent>
</c:ModalContentPresenter>
 
nikobarli
Topic Author
Posts: 164
Joined: 26 Apr 2017, 06:23

Re: Simulating modal dialog inside a view

26 Jul 2017, 09:19

HI @andekande,

Thanks for the information.

Yes, I am aware that I can spawn a new window to get a modal behavior, but I am investigating how to create a modal dialog with a scope of a view. This is similar to when you use web apps on tab browsers. The scope of a modal dialog is only on the tab, not the whole browser.

I downloaded and experimented with the ModalContentPresenter. But it seems it also lack the capability to block the KeyBindings set at the root element.

So maybe the workaround is just to avoid setting the KeyBindings at the root as follows:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:XamlWithBlend"
             d:DesignHeight="600" d:DesignWidth="1000">
    <Grid>
    
        <!-- Contents is here -->
        <Grid IsHitTestVisible="False">
	    	<!-- Input bindings to simulate hot-key commands -->
	    	<!-- Put at lower ui tree level than the modal dialog -->
        	<Grid.InputBindings>
            	    <KeyBinding Gesture="CTRL+T" Command="{Binding SayHelloCommand}"/>
        	</Grid.InputBindings>
        	....        
        </Grid>

	<!-- Modal dialog with a textbox hovering on top of contents -->
        <Grid Opacity="0.5" 
          	KeyboardNavigation.ControlTabNavigation="Cycle" 
          	KeyboardNavigation.TabNavigation="Cycle" 
          	KeyboardNavigation.DirectionalNavigation="Cycle">
            <TextBox VerticalAlignment="Center" HorizontalAlignment="Center">Blocker</TextBox>
        </Grid>
    </Grid>
</UserControl>
 
User avatar
sfernandez
Site Admin
Posts: 1655
Joined: 22 Dec 2011, 19:20

Re: Simulating modal dialog inside a view

26 Jul 2017, 09:41

So maybe the workaround is just to avoid setting the KeyBindings at the root as follows...
That is exactly the idea I was going to suggest. Having the KeyBinding in another branch of the UI tree would avoid that key events are routed through that branch when the modal dialog is shown. I think your approach is the best way to implement a modal dialog inside a unique View.
 
nikobarli
Topic Author
Posts: 164
Joined: 26 Apr 2017, 06:23

Re: Simulating modal dialog inside a view

26 Jul 2017, 10:50

Ok, thanks !
 
User avatar
sfernandez
Site Admin
Posts: 1655
Joined: 22 Dec 2011, 19:20

Re: Simulating modal dialog inside a view

31 Jul 2017, 17:18

Great, I'm setting this topic as solved.
 
whidbey
Posts: 49
Joined: 26 May 2019, 07:16

Re: Simulating modal dialog inside a view

02 Jun 2019, 06:19

HI @andekande,

Thanks for the information.

Yes, I am aware that I can spawn a new window to get a modal behavior, but I am investigating how to create a modal dialog with a scope of a view. This is similar to when you use web apps on tab browsers. The scope of a modal dialog is only on the tab, not the whole browser.

I downloaded and experimented with the ModalContentPresenter. But it seems it also lack the capability to block the KeyBindings set at the root element.

So maybe the workaround is just to avoid setting the KeyBindings at the root as follows:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:XamlWithBlend"
             d:DesignHeight="600" d:DesignWidth="1000">
    <Grid>
    
        <!-- Contents is here -->
        <Grid IsHitTestVisible="False">
	    	<!-- Input bindings to simulate hot-key commands -->
	    	<!-- Put at lower ui tree level than the modal dialog -->
        	<Grid.InputBindings>
            	    <KeyBinding Gesture="CTRL+T" Command="{Binding SayHelloCommand}"/>
        	</Grid.InputBindings>
        	....        
        </Grid>

	<!-- Modal dialog with a textbox hovering on top of contents -->
        <Grid Opacity="0.5" 
          	KeyboardNavigation.ControlTabNavigation="Cycle" 
          	KeyboardNavigation.TabNavigation="Cycle" 
          	KeyboardNavigation.DirectionalNavigation="Cycle">
            <TextBox VerticalAlignment="Center" HorizontalAlignment="Center">Blocker</TextBox>
        </Grid>
    </Grid>
</UserControl>

great; usercontrol has to put in mainwindow.xml?
 
User avatar
sfernandez
Site Admin
Posts: 1655
Joined: 22 Dec 2011, 19:20

Re: Simulating modal dialog inside a view

02 Jun 2019, 11:59

usercontrol has to put in mainwindow.xml?
I don't understand the question, could you please elaborate a bit more?
 
whidbey
Posts: 49
Joined: 26 May 2019, 07:16

Re: Simulating modal dialog inside a view

02 Jun 2019, 14:40

usercontrol has to put in mainwindow.xml?
I don't understand the question, could you please elaborate a bit more?
I mean each usercontrols will put in a different .xaml file?
 
whidbey
Posts: 49
Joined: 26 May 2019, 07:16

Re: Simulating modal dialog inside a view

02 Jun 2019, 16:06

usercontrol has to put in mainwindow.xml?
I don't understand the question, could you please elaborate a bit more?
I mean each usercontrols will put in a different .xaml file?
Iunderstand thanks。could put to a new xaml file

Who is online

Users browsing this forum: No registered users and 3 guests