c＃uwp模糊部分屏幕

Question

我正在使用UWP社区工具包创建如下模糊：

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

这适用于整个网格。

但是，我的问题是现在这个网格中有一个列表视图，我想在该列表视图中制作半透明的自定义标题，我希望该标题下的内容模糊。因此，该标题下的内容将动态更改。

有谁知道如何实现这个目标？

Answer 1

在内容Blur

中的单独grid内使用grid

这是一个代码示例

<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

默认情况下，[$row["id"]]的{​​{1}}可以与内容一起滚动。更优雅的解决方案是将标题模板提取为Header的 并模糊它。请注意，您需要为内容提供填充，以便最初为标题提供空间， top 填充值应该等于标题的高度。

你可以在一个风格中做所有事情 -

ListView

现在，您只需将样式应用于您想要的任何ScrollViewer -

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

结果