Create and Open Modless Window/Popup in XAML WPF

Question

Is is possible to create a modless Window/Pop up that can be opened with a button click in XAML. I need to be able to see the Parent Window and the child modless window side by side. The modless window needs to fit into my Grid initially and needs to expand to parent level when clicked on it.

The popup control has multiple bugs with it. The height of the popup control when expanded does not go for 100% screen height, it only goes for 75% screen height. Also the popup control takes too much time to load data.

Here is how i styled my expander control that has the Popup.

  <Style TargetType="Expander" x:Key="NotesSlider">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Expander" >
                    <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                           Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}} ,Path=ActualWidth}" 
                           Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}} ,Path=ActualHeight}"
                           x:Name="GridMain">
                        <Border x:Name="popupBorder" BorderBrush="White">
                            <!--<Popup IsOpen="True" PopupAnimation="Slide" x:Name="SlideOut" StaysOpen="True"
                            Placement="Relative" AllowsTransparency="True" Grid.Column="0" Width="Auto" Height="Auto">-->
                            <controls:PopupNonTopmost IsOpen="True" PopupAnimation="None" Placement="Relative" AllowsTransparency="True" StaysOpen="True"
                                             Topmost="False"  x:Name="SlideOut" Panel.ZIndex="10000" >

                                <Grid Margin="0 0 0 10" x:Name="gridContainer">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" x:Name="NoteHeaderRow"/>
                                        <RowDefinition Name="NotesContentRow" Height="0"/>
                                    </Grid.RowDefinitions>

                                    <Border 
                                Name="NoteBorder" 
                                Grid.Row="0" 
                                Background="{StaticResource NormalBrush}"
                                BorderBrush="{StaticResource NormalBorderBrush}"
                                BorderThickness="1" 
                                CornerRadius="0" >
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="20" />
                                                <ColumnDefinition Width="20" />
                                            </Grid.ColumnDefinitions>

                                            <ContentPresenter 
                            Grid.Column="0"
                            Margin="4" 
                            ContentSource="Header" 
                            RecognizesAccessKey="True" />

                                            <ToggleButton
                            IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,
                            RelativeSource={RelativeSource TemplatedParent}}"
                            OverridesDefaultStyle="True" 
                            Grid.Column="1"
                            Template="{StaticResource VerticalExpanderToggleButton}" 
                            Background="{StaticResource NormalBrush}" />

                                            <ToggleButton  x:Name="toggleMax"
                            OverridesDefaultStyle="True" 
                            Grid.Column="2"
                            Template="{StaticResource SliderToggleButton}" 
                            Background="{StaticResource NormalBrush}" />

                                        </Grid>
                                    </Border>

                                    <Border 
                    Name="NoteContent" 
                    Grid.Row="1" 
                    Background="{StaticResource WindowBackgroundBrush}"
                    BorderBrush="{StaticResource SolidBorderBrush}" 
                    BorderThickness="1,0,1,1" 
                    CornerRadius="0" >
                                        <ContentPresenter Margin="4" x:Name="content"/>
                                    </Border>

                                </Grid>


                            </controls:PopupNonTopmost>
                            <!--</Popup>-->
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True" SourceName="toggleMax">
                            <Setter TargetName="SlideOut" Property="PlacementTarget" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}}"/>
                            <Setter TargetName="SlideOut" Property="Width" Value="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Width,Converter={StaticResource PopupWidthConverter}}"/>
                            <Setter TargetName="SlideOut" Property="Height" Value="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Height,Converter={StaticResource PopupHeightConverter}}"/>
                            <Setter TargetName="popupBorder" Property="BorderBrush" Value="Black"/>
                            <!--<Setter TargetName="SlideOut" Property="Width" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}},Path=Width}"/>
                            <Setter TargetName="SlideOut" Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}},Path=ActualHeight}"/>-->


                        </Trigger>

                        <Trigger Property="IsChecked" Value="False" SourceName="toggleMax">
                            <Setter TargetName="SlideOut" Property="PlacementTarget" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}}}"/>
                            <Setter TargetName="SlideOut" Property="Width" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}},Path=Width}"/>
                            <Setter TargetName="SlideOut" Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}},Path=Height}"/>

                        </Trigger>


                        <Trigger Property="IsExpanded" Value="True">
                            <Setter TargetName="NotesContentRow" Property="Height" Value="{Binding ElementName=Content,Path=DesiredHeight}" />

                        </Trigger>

                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="NoteBorder" Property="Background"
                                    Value="{StaticResource DisabledBackgroundBrush}" />
                            <Setter TargetName="NoteBorder" Property="BorderBrush"
                                    Value="{StaticResource DisabledBorderBrush}" />
                            <Setter Property="Foreground"
                                    Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>


                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

What did you try? Why doesn't simple `new PopupWindow().Show()` work? — Vlad, Jul 16 '12 at 15:54
Vlad - the popup works. The problem is when i remove the width property of the popup, it sets the height of the popup to the height of the parent window but sets it to only 75% height of parent window when i set the width of popup to width of parent window. Also the popup takes a lot of time to load. — New Developer, Jul 16 '12 at 18:07
Okay, let's solve the problems one by one. (1) What do you want the height to be? Why do you want to remove the `Width` property? — Vlad, Jul 16 '12 at 19:15
(2) Well, how do you load the data? There are 2 usual ways: either you first load the data to some internal structures (presumably in a background thread), or you open a popup with just text "Loading...", fire up a background thread which load the data, and display them (marshalling to the UI thread) in the popup as they come. — Vlad, Jul 16 '12 at 19:17
Vlad , 1. I want the height of the popup control to be the screen size of the user. 2. I have created a Custom Expander control. The control template of this custom expander contains the PopUp control. — New Developer, Jul 17 '12 at 17:40
(1) Perhaps you just need to maximize the popup window? (`WindowState="Maximized"`) If not, [here](http://stackoverflow.com/questions/1927540/how-to-get-the-size-of-the-current-screen-in-wpf) is about how to get the screen width/height (beware that multi-monitor systems are very popular, so you'd need to support them). And you'll need to prohibit resize (`ResizeMode="CanMinimize"`) and set the width and height in the `PopupWindow`'s constructor. — Vlad, Jul 17 '12 at 18:14
vlad- i can already do that. i can set the height and the width using systemparameters, but the problem is when i set both the height and the width to 100% only the width gets set to 100% and note the height, but if i set only the height then it gets sets to 100%. — New Developer, Jul 17 '12 at 19:25
Strange. Could you please post the minimal (!) code reproducing the problem? (I suspect you are using `SizeToContent` or something like that.) — Vlad, Jul 18 '12 at 09:37
Well, it doesn't seem to be the minimal example... Are you sure all the internal grids are relevant for the problem? — Vlad, Jul 20 '12 at 19:20
Well, you've presented a lot of code. The chances are high that a big part of this code is not really relevant to the problem. For example, I suspect that removing the innermost `ToggleButton` won't solve the problem, so it's not necessary in your example. Someone has to simplify the code. Frankly speaking, the SO inhabitants are too lazy to remove the unnecessary parts from the code for you, that's why nobody was even trying to answer your question. After all, you need the answer more than they do, why not invest some work and solve the easy part yourself? — Vlad, Jul 23 '12 at 12:27
@Vlad i posted the entire code so that you can get an understanding of what i am trying to acheive. I have tried created another sample with WPF Popup and it behaves as i had described in this post.The microsft article also supports that. Now i am just looking for a way i can simulate the code that i posted above with a different control. I used the popup because i can set it's plcement target to relative. I cannot use a window inside a window. So i am running out of ideas and thought by posting the whole code somebody could help. But obviusly not. — New Developer, Jul 23 '12 at 20:58

score 0 · Answer 1 · answered Jul 20 '12 at 18:47

0

I think it is known issue with Popup. It has been documented here: http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.placementmode%28VS.85%29.aspx

So i have to figure out doing it another way without using the popup control.

answered Jul 20 '12 at 18:47

New Developer

123
1
10

Create and Open Modless Window/Popup in XAML WPF

1 Answers1