Question

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

提前致谢

Answer 1

此外，您可以使用UserControl执行此操作。

XAML：

<ScrollViewer x:Name="scrollViewer" HorizontalAlignment="Stretch" ScrollViewer.VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="20" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Border x:Name="Area1" Grid.Row="0" Height="{x:Bind childheight}" HorizontalAlignment="Stretch" Background="AliceBlue"></Border>
        <Grid x:Name="SlidButton" Background="Gray" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1"
              ManipulationStarted="SlidButton_ManipulationStarted" ManipulationCompleted="SlidButton_ManipulationCompleted" 
              ManipulationMode="All" ManipulationDelta="SlidButton_ManipulationDelta">
            <TextBlock Text="&#xE76F;" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black" FontFamily="Segoe MDL2 Assets" FontSize="15" />
        </Grid>
        <Border x:Name="Area2" Grid.Row="2" Height="{x:Bind childheight}" HorizontalAlignment="Stretch" Background="Transparent"></Border>
    </Grid>
</ScrollViewer>

代码背后的代码：

private double height;
private double childheight;

public SlidableView()
{
    this.InitializeComponent();
    height = Window.Current.Bounds.Height * 2 - 40;
    childheight = Window.Current.Bounds.Height - 40;
}

private void SlidButton_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
    scrollViewer.VerticalScrollMode = ScrollMode.Enabled;
}

private void SlidButton_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    scrollViewer.VerticalScrollMode = ScrollMode.Disabled;
}

private static double Y;

private void SlidButton_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    Y = Y + e.Delta.Translation.Y;
    scrollViewer.ChangeView(null, -Y, null);
}

这是一个非常简单的版本适用于移动设备，当它应用于PC时，请更改“高度”和“子高度”，如下所示：

height = Window.Current.Bounds.Height * 2 - 20;
childheight = Window.Current.Bounds.Height - 20;

当我说这是一个非常简单的版本，因为我没有暴露这个usercontrol的任何属性，你可以在我的上一个答案中公开两个Border控件的两个子属性。

Answer 2

您可以使用UserControl和UIElement.RenderTransform property来执行此操作。

以下是一个示例：

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”代码背后：

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”添加任何其他控件，例如：

<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>

这是一个非常早期的控件版本，你可以暴露一些其他的属性，比如控件的高度。

这是我的demo，您可以进行测试。

这是我测试的渲染图像：

Answer 3

我们希望对上面示例的行为进行修改，我们希望将行为更改为下图（列表应该在地图上（蓝色部分），列表运动从下到上作为图片），我们应该改变做什么呢？

在Windows 10 UWP应用程序中创建可滑动的ListView，例如在地图应用程序中

3 个答案: