如何在Windows 10 UWP中从屏幕右侧打开一个Flyout？

Question

我正在开发Windows 10应用程序，想要在图片被点击时从屏幕右侧打开一个Flyout。由于我已经在使用SplitView进行其他操作，所以不能再使用它。Flyout的可见性应该首先是Collapsed状态，当点击图片后应该变为Visible状态。此外，我不想使用Navigation/Settings Flyout。我希望实现如下效果。

- Kinjan Bhavsar

Answer 1

当点击图片时，它的可见性应该首先折叠起来，然后变为可见。

您可以按以下方式设置布局：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <GridView ItemsSource="{x:Bind WaresCollection}">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding WaresImage}" Tapped="Image_Tapped" Width="200" Height="300" />
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
    <Grid x:Name="FilterGrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Visibility="Collapsed">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Background="#33000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Grid Grid.Column="1" Padding="15" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="5*" />
                <RowDefinition Height="2*" />
            </Grid.RowDefinitions>
            <TextBlock Text="Search Filter" FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Left" />
            <Grid Grid.Row="1">
            </Grid>
            <Grid Grid.Row="2">
                <Button Content="DONE" Background="Yellow" VerticalAlignment="Center" HorizontalAlignment="Left" Click="Done_Button_Click" />
                <Button Content="RESET" Background="Yellow" VerticalAlignment="Center" HorizontalAlignment="Right" />
            </Grid>
        </Grid>
    </Grid>
</Grid>

后端代码:

private ObservableCollection<Wares> WaresCollection = new ObservableCollection<Wares>();

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    WaresCollection.Clear();
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao4.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao5.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao6.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao4.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao5.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao6.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao4.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao5.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao6.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao4.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao5.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao6.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao4.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao5.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao6.jpg" });
}

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    FilterGrid.Visibility = Visibility.Visible;
}

private void Done_Button_Click(object sender, RoutedEventArgs e)
{
    FilterGrid.Visibility = Visibility.Collapsed;
}

和货物类：

public class Wares
{
    public string WaresImage { get; set; }
}

这是该演示的渲染图像：

- Grace Feng

---

@KinjanBhavsar，你可以像这样将FilterGrid的第二列设置为320：<Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="320" /></Grid.ColumnDefinitions>。我看到你想编辑我的答案，但是，左侧的列定义和堆栈面板是覆盖在项上的，因此当打开过滤器网格时，无法再选择项目，就像你在问题中展示的图像一样。 - Grace Feng

我正在使用ContentPresenter，其中Grid是动态添加的，因此当我将其设置为可见时，其他Grid的可见性变为折叠，而当我将其折叠时，其他Grid又变为可见。 - Kinjan Bhavsar

@KinjanBhavsar，我不明白，我使用了GridView来加载所有的图片，而你使用了ContentPresenter？我认为我的解决方案已经可以解决你的问题了，但如果你想使用其他方法，也许你可以发布你的代码，并且为了使你的筛选布局显示在右侧，你可以在你的筛选布局容器中添加HorizontalAlignment="Right"。 - Grace Feng

@KinjanBhavsar，你可以将我的“FilterGrid”放在与你的详细“ContentPresenter”相同的位置，并且大小也相同，然后将第二列定义为320，在开始时将其折叠起来，当在“ContentPresenter”中点击图像菜单时显示“FilterGrid”。这应该很容易吧？ - Grace Feng

谢谢您的帮助 :-). 如果您觉得我的问题有用，请点赞。 - Kinjan Bhavsar