uwp - 分割 View 控制，当 Pane 打开时使内容变暗

Question

在应用程序上，我有一个带有 Pane 和内容的 Split View控件。我想知道当 Pane 打开时是否可以使内容变暗，就像我在 splitview.Content 上应用 75% 的不透明度蒙版一样。

预先感谢您的帮助

问候

Answer 1

有多种选择:

• 通过将半透明深色控件(例如 Grid)作为 SplitView.Content 的顶层来应用“假”不透明度。

• 在SplitView.Content中使用黑色的Grid作为控件树的根对象，放置一个浅色的Grid(白色或您的应用程序的颜色)，然后构建其余内容。

内容 Xaml:

<SplitView.Content>
    <Grid Background="Black">
        <Grid
            x:Name="OpacityGrid"
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
            Opacity="1">
        ...
        </Grid>
    </Grid>
</SplitView.Content>

• 将页面的根设置为黑色，并使用灯光控件作为 SplitView.Content 的根。这与之前的方法类似，但需要少 1 层控制。

结构设置完毕后，您可以根据 SplitView.Pane 的状态将不透明度应用于光控件(或情况 1 的深色顶层)。要么在后面的代码中执行:

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
    OpacityGrid.Opacity = MySplitView.IsPaneOpen ? 0.7 : 1;
}

或者使用转换器:

public class BoolToOpacityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool && (bool) value)
            return 0.7;
        return 1;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

XAML:

<Grid
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    Opacity="{Binding IsPaneOpen, ElementName=MySplitView, Converter={StaticResource BoolToOpacityConverter}}" />

<小时/>

额外注意:如果您想使用 PaneOpened 事件而不是单击汉堡包图标，则必须使用 this trick因为没有 PaneOpened 事件。