Reputation: 31

MVVM popup question

I am new to WPF and even newer to MVVM. I have set up a simple application to try to understand WPPF. In my application I have the following:

MainWindow.xaml -> I have a button. I want if the mouse goes over this button I want to have a simple popup show up.

MainWindowViewModel -> I have created a property (popupstatus) which I would use as a trigger for my mouseover event handler.

MyPopUp.xaml -> In this view I have set up the popup details. I want to use the property from MainWindowViewModel to trigger if it should show up or not.

But even after all this I have having two problems: One I cannot seem to use animation for the property I created in my MainWindowViewModel in my MainWindow.xaml file. I get an "Cannot resolve all property references in the property path 'PopUpStatus'." . The other is I can't bind to this propety in my pop up code either.

Eventually I want to have a viewmodel for popup which will do some more advanced stuff.

Thanks for your help :)

MainWindow.xaml:

        <Button.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <BooleanAnimationUsingKeyFrames Storyboard.Target="{Binding .}" Storyboard.TargetProperty="PopUpStatus">
                                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:2"/>
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <BooleanAnimationUsingKeyFrames Storyboard.TargetName="FiberPopUp" Storyboard.TargetProperty="IsOpen">
                                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:2"/>
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>

MainWindowViewModel: private bool _PopUpStatus = false; public MainWindowViewModel() { }

    public bool PopUpStatus
    {
        get
        {
            return _PopUpStatus;
        }
        set
        {
            _PopUpStatus = value;
            RaisePropertyChanged("PopUpStatus");
        }

    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected void RaisePropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(name));
    }

myPopUp.xaml -->

        <StackPanel Width="auto"  Height="auto" >
            <TextBlock Background="White" Foreground="Black" Text="This is a test."/>
            <Button Content="ClosePopUp" Click="PopUpClose" />

        </StackPanel>

    </Popup>



</Grid>

Upvotes: 3

Answers (1)

ecathell

Reputation: 1030

you have to have the popup window inside your mainwindowview in a collapsed state, then using visualstatemanager you have several conditions that would allow you to change the visibility of that view, along with a grey rectangle...

thats how i have done it for my applications. and I actually have the popup used as a service...

 <Grid wpfi:VisualStateAssistant.CurrentVisualState="{Binding Path=CurrentVisualState}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="640" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="480" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ActiveFormStateGroup">
                <VisualStateGroup.Transitions>

                </VisualStateGroup.Transitions>
                <VisualState x:Name="Searching">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="SearchHeaderView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="SearchNavigationView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="SearchResultsView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="DoctorsModuleShell">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="DoctorsModuleNavigationView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>

                </VisualState>
                <VisualState x:Name="DoctorEdit">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="SearchHeaderView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="SearchNavigationView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="SearchResultsView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="DoctorsModuleShell">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="DoctorsModuleNavigationView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>

                </VisualState>

            </VisualStateGroup>
            <VisualStateGroup x:Name="VisualAlertsStateGroup">
                <VisualStateGroup.Transitions>

                </VisualStateGroup.Transitions>
                <VisualState x:Name="DialogShowing">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="rectangle">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="DialogNotShowing">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="rectangle">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="IsWaiting">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="rectangle">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="WaitControl">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="IsNotWaiting">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="rectangle">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="WaitControl">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

            </VisualStateGroup>
            <VisualStateGroup x:Name="DialogFormsStateGroup">
                <VisualStateGroup.Transitions>

                </VisualStateGroup.Transitions>
                <VisualState x:Name="ShowContactInfoEdit">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="rectangle">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="ContactInfoDatagridView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>

                </VisualState>
                <VisualState x:Name="HideContactInfoEdit">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="rectangle">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="ContactInfoDatagridView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />

                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>

                </VisualState>
                <VisualState x:Name="ShowDoctorTaxonomyEdit">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="rectangle">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="DoctorsTaxonomyEditView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />

                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="HideDoctorTaxonomyEdit">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="rectangle">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="DoctorsTaxonomyEditView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />

                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

            </VisualStateGroup>
            <VisualStateGroup x:Name="QuickEditViewStateGroup">
                <VisualStateGroup.Transitions>
                </VisualStateGroup.Transitions>

                <VisualState x:Name="ShowQuickEditDoctorOfficeView">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="rectangle">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="QuickEditDoctorOfficeView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>

                </VisualState>

                <VisualState x:Name="HideQuickEditDoctorOfficeView">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="rectangle">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="QuickEditDoctorOfficeView">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>

                </VisualState>

            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <DockPanel Grid.Column="0"
                   Grid.Row="0"
                   Grid.ColumnSpan="3"
                   Grid.RowSpan="3">

            <!--TOP-->
            <Grid ShowGridLines="False"
                  DockPanel.Dock="Top">

                <views:SearchHeaderView x:Name="SearchHeaderView"
                                        Margin="0,0,0,5" />

            </Grid>
            <!--BOTTOM-->
            <Grid ShowGridLines="false"
                  DockPanel.Dock="Bottom">

                <views:SearchNavigationView x:Name="SearchNavigationView" />
                <views:DoctorsModuleNavigationView  x:Name="DoctorsModuleNavigationView"
                                                    Visibility="Collapsed" />

            </Grid>

            <!--FILL-->
            <Grid ShowGridLines="False">

                <views:SearchResultsShell x:Name="SearchResultsView">
                    <views:SearchResultsShell.DataContext>
                        <vm:SearchResultsViewModel />
                    </views:SearchResultsShell.DataContext>
                </views:SearchResultsShell>
                <views:DoctorsModuleShell x:Name="DoctorsModuleShell"
                                          Visibility="Collapsed" />
            </Grid>

        </DockPanel>
        <Rectangle x:Name="rectangle"
                   RadiusX="2"
                   RadiusY="2"
                   Grid.Column="0"
                   Grid.Row="0"
                   Grid.ColumnSpan="3"
                   Grid.RowSpan="3"
                   Fill="{StaticResource modalFormHitTestRectangleBrush}"
                   IsHitTestVisible="True"
                   Visibility="Collapsed" />

        <controls:WaitingControl x:Name="WaitControl"
                                 Width="100"
                                 Height="100"
                                 Visibility="Collapsed"
                                 Grid.Column="1"
                                 Grid.Row="1" />

        <views:ContactInfoDatagridView x:Name="ContactInfoDatagridView"
                                       Grid.Column="1"
                                       Grid.Row="1"
                                       Visibility="Collapsed" />
        <views:DoctorsTaxonomyEditView x:Name="DoctorsTaxonomyEditView"
                                       Grid.Column="1"
                                       Grid.Row="1"
                                       Visibility="Collapsed" />

        <views:QuickEditDoctorOfficeView x:Name="QuickEditDoctorOfficeView"
                                         Grid.Column="1"
                                         Grid.Row="1"
                                         Visibility="Collapsed" />
    </Grid>

it looks way more confusing than it really is...basically you bind to a visualstate in you primary view model, then you turn on and off the visualstates depending on its value.

Upvotes: 0

MVVM popup question

Answers (1)

Related Questions