C# 如何在Windows 10 UWP中从屏幕右侧打开弹出按钮？

我正在使用Windows 10应用程序，我想在点击图像时从屏幕右侧打开一个弹出按钮。我无法使用SplitView，因为我已将其用于其他用途。它的可见性应首先折叠，单击图像时，它应可见。此外，我不希望使用导航/设置弹出按钮。我想实现如下目标

它的可见性应该首先折叠，当单击图像时，它应该是可见的

例如，您可以如下设置布局：

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

以下是此演示的渲染图像：

---

我想从右侧打开，和您一样，但当我设置过滤器网格的宽度时，它不会从屏幕的一侧打开。你能推荐一下吗？我想将

320

设置为Width@KinjanBhavsar，您可以将

FilterGrid

的第二列设置为320，如下所示

。我看到你想编辑我的答案，但说真的，左侧的列定义和stackpanel是用于覆盖项目的，因此当打开筛选网格时，无法再次选择项目，就像你在问题中显示的图像一样。我使用的是动态添加网格的ContentPresenter，因此，当我使其可见时，另一个网格的可见性将被折叠，当我使其折叠时，另一个网格将再次可见。@KinjanBhavsar，我不明白，我使用了

GridView

加载所有图像，而您使用了

ContentPresenter

？我认为我的解决方案已经可以解决您的问题，但是如果您想使用其他方法，也许您可以发布代码，并使过滤器布局显示在右侧，您可以将

HorizontalAlignment=“right”

添加到过滤器布局的容器中。@KinjanBhavsar，然后，您可以将我的

FilterGrid

放在与您的详细信息

ContentPresenter

相同的位置并具有相同的大小，然后将第二列定义更改为320，首先将其折叠，并在单击

ContentPresenter

中的图像菜单时显示

FilterGrid

？应该很容易吧？

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