Как можно реализовать такой контрол в WPF? Во многих win10 приложениях есть гамбургер кнопка, при нажатии на которую появляется меню. При выборе какого-то элемента из этого меню оно закрывается. По сути мне нужен эффект точно такой же как на скриншоте, который я приложил к вопросу.
1 ответ
Если ширина контента фиксирована, всё просто. Но это не само собой разумеется, поэтому придумаем, как использовать layout manager для подсчёта нужных нам длин. Мне пришло в голову достаточно универсальное, но объёмное решение. (Буду рад, если кто-то сможет его упростить.)
Излагаю по частям.
Сначала нижняя, неподвижная часть контента.
<Grid Background="DimGray" Name="BottomGrid">
<Image Source="http://i.stack.imgur.com/CWDPv.png"/>
</Grid>
Тут всё просто, грид с контентом. Я дал ему имя, чтобы сослаться на его ширину позже.
Затем, движущаяся часть. Сделаем ещё один грид, ширину привяжем к ширине BottomGrid
. Смещение в сторону будет делать при помощи Margin
'а.
<Grid Background="WhiteSmoke" Width="{Binding ActualWidth, ElementName=BottomGrid}">
...
</Grid>
Как будем определять Margin
? Нам нужно, чтобы он изменялся от 0 до ширины BottomGrid
минус предопределённая константа (например, 50 пикселей). Поскольку такую константу задать не просто, заведём для этих целей невидимый измеряющий грид:
<Grid Margin="0,0,50,0" Height="0" Name="OffsetBottomGrid"/>
Его ширина будет равна максимальному маргину.
Но привязать анимацию к этой ширине нельзя, т. к. она в принципе изменяемая. Поэтому будем анимировать коэффициент от 0 до 1, и устанавливать маргин как произведение этого коэффициента на ширину OffsetBottomGrid
. Нам понадобится для этого конвертер, который умножает числа, и превращает результат в Thickness
:
class ThicknessMultiplyingConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter,
CultureInfo culture)
{
return new Thickness() { Left = values.Cast<double>().Aggregate((x, y) => x * y) };
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter,
CultureInfo culture)
{
throw new NotSupportedException();
}
}
Теперь, где хранить этот коэффициент? Можно было бы завести для этого attached property, но мы просто используем ещё один невидимый измерительный грид. Получится такое:
<Grid Background="WhiteSmoke" Width="{Binding ActualWidth, ElementName=BottomGrid}">
<Grid.Margin>
<MultiBinding Converter="{StaticResource TMult}">
<Binding Path="ActualWidth" ElementName="OffsetBottomGrid"/>
<Binding Path="ActualWidth" ElementName="MeasureGrid"/>
</MultiBinding>
</Grid.Margin>
<Image Source="http://i.stack.imgur.com/CWDPv.png"/>
</Grid>
Теперь нам нужно немного магии, которая бы вычисляла и анимировала нужную ширину у измерительного грида. Нам нужно включённое и выключенное состояние, для этого снова воспользуемся Tag
'ом.
<Grid Name="MeasureGrid" Height="0" Width="0">
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<Trigger Property="Tag">
<Trigger.Value>
<sys:Boolean>False</sys:Boolean>
</Trigger.Value>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width"
To="1" Duration="0:0:1">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width"
To="0" Duration="0:0:1">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
Устанавливаем триггер на переключение Tag
в True
. В триггере запускаем анимацию Width
от 0 до 1. Для триггера по значению свойства пришлось сделать стиль.
Осталось подцепить что-нибудь, что переключало бы нужной свойство, и всё.
Готовый код:
<Window x:Class="SlidingPanel.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SlidingPanel"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:ThicknessMultiplyingConverter x:Key="TMult"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Background="DimGray" Name="BottomGrid">
<Image Source="http://i.stack.imgur.com/CWDPv.png"/>
</Grid>
<Grid Margin="0,0,50,0" Height="0" Name="OffsetBottomGrid"/>
<Grid Name="MeasureGrid" Height="0" Width="0">
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<Trigger Property="Tag">
<Trigger.Value>
<sys:Boolean>False</sys:Boolean>
</Trigger.Value>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="1" Duration="0:0:1">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="0" Duration="0:0:1">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
<Grid Background="WhiteSmoke" Width="{Binding ActualWidth, ElementName=BottomGrid}">
<Grid.Margin>
<MultiBinding Converter="{StaticResource TMult}">
<Binding Path="ActualWidth" ElementName="OffsetBottomGrid"/>
<Binding Path="ActualWidth" ElementName="MeasureGrid"/>
</MultiBinding>
</Grid.Margin>
<Image Source="http://i.stack.imgur.com/CWDPv.png"/>
</Grid>
<ToggleButton IsChecked="{Binding Tag, ElementName=MeasureGrid}" Grid.Row="1" Content="Flip"/>
</Grid>
</Window>