c# uwp 模糊屏幕的一部分

Question

我正在使用 UWP Community Toolkit 创建模糊，如下所示：

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

这对整个网格都适用。

但是，我的问题是现在这个网格中有一个列表视图，我想在那个半透明的列表视图中自定义 header，我只想要 [=19] 下面的内容=] 变得模糊。所以那个header下面的内容会动态变化。

有人知道如何实现吗？

Answer 1

在您的内容 grid

中的单独 grid 中使用 Blur

这是一个代码示例

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

有关详细信息，请参阅 UWP Hamburger Menu with Frosted glass effect

Answer 2

默认情况下，ListView 的 Header 可随内容一起滚动。一个更优雅的解决方案是将 header 模板提取到 ScrollViewer 的外部并对其进行模糊处理。请注意，您需要为内容提供一个填充，以便最初为 header 提供 space，并且 top 填充值应等于 header.

你可以在一种风格中做任何事情 -

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

现在您只需将样式应用到您想要的任何 ListView -

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

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

c# uwp 模糊屏幕的一部分

c# uwp blur part of the screen

c#

xaml

uwp

blur

windows-community-toolkit

结果