Forum General
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

BoxView blur

Lost_OliveLost_Olive Member ✭✭

Is there a possibility for me to make my BoxView blur the background image of my app?
Thank you!

Like this

Answers

  • Lost_OliveLost_Olive Member ✭✭

    I found this: https://github.com/roubachof/Sharpnado.Acrylic , but I don't know how to implement this.

  • AnubhavRanjanAnubhavRanjan INXamarin Team Xamurai

    @Lost_Olive Hi, How are you doing? Can you help a bit with the Context as to what you are trying to achieve in here?

  • Lost_OliveLost_Olive Member ✭✭

    @AnubhavRanjan, I want a BoxView on top of my background and I want it to blur the image.

  • Lost_OliveLost_Olive Member ✭✭

    @AnubhavRanjan like the blur background function in Adobe XD.

  • AnubhavRanjanAnubhavRanjan INXamarin Team Xamurai

    @Lost_Olive Have you checked this link:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/visualelement-blur

    Generally, you can use this either in XAML:

    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core">
    ...
    <BoxView x:Name="boxView" ios:VisualElement.BlurEffect="ExtraLight" HeightRequest="300" WidthRequest="300" />
    

    or in Code behind:

    using Xamarin.Forms.PlatformConfiguration;
    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
    ...
    
    boxView.On<iOS>().UseBlurEffect(BlurEffectStyle.ExtraLight);
    

    Can you check if it helps?

  • Lost_OliveLost_Olive Member ✭✭

    @AnubhavRanjan Since I just want to blur part of my background, I've decided to just turn the opacity of the BoxView down a little bit.

  • AnubhavRanjanAnubhavRanjan INXamarin Team Xamurai

    @Lost_Olive That's good. I am guessing for your Card type of Layout, it should fit well into it

  • JonasRembrattJonasRembratt SEUniversity ✭✭✭
    edited October 6

    I'd like to use the blur effect for overlay purposes but I get absolutely no effect whatsoever.

    Did a quick spike, like so:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
                 x:Class="spike.blurEffect.MainPage">
    
        <Grid BackgroundColor="Beige">
            <Label 
                Text="Welcome to Xamarin.Forms!" 
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" 
                />
    
            <BoxView
                x:Name="BoxView"
                HeightRequest="100" WidthRequest="100"
                VerticalOptions="Center" 
                HorizontalOptions="Center"
                ios:VisualElement.BlurEffect="ExtraLight"
                />
    
        </Grid>
    
    </ContentPage>
    

    Trird it on several generations of iOS/devices (simulators) and also on a physical iPhone 11 but it doesn't work. What happens is:
    1. If I give the BoxView a background color; the BoxView gets displayed at the center of screen, obscuring part of the "Welcome to Xamarin.Forms!" label, as expected. There's no blur effect however. I can see a lighter square at the top left corner though .
    2. If BoxView gets no background color I can see that dim square at the top left corner but no other effect

Sign In or Register to comment.