回答編集履歴

  > ソースコード中に、手計算で算出した数値がいくつかありますが、それらは自動的に算出させて、手計算を不要にしたいです。

 

  よくあるのは`DoubleAnimation`は、0～1の比率としてアニメーションさせる手法です（そのかわり`Converter`が必要になります）

  [WPF animation: binding to the "To" attribute of storyboard animation - Stack Overflow](https://stackoverflow.com/questions/2186933/wpf-animation-binding-to-the-to-attribute-of-storyboard-animation/14164245#14164245)

 

  比率でやったとしても基準になる数値は必要になりますが、お手軽なのはダミーで実際に作ってしまうことです（`Collapsed`にしてしまうとサイズ０になってしまうので、`Hidden`にしたり何かの裏に隠します^^;

 

  <Window

  x:Class="Questions371156.MainWindow"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  xmlns:local="clr-namespace:Questions371156"

  Width="800"

  Height="450">

  <Window.Resources>

  <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

  <local:MultiplyConverter x:Key="multiplyConverter" />

  </Window.Resources>

  <DockPanel>

  <StackPanel Background="DarkGray">

  <StackPanel.Width>

  <!-- 比率が0～1にアニメーションすると、StackPanel.Widthが53～145に変化する（ようなコンバータを書く） -->

  <MultiBinding Converter="{StaticResource multiplyConverter}">

  <!-- 初期値: 53の部分 -->

  <Binding ElementName="dummy_min_button" Path="ActualWidth" />

  <!-- ターゲット値: 145の部分 -->

  <Binding ElementName="side_menu_panel2" Path="DesiredSize.Width" />

  <!-- 比率: 0～1で変化する -->

  <Binding ElementName="dummy_width_ratio" Path="Width" />

  </MultiBinding>

  </StackPanel.Width>

 

  <StackPanel.Triggers>

  <EventTrigger RoutedEvent="MouseEnter" SourceName="side_menu_panel2">

  <BeginStoryboard>

  <Storyboard>

  <DoubleAnimation

  Storyboard.TargetName="dummy_width_ratio"

  Storyboard.TargetProperty="Width"

  To="1"

  Duration="0:0:0.3">

  <DoubleAnimation.EasingFunction>

  <CubicEase />

  </DoubleAnimation.EasingFunction>

  </DoubleAnimation>

  </Storyboard>

  </BeginStoryboard>

  </EventTrigger>

  <EventTrigger RoutedEvent="MouseLeave" SourceName="side_menu_panel2">

  <BeginStoryboard>

  <Storyboard>

  <DoubleAnimation

  Storyboard.TargetName="dummy_width_ratio"

  Storyboard.TargetProperty="Width"

  To="0"

  Duration="0:0:0.15">

  <DoubleAnimation.EasingFunction>

  <CubicEase />

  </DoubleAnimation.EasingFunction>

  </DoubleAnimation>

  </Storyboard>

  </BeginStoryboard>

  </EventTrigger>

  </StackPanel.Triggers>

  <StackPanel.Resources>

  <Style TargetType="RadioButton">

  <Setter Property="Padding" Value="4" />

  <Setter Property="VerticalContentAlignment" Value="Center" />

  <Setter Property="Template">

  <Setter.Value>

  <ControlTemplate TargetType="RadioButton">

  <BulletDecorator>

  <BulletDecorator.Bullet>

  <!-- Background使ってなさそうなのでこっちで使いました^^; -->

  <Ellipse

  Width="45"

  Height="45"

  Fill="{TemplateBinding Background}" />

  </BulletDecorator.Bullet>

  <ContentPresenter

  x:Name="contentPresenter"

  Margin="20,0,0,0"

  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

  Visibility="{TemplateBinding HasContent, Converter={StaticResource BooleanToVisibilityConverter}}" />

  </BulletDecorator>

  </Border>

  </ControlTemplate>

  </Setter.Value>

  </Setter>

  </Style>

  </StackPanel.Resources>

  <!-- ダミーを隠すためにGridで重なってもらう -->

  <Grid>

  <!-- 閉じたときのサイズ計算用ダミー -->

  <RadioButton x:Name="dummy_min_button" HorizontalAlignment="Left" />

  <!-- 比率計算用ダミー -->

  <Border x:Name="dummy_width_ratio" Width="0" />

 

  <StackPanel x:Name="side_menu_panel2">

  <RadioButton Background="#FF21E402" Content="メニュー1" />

  <RadioButton Background="MediumVioletRed" Content="メニューーー2" />

  </StackPanel>

  </Grid>

  </StackPanel>

  <Rectangle Fill="Gray" />

  </DockPanel>

  </Window>

  ```

 

  using System;

  using System.Globalization;

  using System.Windows;

  using System.Windows.Data;

 

  namespace Questions371156

  {

  public class MultiplyConverter : IMultiValueConverter

  {

  // values[0]:初期値 values[1]:ターゲット値 values[2]:比率 が入力される前提

  public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)

  => (double)values[0] + (double)values[2] * ((double)values[1] - (double)values[0]);

 

  public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) => throw new NotImplementedException();

  }

 

  public partial class MainWindow : Window

  {

  public MainWindow() => InitializeComponent();

  }

  }

  ```

 

  ---

 

 

  アニメーションは「引っ込むときは速くする・イージングをつける」と、オサレな感じになると思います^^

 

  WPF用ではありませんがUXのガイドラインがあります。

  [モーション (Windows アプリでのアニメーション) - Windows apps | Microsoft Docs](https://docs.microsoft.com/ja-jp/windows/apps/design/motion/motion-in-practice)