Simulating modal dialog inside a view
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:
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 ?
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:
Code: Select all
<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>
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 ?
Re: Simulating modal dialog inside a view
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
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
Code: Select all
<c:ModalContentPresenter IsModal="{Binding DialogIsVisible}">
<Grid><!--MainContent--></Grid>
<c:ModalContentPresenter.ModalContent>
<TextBox VerticalAlignment="Center" HorizontalAlignment="Center">Blocker</TextBox>
<c:ModalContentPresenter.ModalContent>
</c:ModalContentPresenter>
Re: Simulating modal dialog inside a view
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:
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:
Code: Select all
<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>
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: Simulating modal dialog inside a view
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.So maybe the workaround is just to avoid setting the KeyBindings at the root as follows...
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: Simulating modal dialog inside a view
Great, I'm setting this topic as solved.
Re: Simulating modal dialog inside a view
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:
Code: Select all<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?
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: Simulating modal dialog inside a view
I don't understand the question, could you please elaborate a bit more?usercontrol has to put in mainwindow.xml?
Re: Simulating modal dialog inside a view
I mean each usercontrols will put in a different .xaml file?I don't understand the question, could you please elaborate a bit more?usercontrol has to put in mainwindow.xml?
Re: Simulating modal dialog inside a view
Iunderstand thanks。could put to a new xaml fileI mean each usercontrols will put in a different .xaml file?I don't understand the question, could you please elaborate a bit more?usercontrol has to put in mainwindow.xml?
Who is online
Users browsing this forum: No registered users and 11 guests