在 Windows 10 UWP 应用程序(如地图应用程序)中创建可滑动的 ListView [英] Create slidable ListView in Windows 10 UWP apps like in Maps app

问题描述

我正在创建 UWP 应用程序，我需要在滑动菜单中显示一系列结果.滑动菜单是可滚动的，并且可以滑动以更改其高度就像 Windows 10 移动版地图应用程序中的搜索结果.我找不到任何教程来创建这样的体验.

提前致谢

解决方案

您可以使用 UserControl 和

I'm creating UWP Application where I need to show an array of results in a sliding menu. The sliding menu is scrollable and can be slide to change it's height like the search results in Maps Application in windows 10 mobile. I can't find any tutorial to create such an experience.

Thanks in advance

解决方案

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="&#xE76F;" 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:

这篇关于在 Windows 10 UWP 应用程序(如地图应用程序)中创建可滑动的 ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！