Load view in layout template

Show and Tell
1

Is it possible to load a view (NewsPage) inside a layout template (OverviewPage) and define the position where the xml of NewsPage must be placed insite the OverviewPage? I want to load the DockPanel of the NewsPage between the Header and Tabs in the OverviewPage:

OverviewPage:

<Page ux:Class="OverviewPage" ux:Name="self" HitTestMode="LocalBoundsAndChildren">
	<Router ux:Dependency="router" />
	<DockPanel ClipToBounds="true">
		<Header Dock="Top" router="router"/>
		<!-- Load newsPage xml -->
		<Tabs Dock="Bottom" router="router"/>
	</DockPanel>
</Page>

NewsPage:

<OverviewPage ux:Class="NewsPage" router="router">
	<Router ux:Dependency="router" />
	<DockPanel ClipToBounds="true">
		<Panel Dock="Top">
			<ColumnLayout Sizing="Fill"/>
			<PageTab/>
			<PageTab/>
		</Panel>
		<ScrollView LayoutMode="PreserveVisual">
			<StackPanel Margin="0,0,0,14">
				<Each Count="10">
					<Panel>
						<Deferred>
							<ListItem
								Image="http://lorempixel.com/100/100/cats/"
								Thumb="http://lorempixel.com/100/100/cats/10/"
								Title="Titel van het item over twee regels"
							/>
						</Deferred>
					</Panel>
				</Each>
			</StackPanel>
		</ScrollView>
	</DockPanel>
</OverviewPage>

Thanks!

2

Hi!

For this you can use the new <Container> class introduced in Fuse 0.28 (https://www.fusetools.com/downloads/channel/qa - if not yet out).

<Container Subtree="inner" ux:Class="OverviewPage" ux:Name="self" HitTestMode="LocalBoundsAndChildren">
    <Router ux:Dependency="router" />
    <DockPanel ux:Binding="Children" ClipToBounds="true">
        <Header Dock="Top" router="router"/>
        <Panel ux:Name="inner" />
        <Tabs Dock="Bottom" router="router"/>
    </DockPanel>
</Container>

In this example, any child of OverviewPage added without ux:Binding="Children" will be placed inside the innerpanel.

3

Thanks Anders, I’ve got it working but the ExitingAnimation isn’t correct anymore.

<Container Subtree="inner" ux:Class="OverviewPage" ux:Name="_self" HitTestMode="LocalBoundsAndChildren" Transition="None" ClipToBounds="true" ZOffset="1" Background="White">
    <Router ux:Dependency="router" />
    
	<ExitingAnimation>
        <Move X="-0.2" RelativeTo="Size" Duration="0.4" Easing="QuadraticInOut" />
    </ExitingAnimation>

    <DockPanel ux:Binding="Children" ClipToBounds="true">
        <Header Dock="Top" router="router"/>
        <Panel ux:Name="inner" />
        <Tabs Dock="Bottom" router="router"/>
    </DockPanel>
</Container>

The ExitingAnimation only moves Panel ux:Name="inner", instead of the complete container. Can I specify which element must be animated?

4

Make sure you specify ux:Binding="Children" on anything you want as a direct child to the Container. Otherwise it will be added to the inner node as well.

Keep in mind there is no distiction in UX between the children in the ux:Class declaration and the children used by an instance.