This project has moved. For the latest updates, please go here.

View not getting loaded in Region

Jun 10, 2012 at 4:35 PM

Hi,

I am trying to load a view into region. This view is getting called from another page which is already loaded in the region. Below is my setup -

MainPage.xaml(Shell)

 <Grid x:Name="LayoutRoot" Background="White">
        <ItemsControl Grid.Row="1" Regions:ExportAsRegion.RegionName="AppRegion">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>

MainPage.xaml.cs

[ExportAsView(typeof(MainPage), IsShell=true)]
    public partial class MainPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        
        [Export]
        public ViewModelRoute Binding
        {
            get { return ViewModelRoute.Create<MainViewModel, MainPage>(); }
        }
    }

MainViewModel(VM for MainPage)

[ExportAsViewModel(typeof (MainViewModel))]
    public class MainViewModel : BaseViewModel, IPartImportsSatisfiedNotification
    {
        public string Welcome
        {
            get { return InDesigner ? "Jounce Design-time View" : "Welcome to Jounce."; }
        }

        public void OnImportsSatisfied()
        {
                        EventAggregator.Publish(new ViewNavigationArgs(typeof(Page1)) );
        }

        protected override void DeactivateView(string viewName)
        {
            GoToVisualStateForView(viewName, "HideState", true);
        }
        private string _lastView = string.Empty;

        protected override void ActivateView(string viewName, IDictionary<string, object> parameters)
        {
            if (string.IsNullOrEmpty(_lastView))
            {
                _lastView = viewName;
            }
            else if (!_lastView.Equals(viewName))
            {
                EventAggregator.Publish(new ViewNavigationArgs(_lastView) { Deactivate = true });
                _lastView = viewName;
            }

            GoToVisualStateForView(viewName, "ShowState", true);
        }
    }

 

Page1.xaml(View loaded in AppRegion first. This will call another page. Button "Click" is bound to Command which will try to load another page.)

<Grid x:Name="LayoutRoot" d:DataContext="{d:DesignInstance ViewModels:Page1ViewModel, IsDesignTimeCreatable=True}" >
<VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ShowStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5" To="ShowState">
                        <ei:ExtendedVisualStateManager.TransitionEffect>
                            <ee:SlideInTransitionEffect SlideDirection="BottomToTop"/>
                        </ei:ExtendedVisualStateManager.TransitionEffect>
                    </VisualTransition>
                    <VisualTransition GeneratedDuration="0:0:0.5" To="HideState">
                        <ei:ExtendedVisualStateManager.TransitionEffect>
                            <ee:SlideInTransitionEffect SlideDirection="TopToBottom"/>
                        </ei:ExtendedVisualStateManager.TransitionEffect>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="ShowState">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="HideState"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <StackPanel>
        <TextBlock Text="{Binding Hello}" />
        <Button Command="{Binding HelloWorld}" Content="Click" />
</StackPanel>
    </Grid>

Page1.xaml.cs

[ExportAsView(typeof(Page1))]
    [ExportViewToRegion(typeof(Page1), "AppRegion")]
    public partial class Page1 : Page
    {
        public Page1()
        {
            InitializeComponent();
        }

        // Executes when the user navigates to this page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        [Export]
        public ViewModelRoute Binding
        {
            get { return ViewModelRoute.Create<Page1ViewModel, Page1>(); }
        }
    }

Page1ViewModel.cs(VM for Page1)

[ExportAsViewModel(typeof(Page1ViewModel))]
    public class Page1ViewModel : BaseViewModel
    {
        public IActionCommand<string> HelloWorld { get; private set; }

        public string Hello
        {
            get { return InDesigner ? "Design Hello" : "Run Hello"; }
        }

        public Page1ViewModel()
        {
            HelloWorld = new ActionCommand<string>(ShowHelloWorld);

        }

        public void ShowHelloWorld(string parameter)
        {
            EventAggregator.Publish(new ViewNavigationArgs(typeof(Page1)) { Deactivate = true });
            EventAggregator.Publish(new ViewNavigationArgs(typeof(Page2)) );
        }

        private string _lastView = string.Empty;

        protected override void ActivateView(string viewName, IDictionary<string, object> parameters)
        {
            if (string.IsNullOrEmpty(_lastView))
            {
                _lastView = viewName;
            }
            else if (!_lastView.Equals(viewName))
            {
                EventAggregator.Publish(new ViewNavigationArgs(_lastView) { Deactivate = true });
                _lastView = viewName;
            }

            GoToVisualStateForView(viewName, "ShowState", true);
        }
        protected override void DeactivateView(string viewName)
        {
            GoToVisualStateForView(viewName, "HideState", true);
            
        }
    }

Page2.xaml(This is the Page I am trying to load in AppRegion. It's getting called from a button on Page1)

<Grid x:Name="LayoutRoot" d:DataContext="{d:DesignInstance ViewModels:Page2ViewModel, IsDesignTimeCreatable=True}" >
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ShowAndHide">
                <VisualStateGroup.States>
                    <VisualState x:Name="ShowState">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="LayoutRoot"
                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimation 
                                             Duration="0:0:0"
                                             Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                             From="0.3" To="1.0"/>
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                             From="0.3" To="1.0"/>
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                             From="0.3" To="1.0"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="HideState">
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                             From="1.0" To="1.2"/>
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                            From="1.0" To="1.2"/>
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                             From="1.0" To="0.3"/>
                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="LayoutRoot"
                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup.States>
                <VisualStateGroup.Transitions>
                    <VisualTransition To="HideState">
                        <Storyboard>
                            <DoubleAnimation 
                                Duration="0:0:0.2"
                                Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                             From="1.0" To="1.2"/>
                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                             From="1.0" To="1.2"/>
                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                             From="1.0" To="0.3"/>
                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="LayoutRoot"
                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <TextBlock Text="{Binding Hello}" />
    </Grid>

Page2.xaml.cs

[ExportAsView(typeof(Page2))]
    [ExportViewToRegion(typeof(Page2), "AppRegion")]
    public partial class Page2 : Page
    {
        public Page2()
        {
            InitializeComponent();
        }

        // Executes when the user navigates to this page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
        [Export]
        public ViewModelRoute Binding
        {
            get { return ViewModelRoute.Create<Page2ViewModel, Page2>(); }
        }
    }

Page2ViewModel.cs (VM for Page 2)

[ExportAsViewModel(typeof(Page1ViewModel))]
    public class Page2ViewModel : BaseViewModel
    {
        public string Hello
        {
            get { return InDesigner ? "Page 2 Design Hello" : "Page 2 Run Hello"; }
        }
        private string _lastView = string.Empty;

        protected override void ActivateView(string viewName, IDictionary<string, object> parameters)
        {
            if (string.IsNullOrEmpty(_lastView))
            {
                _lastView = viewName;
            }
            else if (!_lastView.Equals(viewName))
            {
                EventAggregator.Publish(new ViewNavigationArgs(_lastView) { Deactivate = true });
                _lastView = viewName;
            }

            GoToVisualStateForView(viewName, "ShowState", true);
        }
        protected override void DeactivateView(string viewName)
        {
            //GoToVisualStateForView(viewName, "HideState", true);
        }
    }

The problem is that Page2 never gets loaded in the Region. Well, it gets "Activated"(Breakpoint in it's XAML is getting hit. Debug information say's that property "Hello" is not found in ViewModel MainViewModel.

It appears that when this page is loaded in Region, the region is still binded to MainViewModel.

How to solve this problem?

Thanks.

Oct 24, 2012 at 11:37 PM

I had the same problem, what i did :        

exchange this

[ExportAsView(typeof(Page2))]

[ExportAsViewModel(typeof(Page2ViewModel))]

get { return ViewModelRoute.Create<Page2ViewModel, Page2>(); }

for this
[ExportAsView("Page2")]
[ExportAsViewModel("Page2ViewModel")]

get { return ViewModelRoute.Create("Page2ViewModel", "Page2"); }


this solved the problem, i don't why but this change works fine!

Oct 25, 2012 at 10:10 AM
Page2ViewModel.cs (VM for Page 2)
[ExportAsViewModel(typeof(Page1ViewModel))]
    public class Page2ViewModel : BaseViewModel

I don't know if it's just a typo (I suspect not), but it looks like you're exporting Page2ViewModel as the same type as Page1ViewModel.  I think that's your problem.  Let us know if that fixes it.