Split view control, darken content when pane is open

Question

On the application, i have a Split View control with a pane and a content. I would like to know if it is possible to darken the content when the pane is open as if i was applying a 75% opacity mask on splitview.Content.

Thanks in advance for your help

Regards

score 1 · Accepted Answer · edited May 23 '17 at 12:13

There are multiple options:

Apply "fake" opacity by putting a semi-transparant dark control (e.g. Grid) as the top layer of the SplitView.Content.
Use a black Grid as the root object of your control tree in SplitView.Content, put a light Grid (white or which ever color your app is) in it and then build the rest of your content.

Content Xaml:

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

Set the page's root to black and use a light control as the root of your SplitView.Content. This is similar to the previous approach but requires 1 less layer of controls.

Once the structure is set up, you can apply Opacity to the light control (or dark top layer for case 1) depending on the state of your SplitView.Pane. Either do it in code behind:

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

Or use a converter:

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}}" />

Extra note: if you want to use the PaneOpened event instead of the Click on your hamburger icon, you'll ave to use this trick as there is no PaneOpened event.

Split view control, darken content when pane is open

1 Answers1