An example left drawer that takes up space rather than overlaying the content using MDIX

DrawerHost.xaml

<ControlTemplate TargetType="{x:Type local:MyDrawerHost}">
    <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LeftDrawer">
                <VisualStateGroup.Transitions>
                    <VisualTransition From="LeftDrawerClosed" To="LeftDrawerOpen">
                        <Storyboard>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_LeftDrawer">
                                <EasingThicknessKeyFrame Value="0" KeyTime="0:0:0.4">
                                    <EasingThicknessKeyFrame.EasingFunction>
                                        <SineEase EasingMode="EaseOut" />
                                    </EasingThicknessKeyFrame.EasingFunction>
                                </EasingThicknessKeyFrame>
                            </ThicknessAnimationUsingKeyFrames>
                            <DoubleAnimation Storyboard.TargetName="LeftDrawerShadow" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.04" />
                        </Storyboard>
                    </VisualTransition>
                    <VisualTransition From="LeftDrawerOpen" To="LeftDrawerClosed">
                        <Storyboard>
                            <ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_LeftDrawer" Duration="0:0:0.4">
                                <ThicknessAnimation.EasingFunction>
                                    <SineEase EasingMode="EaseOut" />
                                </ThicknessAnimation.EasingFunction>
                            </ThicknessAnimation>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LeftDrawerShadow" Storyboard.TargetProperty="Opacity">
                                <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.36" />
                                <EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.4">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <SineEase EasingMode="EaseOut" />
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="LeftDrawerOpen">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="LeftDrawerShadow" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0" />
                        <ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_LeftDrawer" To="0" Duration="0"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="LeftDrawerClosed">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="LeftDrawerShadow" Storyboard.TargetProperty="Opacity" From="0" To="0" Duration="0" />
                        <ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_LeftDrawer" Duration="0"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid x:Name="RootGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <ContentPresenter Grid.Column="1"
                x:Name="ContentPresenter" Opacity="1"                    
                Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentStringFormat="{TemplateBinding ContentStringFormat}" />
            <Grid HorizontalAlignment="Left" VerticalAlignment="Stretch"
                    x:Name="PART_LeftDrawer" Grid.Column="0"
                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth, Converter={StaticResource DrawerOffsetConverter}, ConverterParameter={x:Static Dock.Left}}"
                    Panel.ZIndex="{TemplateBinding LeftDrawerZIndex}">
                <AdornerDecorator CacheMode="{Binding RelativeSource={RelativeSource Self}, Path=(local:ShadowAssist.CacheMode)}">
                    <Border Effect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:ShadowAssist.ShadowDepth), Converter={x:Static converters:ShadowConverter.Instance}}"
                            Opacity="0"
                            Background="{TemplateBinding LeftDrawerBackground}"
                            x:Name="LeftDrawerShadow">
                    </Border>
                </AdornerDecorator>
                <ContentPresenter Content="{TemplateBinding LeftDrawerContent}" ContentTemplate="{TemplateBinding LeftDrawerContentTemplate}" ContentStringFormat="{TemplateBinding LeftDrawerContentStringFormat}"
                                    IsEnabled="{TemplateBinding IsLeftDrawerOpen}"
                />
            </Grid>
        </Grid>
    </Border>
</ControlTemplate>

This is very cool. I thought I knew where to start but I am struggling to implement this. Would you happen to have basic sample app demonstrating this approach please, please 👍