如何在Windows 10 UWP打开从屏幕右侧弹出？ [英] How to open a flyout from right side of screen in Windows 10 UWP?

问题描述

我的工作在Windows 10应用程序，我想，当图像被窃听从屏幕的右侧打开一个弹出。因为我已经在使用它的一些其他purpose.Its知名度应首先倒塌，当在图像上单击，然后它应该是Visible.Also我不能使用列SplitView，我不使用导航/设置飞出。我想实现如下

< IMG SRC =http://i.stack.imgur.com/7Bkes.pngALT =右侧菜单>

解决方案

其知名度应折叠第一和何时在图像上单击那么它应该是可见的。

您可以设置您的布局，例如像这样：

 <网格背景={ThemeResource ApplicationPageBackgroundThemeBrush} > 
< GridView控件的ItemsSource ={X：绑定WaresCollection}> 
< GridView.ItemTemplate> 
<&DataTemplate的GT; 
<图像来源={结合WaresImage}抽头=Image_TappedWIDTH =200HEIGHT =300/> 
< / DataTemplate中> 
< /GridView.ItemTemplate> 
< / GridView的> 
<电网X：NAME =FilterGridVerticalAlignment =弹力的Horizo​​ntalAlignment =拉伸能见度=折叠> 
< Grid.ColumnDefinitions> 
< ColumnDefinition WIDTH =*/> 
< ColumnDefinition WIDTH =*/> 
< /Grid.ColumnDefinitions> 
< StackPanel的背景=＃3300的Horizo​​ntalAlignment =拉伸VerticalAlignment =拉伸/> 
<电网Grid.Column =1填充=15背景=白> 
< Grid.RowDefinitions> 
< RowDefinition高度=*/> 
< RowDefinition HEIGHT =5 */> 
< RowDefinition HEIGHT =2 */> 
< /Grid.RowDefinitions> 
< TextBlock的文本=搜索过滤器字号=30VerticalAlignment =中心的Horizo​​ntalAlignment =左/> 
将;网格Grid.Row =1> 
< /网格和GT; 
<电网Grid.Row =2> 
<按钮内容=DONE背景=黄色VerticalAlignment =中心的Horizo​​ntalAlignment =左点击=Done_Button_Click/> 
<按钮内容=RESET背景=黄色VerticalAlignment =中心的Horizo​​ntalAlignment =右/> 
< /网格和GT; 
< /网格和GT; 
< /网格和GT; 
< /网格和GT; 
  

后面的代码：

 私人的ObservableCollection<洁具> WaresCollection =新的ObservableCollection<洁具>（）; 
 
保护覆盖无效的OnNavigatedTo（NavigationEventArgs E）
 {
 WaresCollection.Clear（）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao4.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao5.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao6.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao4.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao5.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao6.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao4.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao5.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao6.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao4.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao5.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao6.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao4.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao5.jpg}）; 
 WaresCollection.Add（新洁具{WaresImage =资产/ miao6.jpg}）; 
} 
 
私人无效Image_Tapped（对象发件人，TappedRoutedEventArgs E）
 {
 FilterGrid.Visibility = Visibility.Visible; 
} 
 
私人无效Done_Button_Click（对象发件人，RoutedEventArgs E）
 {
 FilterGrid.Visibility = Visibility.Collapsed; 
} 
  

和的洁具类：

 公共类洁具
 {
公共字符串WaresImage {搞定;组; } 
} 
  

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

I am working on Windows 10 App and I want to open a flyout from the right side of the screen when the image is tapped. I can't use SplitView as I am already using it for some other purpose.Its visibility should be Collapsed first and when to click on the image then it should be Visible.Also, I don't to use Navigation/Settings Flyout. I want to achieve as the following

解决方案

Its visibility should be Collapsed first and when to click on the image then it should be Visible.

You can set your layout for example like this:

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

code behind:

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

And the Wares class:

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

Here is the rendering image of this demo:

这篇关于如何在Windows 10 UWP打开从屏幕右侧弹出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！