Hi,
I’m trying to design a pop-up class, as in something is tapped, and then a list pops up from the bottom. Similar to the regular iOS menu, here’s an example:
When the green button is tapped a menu appears. I want to class with an empty menu, where I can set the title, and the description. It should also be a container, so I can fill the stack panel with any items I want.
Here’s my attempt, it’s not great:
<Container ux:Class="OptionsPanel" Subtree="innerPanel" HitTestMode="LocalBoundsAndChildren" Title="Title" Description="Description" Open="false">
<bool ux:Property="Open" />
<string ux:Property="Title" />
<string ux:Property="Description" />
<WhileTrue Value="{Property this.Open}">
<Set OptionsControlPanel.Active="main" />
</WhileTrue>
<WhileFalse Value="{Property this.Open}">
<Set OptionsControlPanel.Active="away" />
</WhileFalse>
<PageControl ux:Binding="Children" ux:Name="OptionsControlPanel" Orientation="Vertical" Active="away">
<Page ux:Binding="Children" ux:Name="main" Margin="8" Alignment="Bottom">
<ActivatingAnimation>
<Change backRect.Opacity="0.5" Duration="0.3" Delay="0.3" />
</ActivatingAnimation>
<DockPanel ux:Binding="Children">
<StackPanel Dock="Top" Padding="32, 32, 32, 0">
<Text Value="{Property this.Title}" Font="Subtitle" FontSize="15" Color="{Resource DarkBlue}" />
<Text Value="{Property this.Description}" Font="Regular" FontSize="15" Opacity="0.6" TextWrapping="Wrap" />
<Rectangle Height="1" Color="#000" Opacity="0.1" Margin="0, 8, 0, 0" />
</StackPanel>
<ScrollView ux:Binding="Children" SnapMinTransform="false">
<StackPanel ux:Name="innerPanel">
</StackPanel>
</ScrollView>
<Panel ux:Binding="Children" Dock="Bottom" Height="52">
<Text Width="52" Alignment="Center" TextAlignment="Center" TextColor="#FFF" Value="" Font="MaterialIcon" FontSize="24" />
<Rectangle CornerRadius="0, 0, 4, 4" Color="{Resource Highlight}" Opacity="0.5" />
<Clicked>
<Callback Handler="{save}" />
</Clicked>
</Panel>
</DockPanel>
<Rectangle CornerRadius="4" Color="#FFF" />
</Page>
<Page>
<WhileActive>
<Change this.HitTestMode="None" />
</WhileActive>
</Page>
</PageControl>
<Rectangle ux:Name="backRect" Color="#000" Opacity="0" />
</Container>
Here’s a fully working example with terrible colours:
<App>
<Panel ux:Name="DaysPanel" HitTestMode="LocalBoundsAndChildren">
<PageControl ux:Name="DaysPanelControl" Orientation="Vertical" Active="away">
<Page ux:Name="away">
<WhileActive>
<Change DaysPanel.HitTestMode="None" />
</WhileActive>
</Page>
<Page ux:Name="main" Margin="8" Alignment="Bottom">
<ActivatingAnimation>
<Change backRect.Opacity="0.5" Duration="0.3" Delay="0.3" />
</ActivatingAnimation>
<DockPanel>
<StackPanel Dock="Top" Padding="32, 32, 32, 0">
<Text Value="Workout Days" FontSize="15" Color="#00f" />
<Text Value="Your workouts will cycle through your selected days." FontSize="15" Opacity="0.6" TextWrapping="Wrap" />
<Rectangle Height="1" Color="#000" Opacity="0.1" Margin="0, 8, 0, 0" />
</StackPanel>
<ScrollView SnapMinTransform="false">
<StackPanel>
<Each Count="7">
<Panel HitTestMode="LocalBoundsAndChildren" Height="52" Padding="32, 0, 32, 0" >
<Text Value="Test" Opacity="0.8" Alignment="CenterLeft" />
</Panel>
</Each>
</StackPanel>
</ScrollView>
<Panel Dock="Bottom" Height="52">
<Text Width="52" Alignment="Center" TextAlignment="Center" TextColor="#FFF" Value="" FontSize="24" />
<Rectangle CornerRadius="0, 0, 4, 4" Color="#0f0" Opacity="0.5" />
<Clicked>
<Set DaysPanelControl.Active="away" />
</Clicked>
</Panel>
</DockPanel>
<Rectangle CornerRadius="4" Color="#FFF" />
</Page>
</PageControl>
<Rectangle ux:Name="backRect" Color="#000" Opacity="0" >
<Clicked>
<Set DaysPanelControl.Active="away" />
</Clicked>
</Rectangle>
</Panel>
<Button Text="Click me" Alignment="Center">
<Clicked>
<Set DaysPanelControl.Active="main" />
</Clicked>
</Button>
</App>
Essentially this is a vertical PageControl
with the entire panel being placed on a very high level in the page. When the main
page isn’t active then it has no hitbox. Also, I want to be able to choose the “done” function, in my attempt I leave it at {save}
because I’m not sure how to do this. I feel like I’ve approached this all the wrong way, any advice would be great!
Cheers