I want to have two modals, and display them as needed.
I added one, all is well. When I add the second, nothing happens.
What am I doing wrong?
<Panel ux:Name="otherModal" Alignment="VerticalCenter" Margin="20" Padding="20,10,20,0" Opacity="0">
<Rectangle Layer="Background" Fill="#fff" CornerRadius="10" Opacity="1" />
<StackPanel>
<Text Alignment="Center" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" Value="{TalkTitle}" />
<Panel>
<Text Alignment="Center" FontSize="14" TextWrapping="Wrap" TextAlignment="Left" Value="{TalkDesc}" />
<Image Url="{TalkPhoto}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused"></Image>
<DockPanel>
<Video ux:Name="video" Dock="Fill" File="Assets/small.mp4" IsLooping="true" StretchMode="UniformToFill" Height="1">
<ProgressAnimation>
<Change progressBar.Width="100" />
</ProgressAnimation>
</Video>
<Rectangle ux:Name="progressBar" Dock="Bottom" Fill="#f00" Width="0%" Height="10" />
<Grid Dock="Bottom" ColumnCount="2" RowCount="1">
<Button Text="Play">
<Clicked>
<Resume Target="video" />
</Clicked>
</Button>
<Button Text="Pause">
<Clicked>
<Pause Target="video" />
</Clicked>
</Button>
</Grid>
</DockPanel>
<Button Text="Close modal" Margin="0,20,0,0" Padding="10,10,10,50" Clicked="{closeDialog}" HitTestMode="LocalBoundsAndChildren">
</Button>
</Panel>
<WhileTrue Value="{isDialogShowing}">
<Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
</WhileTrue>
</StackPanel>
<WhileFalse Value="{isDialogShowing}">
<Move Y="13" RelativeTo="Size" Duration="0.6" Easing="BackIn" />
<Scale Factor="0.8" Duration=".6" Easing="BackIn" />
</WhileFalse>
<DropShadow />
</Panel>
<WhileTrue Value="{isDialogShowing}">
<Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
</WhileTrue>
<Panel ux:Name="dialog" Alignment="VerticalCenter" Margin="20" Padding="20,10,20,0" Opacity="0">
<Rectangle Layer="Background" Fill="#fff" CornerRadius="10" Opacity="1" />
<StackPanel>
<Text Alignment="Center" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" Value="Download status" />
<Panel>
<Text Alignment="Center" FontSize="14" TextWrapping="Wrap" TextAlignment="Left" Value="Downloading...." />
<Button Text="Close modal" Margin="0,20,0,0" Padding="10,10,10,50" Clicked="{closeDialog}" HitTestMode="LocalBoundsAndChildren">
</Button>
</Panel>
<WhileTrue Value="{isDownloadShowing}">
<Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
</WhileTrue>
</StackPanel>
<WhileFalse Value="{isDownloadShowing}">
<Move Y="13" RelativeTo="Size" Duration="0.6" Easing="BackIn" />
<Scale Factor="0.8" Duration=".6" Easing="BackIn" />
</WhileFalse>
<DropShadow />
</Panel>
<WhileTrue Value="{isDownloadShowing}">
<Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
</WhileTrue>
<ClientPanel>
<Grid Columns="auto,1*,auto" Height="50" Dock="Top" Margin="5">
<Grid ColumnCount="2" RowCount="2" Width="22" Height="22" Margin="10">
<Each Count="4">
<Circle Color="color4" Margin="1.5"/>
</Each>
</Grid>
<Text ux:Name="titleText" Value="Dont be a tourist!" Color="color0" FontSize="25" Alignment="Center">
<Font File="Assets/Fonts/Roboto-Black.ttf" />
</Text>
<Image File="Assets/search.png" Color="color4" Width="30" Height="30" Margin="10"/>
</Grid>
<Panel Dock="Top" Height="60" >
<Rectangle ux:Name="indicator" CornerRadius="30" Color="color0" LayoutMaster="p1" Margin="0,10" Width="100%" ZOffset="0.1"/>
<Grid ColumnCount="5" Margin="-30,0">
<Panel ux:Name="p1" Column="0" ColumnSpan="2"/>
<Panel ux:Name="p4" Column="3" ColumnSpan="2"/>
</Grid>
<Grid ZOffset="1" Margin="-20,0">
<Column ux:Name="col1" Width="1" WidthMetric="Proportion"/>
<Column ux:Name="col2" Width="1" WidthMetric="Proportion"/>
<Column ux:Name="col3" Width="1" WidthMetric="Proportion"/>
<Column ux:Name="col4" Width="1" WidthMetric="Proportion"/>
<Text ux:Class="TabHeader" Color="White" Alignment="CenterLeft" Opacity="0" Margin="20,0,0,0" MinWidth="100"/>
<Image ux:Class="TabIcon" Width="25" Height="25" />
<Panel HitTestMode="LocalBounds">
<Grid Columns="auto,1*" Margin="40,0" Alignment="Left">
<TabIcon ux:Name="c1" File="Assets/basket.png" Color="color0"/>
<TabHeader ux:Name="h1" Value="Tours" />
</Grid>
<Clicked>
<Set nav.Active="page1" />
</Clicked>
</Panel>
<Panel HitTestMode="LocalBounds">
<Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
<TabIcon ux:Name="c2" File="Assets/accountbalance.png" Color="color1"/>
<TabHeader ux:Name="h2" Value="Places"/>
</Grid>
<Clicked>
<Set nav.Active="page2" />
</Clicked>
</Panel>
<Panel HitTestMode="LocalBounds">
<Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
<TabIcon ux:Name="c3" File="Assets/play.png" Color="color2"/>
<TabHeader ux:Name="h3" Value="Info"/>
</Grid>
<Clicked>
<Set nav.Active="page3" />
</Clicked>
</Panel>
<Panel HitTestMode="LocalBounds">
<Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
<TabIcon ux:Name="c4" File="Assets/person.png" Color="color3" />
<TabHeader ux:Name="h4" Value="Friends"/>
</Grid>
<Clicked>
<Set nav.Active="page4" />
</Clicked>
</Panel>
</Grid>
</Panel>
<PageControl ux:Name="nav">
<NavigationMotion GotoEasing="BackOut" />
<Attractor ux:Name="indicatorColorAttractor" Target="indicator.Color" Value="color0" />
<Rectangle ux:Name="bgColor" Layer="Background" Color="color0" Opacity="0.12"/>
<Attractor ux:Name="bgColorAttractor" Target="bgColor.Color" Value="color0" />
<Attractor ux:Name="titleTextAttractor" Target="titleText.Color" Value="color0" />
<WhileTrue ux:Name="shrinkIndicatorWidth">
<Change indicator.Width="90" Duration="0.25"/>
</WhileTrue>
<Image ux:Class="PagePlaceholder" Margin="8,10,8,0" StretchMode="UniformToFill" ContentAlignment="Top"/>
<Page ux:Name="page1">
<ScrollView>
<Grid ColumnCount="1">
<Each Items="{tours}">
<DockPanel Height="350" Margin="10,20">
<Rectangle Layer="Background" CornerRadius="10" Fill="#fff" />
<Rectangle Height="200" Dock="Top" Margin="0,-10" CornerRadius="10">
<WhileBusy>
<Image ux:Name="lowQualityImage" Url="{lowQualityImage}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused">
<Desaturate Amount="1" />
<RemovingAnimation>
<Change lowQualityImage.Opacity="0" Duration="0.35"/>
</RemovingAnimation>
</Image>
</WhileBusy>
<Image File="{LocalPhoto}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused" />
<!-- <Image File="{LocalPhoto}" Height="230" Padding="30" StretchMode="Fill" /> -->
</Rectangle>
<Clicked Handler="{locClick}" />
<Panel Margin="0,40" >
<Text Value="{Title}" TextAlignment="Left" Alignment="Left" Margin="10,0" Padding="10" Dock="Top" FontSize="22" />
<Text Value="{Description}" Height="50" TextAlignment="Left" Alignment="Left" Margin="10,60" Dock="Top" TextWrapping="Wrap" />
</Panel>
</DockPanel>
<Clicked>
<Set nav.Active="page2" />
</Clicked>
</Each>
</Grid>
</ScrollView>
<WhileActive Threshold="0.5">
<Set shrinkIndicatorWidth.Value="false" />
<Set indicatorColorAttractor.Value="color0" />
<Set bgColorAttractor.Value="color0" />
<Set titleTextAttractor.Value="color0" />
</WhileActive>
<ActivatingAnimation>
<Change h1.Opacity="1" />
<Change col1.Width="2" />
<Change c1.Color="White" />
</ActivatingAnimation>
</Page>
<Page ux:Name="page2">
<StackPanel>
<Panel Height="250">
<NativeViewHost>
<Select Data="{mapLocation}">
<MapView Latitude="41.9964600" Longitude="21.4314100" Zoom="10" ShowMyLocation="True" >
<Each Items="{locations}">
<Each Items="{Locations}">
<MapMarker Latitude="{lat}" Longitude="{lon}" Label="{Title}" Tapped="{onMarkerTapped}"/>
</Each>
</Each>
</MapView>
</Select>
</NativeViewHost>
</Panel>
<Panel Height="30">
<StackPanel>
<Panel>
<Button Text="Display Modal" Height="20" Clicked="{openDialog}"></Button>
</Panel>
</StackPanel>
</Panel>
<Panel Height="400">
<ScrollView>
<Grid ColumnCount="1">
<Each Items="{locations}">
<DockPanel Height="350" Margin="10,20">
<Rectangle Layer="Background" CornerRadius="10" Fill="#fff" />
<Rectangle Height="200" Dock="Top" Margin="0,-10" CornerRadius="10">
<WhileBusy>
<Image ux:Name="lowQualityImage" Url="{lowQualityImage}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused">
<Desaturate Amount="1" />
<RemovingAnimation>
<Change lowQualityImage.Opacity="0" Duration="0.35"/>
</RemovingAnimation>
</Image>
</WhileBusy>
<Image File="{LocalPhoto}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused" />
<!-- <Image File="{LocalPhoto}" Height="230" Padding="30" StretchMode="Fill" /> -->
</Rectangle>
<Clicked Handler="{locClick}" />
<Panel Margin="0,40" >
<Text Value="{Title}" TextAlignment="Left" Alignment="Left" Margin="10,0" Padding="10" Dock="Top" FontSize="22" />
<Text Value="{Description}" Height="50" TextAlignment="Left" Alignment="Left" Margin="10,60" Dock="Top" TextWrapping="Wrap" />
</Panel>
</DockPanel>
<Clicked>
<Set nav.Active="page2" />
</Clicked>
</Each>
</Grid>
</ScrollView>
<WhileActive Threshold="0.5">
<Set shrinkIndicatorWidth.Value="true" />
<Set indicatorColorAttractor.Value="color1" />
<Set bgColorAttractor.Value="color1" />
<Set titleTextAttractor.Value="color1" />
</WhileActive>
<ActivatingAnimation>
<Change h2.Opacity="1" />
<Change col2.Width="2" />
<Change c2.Color="White" />
</ActivatingAnimation>
</Panel>
</StackPanel>
</Page>
<Page ux:Name="page3">
<PagePlaceholder File="Assets/screen3.png" />
<WhileActive Threshold="0.5">
<Set shrinkIndicatorWidth.Value="true" />
<Set indicatorColorAttractor.Value="color2" />
<Set bgColorAttractor.Value="color2" />
<Set titleTextAttractor.Value="color2" />
</WhileActive>
<ActivatingAnimation>
<Change h3.Opacity="1" />
<Change col3.Width="2" />
<Change c3.Color="White" />
</ActivatingAnimation>
</Page>
<Page ux:Name="page4">
<PagePlaceholder File="Assets/screen4.png" />
<WhileActive Threshold="0.5">
<Set shrinkIndicatorWidth.Value="false" />
<Set indicatorColorAttractor.Value="color3" />
<Set bgColorAttractor.Value="color3" />
<Set titleTextAttractor.Value="color3" />
</WhileActive>
<ActivatingAnimation Scale="0.333">
<Move Target="indicator" X="1" RelativeTo="PositionOffset" RelativeNode="p4"/>
</ActivatingAnimation>
<ActivatingAnimation>
<Change h4.Opacity="1" />
<Change col4.Width="2" />
<Change c4.Color="White" />
</ActivatingAnimation>
</Page>
</PageControl>
</ClientPanel>
</App>