How to open a flyout from right side of screen in Windows 10 UWP?

Question

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

score 3 · Accepted Answer · answered Sep 06 '16 at 02:30

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:

I want to open from right side same as you did, but when I set Width of Filter Grid, it doesn't open from side of screen. Can you suggest? I want to set `320` as Width — Kinjan Bhavsar, Sep 06 '16 at 04:27
@KinjanBhavsar, you can set the second column of `FilterGrid` to 320 like this ``. And I saw that you want to edit my answer, but seriously, the column definitions and the stackpanel in the left side is for the cover over the items, so when the filter grid is opened, items can not be selected again, just like the image you showed in your question. — Grace Feng, Sep 06 '16 at 04:52
I am using ContentPresenter in which Grid is added Dynamically, so when I make it Visible, the other Grid Visibility becomes Collapsed, and when I make it Collapsed, the other Grid,becomes Visible again. — Kinjan Bhavsar, Sep 06 '16 at 05:08
@KinjanBhavsar, I don't understand, I used `GridView` to load all the images, and you used `ContentPresenter`? I think my solution can solve your problem already, but if you want to use some other method, maybe you can post your code, and to make the your filter layout show in the right side, you can possible add `HorizontalAlignment="Right"` to the container of your filter layout. — Grace Feng, Sep 06 '16 at 05:13
I am creating similar as Master_Detail Layout same as Microsoft Sample, so left side I am loading ListView and right side based on selection, I am loading some data, and in that there is a menu image, on click of which I want to display this Right side menu. — Kinjan Bhavsar, Sep 06 '16 at 05:30
@KinjanBhavsar, then you can put my `FilterGrid` in the same place and have the same size as your detail `ContentPresenter` and change the second column definition to 320, make it collapsed at first and when click on the image menu in the `ContentPresenter` show the `FilterGrid`? It should be easy? — Grace Feng, Sep 06 '16 at 05:41
@thanks for your help :-). Please if you find my question useful, give an up vote. — Kinjan Bhavsar, Sep 06 '16 at 05:43

How to open a flyout from right side of screen in Windows 10 UWP?

1 Answers1