Magic Blackboard

Show and Tell
1

For my current project I created a nice magic blackboard effect:

  • think of two layers: one background that is blured and one foreground that is clear (same graphic; background artworked for blured)
  • a hotspot button opens the sidebar
  • a swipe to the right closes the sidebar
<Button Width="100" Height="50" Alignment="TopLeft" Text="Open" Background="#232323" Margin="10">
	<Clicked>
		<Set Test.TargetProgress="1" />
	</Clicked>
</Button>

<Panel HitTestMode="None" Width="{= width(master) + x(master)}" Alignment="Left" ClipToBounds="True" >
	<Image ux:Name="imgForeground" File="assets/images/foreground.png" HitTestMode="None" Alignment="Left" Width="1024" Height="768" />
</Panel>

<Panel ux:Name="master" Background="#009EE3" Offset="0,0" Margin="0,-20,0,-20">
	<DropShadow Size="30" Distance="3" Spread="0.3" Color="#0009" />
	<SwipeGesture ux:Name="swipe" Direction="Right" Type="Auto" Length="300" IsEnabled="{= (x(master) < -290) }" />
	<SwipingAnimation Source="swipe">
		<Change master.Offset="300,0" Duration="0.2" />
	</SwipingAnimation>
	<Swiped Source="swipe">
		<Set Test.Progress="0" />
	</Swiped>
</Panel>

<Image ux:Name="imgBackground" File="assets/images/background.blured.png" Width="1024" Height="768" Opacity="1.0" Alignment="BottomRight"  />
<Panel Background="#009EE3" Alignment="Right" Width="300" />

<Timeline ux:Name="Test" >
	<Change master.Offset="-300,0" Duration="0.4"  Easing="BounceOut" />
</Timeline>
2

Alright, cool.

Is there a question?

3

Thx! No.
Sorry. Should have been in show and tell…

4

What does magic blackboard effect mean?

5

Something like this. In this sample the content is not cleared if you swipe but blurred…