在Windows 10 UWP应用中创建可滑动的ListView，例如在Maps应用中 [英] Create slidable ListView in Windows 10 UWP apps like in Maps app

问题描述

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

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.

预先感谢

推荐答案

您可以使用UserControl和

You can use a UserControl and UIElement.RenderTransform property to do this.

以下是示例:

UserControl"SlidableControl" xaml:

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"代码:

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); }
}

您可以从我的代码中看到我公开了SlidChild属性，因此您可以将其他任何控件添加到此"SlidableControl"中，例如:

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，例如在Maps应用中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！