Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An example left drawer that takes up space rather than overlaying the content using MDIX
<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>
@maciz84
Copy link

maciz84 commented May 18, 2017

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 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment