CODEWITHSUNDEEP
c#xamlwin-universal-appuwpsplitview
nor0x
nor0x

Reputation: 1213

UWP - Splitview define relative value to OpenPaneLength

I'm using the new SplitView control to create a hamburger menu in my UWP app. My question is if I can define a relative or percentage value to its OpenPaneLength property? I want to achieve that the width of the SplitView's Pane is for example 80% of the device's width.

Thank you!

This is the XAML code of the SplitView

<SplitView x:Name="ShellSplitView"
           DisplayMode="Overlay"
           IsPaneOpen="False"
           OpenPaneLength="300">
    <SplitView.Pane>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <RadioButton x:Name="SettingsButton"
                         Grid.Row="1"
                         Content="Settings"
                         Checked="OnSettingsButtonChecked" />
        </Grid>
    </SplitView.Pane>
    <SplitView.Content>...</SplitView.Content>
</SplitView>

Upvotes: 1

Views: 1526

Answers (1)

Justin XL
Justin XL

Reputation: 39006

You just need to monitor whenever the IsPaneOpen flag is set to true, calculate the OpenPaneLength based on its parent container's ActualWidth.

this.SplitView.RegisterPropertyChangedCallback(SplitView.IsPaneOpenProperty, IsPaneOpenPropertyChanged);


private void IsPaneOpenPropertyChanged(DependencyObject sender, DependencyProperty dp)
{
    if (this.SplitView.IsPaneOpen)
    {
        this.SplitView.OpenPaneLength = this.LayoutRoot.ActualWidth * .8;
    }
}

Upvotes: 3

Related Questions