Improve demo

samples/ControlCatalog/Pages/TransitioningContentControlPage.axaml

@@ -4,6 +4,7 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:vm="using:ControlCatalog.ViewModels"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             Height="{Binding $parent[ScrollViewer].Bounds.Height}"
              x:DataType="vm:TransitioningContentControlPageViewModel"
              x:CompileBindings="True"
              x:Class="ControlCatalog.Pages.TransitioningContentControlPage">
@@ -11,25 +12,63 @@
     <UserControl.DataContext>
         <vm:TransitioningContentControlPageViewModel />
     </UserControl.DataContext>
+
+    <UserControl.Styles>
+        <Style Selector="HeaderedContentControl">
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate>
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" SharedSizeGroup="HeaderCol" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+                            <ContentPresenter Content="{TemplateBinding Header}" 
+                                              Grid.Column="0" 
+                                              VerticalAlignment="Center" />
+                            <ContentPresenter Content="{TemplateBinding Content}" 
+                                              Grid.Column="1" 
+                                              VerticalAlignment="Center" />
+                        </Grid>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Styles>
     <DockPanel LastChildFill="True">
 
         <TextBlock DockPanel.Dock="Top" Classes="h2">The TransitioningContentControl control allows you to show a page transition whenever the Content changes.</TextBlock>
 
-        <Border DockPanel.Dock="Bottom" Background="{DynamicResource ThemeControlLowBrush}">
-            <StackPanel Margin="5" Spacing="5">
-                <TextBlock>Select a transition</TextBlock>
-               <ComboBox Items="{Binding PageTransitions}" SelectedItem="{Binding SelectedTransition}" /> 
+        <ExperimentalAcrylicBorder DockPanel.Dock="Bottom" Margin="10" CornerRadius="5" >
+            <ExperimentalAcrylicBorder.Material>
+                <ExperimentalAcrylicMaterial BackgroundSource="Digger" TintColor="White" />
+            </ExperimentalAcrylicBorder.Material>
+            
+            <StackPanel Margin="5" Spacing="5" Grid.IsSharedSizeScope="True">
+                <HeaderedContentControl Header="Select a transition">
+                     <ComboBox Items="{Binding PageTransitions}" SelectedItem="{Binding SelectedTransition}" />
+                </HeaderedContentControl>
+                <HeaderedContentControl Header="Duration">
+                     <NumericUpDown Value="{Binding Duration}" Increment="250" Minimum="100" />
+                </HeaderedContentControl>
+                <HeaderedContentControl Header="Clip to Bounds">
+                    <ToggleSwitch IsChecked="{Binding ClipToBounds}" />
+                </HeaderedContentControl>
             </StackPanel>
-        </Border>
-        
+        </ExperimentalAcrylicBorder>
+
         <Button DockPanel.Dock="Left" Command="{Binding PrevImage}" Content="&lt;" />
         <Button DockPanel.Dock="Right" Command="{Binding NextImage}" Content=">" />
-<TransitioningContentControl Content="{Binding SelectedImage}" PageTransition="{Binding SelectedTransition.Transition}" >
-    <TransitioningContentControl.ContentTemplate>
-        <DataTemplate DataType="Bitmap">
-            <Image Source="{Binding}"  />
-        </DataTemplate>
-    </TransitioningContentControl.ContentTemplate>
-</TransitioningContentControl>
-</DockPanel>
+        
+        <Border ClipToBounds="{Binding ClipToBounds}" Margin="5">
+            <TransitioningContentControl Content="{Binding SelectedImage}"
+                                         PageTransition="{Binding SelectedTransition.Transition}" >
+                <TransitioningContentControl.ContentTemplate>
+                    <DataTemplate DataType="Bitmap">
+                        <Image Source="{Binding}"  />
+                    </DataTemplate>
+                </TransitioningContentControl.ContentTemplate>
+            </TransitioningContentControl>
+        </Border>
+    </DockPanel>
 </UserControl>

samples/ControlCatalog/ViewModels/TransitioningContentControlPageViewModel.cs

@@ -30,11 +30,13 @@ namespace ControlCatalog.ViewModels
             }
 
             SelectedImage = Images[0];
-            SelectedTransition = PageTransitions[0];
+            SelectedTransition = PageTransitions[1];
         }
 
         public List<PageTransition> PageTransitions { get; } = new List<PageTransition>()
         {
+            new PageTransition("None", null),
+            new PageTransition("CrossFade", new CrossFade(TimeSpan.FromMilliseconds(500))),
             new PageTransition("Slide horizontally", new PageSlide(TimeSpan.FromMilliseconds(500), PageSlide.SlideAxis.Horizontal)),
             new PageTransition("Slide vertically", new PageSlide(TimeSpan.FromMilliseconds(500), PageSlide.SlideAxis.Vertical))
         };
@@ -65,6 +67,38 @@ namespace ControlCatalog.ViewModels
             set { this.RaiseAndSetIfChanged(ref _SelectedTransition, value); }
         }
 
+
+
+        private bool _ClipToBounds;
+
+        /// <summary>
+        /// Gets or sets if the content should be clipped to bounds
+        /// </summary>
+        public bool ClipToBounds
+        {
+            get { return _ClipToBounds; }
+            set { this.RaiseAndSetIfChanged(ref _ClipToBounds, value); }
+        }
+
+
+        private int _Duration = 500;
+
+        /// <summary>
+        /// Gets or Sets the duration
+        /// </summary>
+        public int Duration 
+        {
+            get { return _Duration; }
+            set 
+            { 
+                this.RaiseAndSetIfChanged(ref _Duration , value);
+
+                PageTransitions[1].Transition = new CrossFade(TimeSpan.FromMilliseconds(value));
+                PageTransitions[2].Transition = new PageSlide(TimeSpan.FromMilliseconds(value), PageSlide.SlideAxis.Horizontal);
+                PageTransitions[3].Transition = new PageSlide(TimeSpan.FromMilliseconds(value), PageSlide.SlideAxis.Vertical);
+            }
+        }
+
         public void NextImage()
         {
             var index = Images.IndexOf(SelectedImage) + 1;
@@ -90,7 +124,7 @@ namespace ControlCatalog.ViewModels
         }
     }
 
-    public class PageTransition
+    public class PageTransition : ViewModelBase
     {
         public PageTransition(string displayTitle, IPageTransition transition)
         {
@@ -99,7 +133,18 @@ namespace ControlCatalog.ViewModels
         }
 
         public string DisplayTitle { get; }
-        public IPageTransition Transition { get; }
+
+
+        private IPageTransition _Transition;
+
+        /// <summary>
+        /// Gets or sets the transition
+        /// </summary>
+        public IPageTransition Transition
+        {
+            get { return _Transition; }
+            set { this.RaiseAndSetIfChanged(ref _Transition, value); }
+        }
 
         public override string ToString()
         {