locked
Can i blur the background when the popup is opened in windows store app

    Question

  • Hi Everyone,

             When tap the button on the page the popup ll appear in front of the page. on that time i want blur the background. i.e i want to blur the page.

    Is it possible  ?

    And it is correct behavior of windows store app

    Thursday, October 30, 2014 7:19 AM

Answers

  • The easiest way to achieve this is to make the popup full screen, and give it a semi-transparent large border.
    Thursday, October 30, 2014 7:56 AM
  • There's no straightforward way to do this. A more standard way is to dim the background by covering it with a partially opaque panel.

    To blur you would need to capture the existing UiElement to a bitmap, use Direct2d to apply a bit filter, then display the blurred image over the united one.

    Thursday, October 30, 2014 3:02 PM
    Owner
  • like this ?

    <Page
        x:Class="App4.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App4"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
            <Grid x:Name="back">
                   <Grid.RowDefinitions >
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Text="Title" FontSize="48"/>
                <Button Content="Click me" Grid.Row="1" Click="Button_Click" />
            </Grid>
    
            <Popup  x:Name="pop" >
                <Grid Background="Yellow" >
                    <TextBlock Text="PopUp"/>
                </Grid>            
            </Popup>
        </Grid>
    </Page>

        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                pop.IsOpen = !pop.IsOpen;
                // you can do this by Data Binding and ValueConverter in XAML
                 if (pop.IsOpen )
                 {
                     back.Opacity = 0.5;
                 }
                 else
                 {
                     back.Opacity = 1;
                 }
            }
        }


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。



    Thursday, October 30, 2014 3:23 PM
  • Hi, Shaafs.

    You can use two ways:

    1. You can to show some border with some opacity like background when you start show your popup.
    2. You can to capture your page before popup will be opened and use some filter for blur it. After set blurry image to background.


    Regards, Nikita.

    Thursday, October 30, 2014 7:16 PM

All replies

  • The easiest way to achieve this is to make the popup full screen, and give it a semi-transparent large border.
    Thursday, October 30, 2014 7:56 AM
  • Thanks for your reponse Diederik Krols.

     It is some of selecting option. I have to keep the popup small.

    Thursday, October 30, 2014 8:22 AM
  • There's no straightforward way to do this. A more standard way is to dim the background by covering it with a partially opaque panel.

    To blur you would need to capture the existing UiElement to a bitmap, use Direct2d to apply a bit filter, then display the blurred image over the united one.

    Thursday, October 30, 2014 3:02 PM
    Owner
  • like this ?

    <Page
        x:Class="App4.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App4"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
            <Grid x:Name="back">
                   <Grid.RowDefinitions >
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Text="Title" FontSize="48"/>
                <Button Content="Click me" Grid.Row="1" Click="Button_Click" />
            </Grid>
    
            <Popup  x:Name="pop" >
                <Grid Background="Yellow" >
                    <TextBlock Text="PopUp"/>
                </Grid>            
            </Popup>
        </Grid>
    </Page>

        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                pop.IsOpen = !pop.IsOpen;
                // you can do this by Data Binding and ValueConverter in XAML
                 if (pop.IsOpen )
                 {
                     back.Opacity = 0.5;
                 }
                 else
                 {
                     back.Opacity = 1;
                 }
            }
        }


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。



    Thursday, October 30, 2014 3:23 PM
  • Hi, Shaafs.

    You can use two ways:

    1. You can to show some border with some opacity like background when you start show your popup.
    2. You can to capture your page before popup will be opened and use some filter for blur it. After set blurry image to background.


    Regards, Nikita.

    Thursday, October 30, 2014 7:16 PM