Question

我正在使用Windows 10 App，我想在点击图像时从屏幕右侧打开一个弹出按钮。我不能使用SplitView，因为我已经将它用于其他目的。它的可见性应首先折叠，何时点击图像然后它应该是Visible.Also，我不使用导航/设置弹出窗口。我想实现以下

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

和Wares班级：

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

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

如何在Windows 10 UWP中从屏幕右侧打开弹出窗口？

1 个答案: