c# uwp 模糊屏幕的一部分
c# uwp blur part of the screen
我正在使用 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下面的内容会动态变化。
有人知道如何实现吗?
在您的内容 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
默认情况下,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>
结果
我正在使用 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下面的内容会动态变化。
有人知道如何实现吗?
在您的内容 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
默认情况下,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>