SplitView Pane not shown

@ratishphilip first, thank you for this nice toolkit. You answered my question here

However when trying to implement, I got issues with the SplitView Pane.

Assuming the following page called BlurredMenu:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Image Source="Assets/dubai_night-1920x1080.jpg" Stretch="UniformToFill" />
        <SplitView x:Name="splitview">
            <SplitView.Pane>
                <Grid>
                    <local:ImageBloomControl x:Name="BloomControl" ImageSource="ms-appx:///Assets/dubai_night-1920x1080.jpg" BlurAmount="4" Duration="00:00:02" OffsetX="0" OffsetY="100" />
                </Grid>
            </SplitView.Pane>
        </SplitView>

        <Grid Background="BlanchedAlmond" Height="48" Width="48" VerticalAlignment="Top" HorizontalAlignment="Left" Tapped="HamburgerGrid_Tapped" />
    </Grid>

and the corresponding cs-file:

public sealed partial class BlurredMenu : Page
    {
        public BlurredMenu()
        {
            this.InitializeComponent();
            this.Unloaded += BlurredMenu_Unloaded;
        }

        private void BlurredMenu_Unloaded(object sender, RoutedEventArgs e)
        {
            BloomControl.Dispose();
        }

        private async void HamburgerGrid_Tapped(object sender, TappedRoutedEventArgs e)
        {
            splitview.IsPaneOpen = !splitview.IsPaneOpen;

            await Task.Delay(300);

            if (splitview.IsPaneOpen)
            {
                BloomControl.Bloom();
            }
            else
            {
                BloomControl.Hide();
            }
        }

Does not show anything. The Pane is just empty. However changing the XAML file to the following (putting the ImageBloomControl outside of the pane) does make a bloom over the whole page.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Image Source="Assets/dubai_night-1920x1080.jpg" Stretch="UniformToFill" />
        <SplitView x:Name="splitview">
            <SplitView.Pane>
                <Grid>
                </Grid>
            </SplitView.Pane>
        </SplitView>

        <local:ImageBloomControl x:Name="BloomControl" ImageSource="ms-appx:///Assets/dubai_night-1920x1080.jpg" BlurAmount="4" Duration="00:00:02" OffsetX="0" OffsetY="100" />
        <Grid Background="BlanchedAlmond" Height="48" Width="48" VerticalAlignment="Top" HorizontalAlignment="Left" Tapped="HamburgerGrid_Tapped" />
    </Grid>

So the question here is: can I limit the bloom to the inside of the SplitView?

[ratishphilip]

@minimalisticMe You need not derive a new control from SplitView. Just add the new style to your Dictionary1.xaml and use it. The code which I specified (for ShowBloom and HideBloom) must be added to the ImageBloomControl’s existing code.

Now you can specify the SplitView in your XAML to use the BloomSplitViewStyle in the normal way

<SplitView Style="{StaticResource BloomSplitViewStyle}"
                ...

[minimalisticMe]

@ratishphilip thank you very much for the response.

I additionally added the line imageOptions.HorizontalAlignment = AlignmentX.Left; to your code. And now am happy to tell you, that everything works fine.

I would love to see byte[] to be coming and when I may suggest another improvement:

Automatically check, if the component was re-sized (e.g. due a re-size of the parent window) and then call bloom().