You can use a UserControl
and UIElement.RenderTransform property to do this.
Here is a sample:
UserControl "SlidableControl" xaml:
<Grid x:Name="SlidRoot" ManipulationMode="All" HorizontalAlignment="Stretch" ManipulationStarted="SlidRoot_ManipulationStarted"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" ManipulationDelta="SlidRoot_ManipulationDelta"
ManipulationCompleted="SlidRoot_ManipulationCompleted">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Border x:Name="SlidArea" BorderBrush="Black" BorderThickness="1" Grid.Row="0" Height="{x:Bind maxheight}" Background="AliceBlue"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Child="{x:Bind SlidChild, Mode=OneWay}">
<Border.RenderTransform>
<CompositeTransform x:Name="SlidAreaTransform" TranslateY="{Binding ElementName=SlidTitle, Path=RenderTransform.TranslateY, Mode=TwoWay}" />
</Border.RenderTransform>
</Border>
<Grid x:Name="SlidTitle" Background="Gray" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1">
<Grid.RenderTransform>
<CompositeTransform x:Name="SlidTitleTransform" />
</Grid.RenderTransform>
<TextBlock Text="" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black" FontFamily="Segoe MDL2 Assets" FontSize="25" />
</Grid>
</Grid>
UserControl "SlidableControl" code behind:
private double maxheight;
private double Y;
private double finalY;
public SlidableControl()
{
this.InitializeComponent();
maxheight = Window.Current.Bounds.Height / 3;
SlidArea.Visibility = Visibility.Collapsed;
}
private void SlidRoot_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
SlidArea.Visibility = Visibility.Visible;
SlidTitleTransform.TranslateY = -maxheight;
}
private void SlidRoot_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Y = e.Delta.Translation.Y;
finalY = SlidTitleTransform.TranslateY + Y;
if (Y >= 0 && finalY <= 0)
{
if (finalY < maxheight)
SlidTitleTransform.TranslateY = finalY;
else
SlidTitleTransform.TranslateY = 0;
}
else if (Y < 0 && finalY >= -maxheight)
{
if (finalY > -maxheight)
SlidTitleTransform.TranslateY = finalY;
else
{
SlidTitleTransform.TranslateY = -maxheight;
}
}
}
private void SlidRoot_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
if (finalY <= -maxheight)
{
SlidArea.Visibility = Visibility.Collapsed;
SlidTitleTransform.TranslateY = 0;
}
}
public static readonly DependencyProperty ChildProperty = DependencyProperty.Register("SlidChild", typeof(UIElement), typeof(SlidableControl), new PropertyMetadata(null));
public UIElement SlidChild
{
get { return (UIElement)GetValue(ChildProperty); }
set { SetValue(ChildProperty, value); }
}
You can see from my code, that I expose the SlidChild
property, so you can add any other control to this "SlidableControl" for example like this:
<local:SlidableControl VerticalAlignment="Top">
<local:SlidableControl.SlidChild>
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding txt}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</local:SlidableControl.SlidChild>
</local:SlidableControl>
This is a very early version of control, you can expose some other properties, like control's height.
Here is my demo, you can have a test.
This is the rendering image of my test:
