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

这适用于整个网格。

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

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

Answer 1

在您的内容Blur中单独使用gridgrid

这是一个代码示例

<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 汉堡菜单

Answer 2

默认情况下， 的Header可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>

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

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

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

---

结果