CODEWITHSUNDEEP
c#xamluwpblurwindows-community-toolkit
user3239349
user3239349

Reputation: 917

c# uwp blur part of the screen

I am using UWP Community Toolkit to create blur as following:

<Grid x:Name="gridContent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <interactivity:Interaction.Behaviors>
            <behaviors:Blur x:Name="BlurBehavior"
                Value="0"
                Duration="0"
                Delay="0"
                AutomaticallyStart="True"/>
        </interactivity:Interaction.Behaviors>
</Grid>

And this works just fine for the whole grid.

But, my problem is now that there is a listview in this grid, and I want to make custom header in that listview that will be semi transparent, and I want just content under that header to be blurred. So the content under that header will be dynamically changed.

Does anyone know how to achieve this?

Upvotes: 1

Views: 826

Answers (2)

Vijay Nirmal
Vijay Nirmal

Reputation: 5867

Use Blur in a separate grid inside your content grid

Here is a code sample

<Grid Name="MainGrid">
    <ListView>
        ....
    </ListView>
    <Grid VerticalAlignment="Top" HorizontalAlignment="Stretch">
        <interactivity:Interaction.Behaviors>
            <behaviors:Blur Value="25" Duration="0" Delay="0" AutomaticallyStart="True"/>
        </interactivity:Interaction.Behaviors>

        <!-- If you want color shade -->
        <Grid.Background>
            <SolidColorBrush Color="Red" Opacity="0.5"/>
        </Grid.Background>
    </Grid>
</Grid>

For more info refer UWP Hamburger Menu with Frosted glass effect

Upvotes: 3

Justin XL
Justin XL

Reputation: 39006

By default, the Header of the ListView is scrollable along with the content. A more elegant solution would be to extract the header template to be outside of the ScrollViewer and blur it. Note you will need to give the content a padding to give space to the header initially, and the top padding value should be equal to the height of the header.

You can do everything within a style -

<Application.Resources>
    <x:Double x:Key="ListViewHeaderHeight">200</x:Double>
    <Thickness x:Key="ListViewContentMargin" Top="{StaticResource ListViewHeaderHeight}"></Thickness>

    <Style x:Key="BlurredHeaderListViewStyle" TargetType="ListView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListView">
                    <Grid BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                            <ItemsPresenter Margin="{StaticResource ListViewContentMargin}" FooterTransitions="{TemplateBinding FooterTransitions}" FooterTemplate="{TemplateBinding FooterTemplate}" Footer="{TemplateBinding Footer}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
                        </ScrollViewer>

                        <ContentPresenter x:Name="HeaderPresenter" Background="Transparent" Height="{StaticResource ListViewHeaderHeight}" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" VerticalAlignment="Top">
                            <interactivity:Interaction.Behaviors>
                                <behaviors:Blur x:Name="BlurBehavior" Value="12" />
                            </interactivity:Interaction.Behaviors>
                        </ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

Now you just apply the style to any ListView you want -

<ListView Style="{StaticResource BlurredHeaderListViewStyle}">
    <ListView.HeaderTemplate>
        <DataTemplate>
            <sampleapp:CustomHeader />
        </DataTemplate>
    </ListView.HeaderTemplate>

    <ListView.ItemTemplate>
        <DataTemplate>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Result

enter image description here

Upvotes: 2

Related Questions