WPFでハンバーガーメニューを作成したい

タイトル通り、WPFでハンバーガーメニューを作成したいです。
ただいま、WPFを学習中でアニメーションをつけて、ハンバーガーメニューのような動きをする方法があると考え、その方法をご教授願います。
現時点では、gridの幅をアニメーションで変更するしかできず、gridが拡大したときにほかのコントロールのかぶってしまいます。
また、gridを出す、隠すをボタン二つで制御しているので、1つにまとめることができないか知りたいです。

xmal
1<Window x:Class="HamburgerMuneWpf.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6        xmlns:local="clr-namespace:HamburgerMuneWpf"
7        mc:Ignorable="d"
8        Title="MainWindow" Height="450" Width="800">
9    <Window.Resources>
10        <Storyboard x:Key="Appearance">
11            <DoubleAnimation 
12                Storyboard.TargetName="config"
13                Storyboard.TargetProperty="Width"
14                To="300"
15                Duration="00:00:00.1"/>
16        </Storyboard>
17        <Storyboard x:Key="Disappear">
18            <DoubleAnimation
19                Storyboard.TargetName="config"
20                Storyboard.TargetProperty="Width"
21                To="20"
22                Duration="00:00:00.1"/>
23        </Storyboard>
24    </Window.Resources>
25    <Grid>
26        <Button x:Name="Btn001" Content="設定" Height="40" Margin="0,90,476,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="67">
27            <Button.Triggers>
28                <EventTrigger RoutedEvent="Button.Click">
29                    <BeginStoryboard Storyboard="{StaticResource Appearance}"/>
30                </EventTrigger>
31            </Button.Triggers>
32        </Button>
33        <Button x:Name="Btn001_Copy" Content="設定" Height="40" Margin="0,177,542,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="67">
34            <Button.Triggers>
35                <EventTrigger RoutedEvent="Button.Click">
36                    <BeginStoryboard Storyboard="{StaticResource Disappear}"/>
37                </EventTrigger>
38            </Button.Triggers>
39        </Button>
40        <Grid x:Name="config" HorizontalAlignment="Right" Width="17" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
41            <ComboBox HorizontalAlignment="Left" Height="39" Margin="37,53,0,0" VerticalAlignment="Top" Width="81"/>
42            <ComboBox HorizontalAlignment="Left" Height="39" Margin="161,53,0,0" VerticalAlignment="Top" Width="81"/>
43            <ComboBox HorizontalAlignment="Left" Height="39" Margin="37,140,0,0" VerticalAlignment="Top" Width="81"/>
44            <ComboBox HorizontalAlignment="Left" Height="39" Margin="161,140,0,0" VerticalAlignment="Top" Width="81"/>
45            <ComboBox HorizontalAlignment="Left" Height="39" Margin="37,217,0,0" VerticalAlignment="Top" Width="81"/>
46            <ComboBox HorizontalAlignment="Left" Height="39" Margin="161,217,0,0" VerticalAlignment="Top" Width="81"/>
47            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="37,22,0,0" VerticalAlignment="Top" Width="83"/>
48            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="159,17,0,0" VerticalAlignment="Top" Width="83"/>
49            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="37,109,0,0" VerticalAlignment="Top" Width="83"/>
50            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="161,107,0,0" VerticalAlignment="Top" Width="83"/>
51            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="37,186,0,0" VerticalAlignment="Top" Width="83"/>
52            <Label Content="Label" HorizontalAlignment="Left" Height="31" Margin="161,179,0,0" VerticalAlignment="Top" Width="83"/>
53        </Grid>
54    </Grid>
55</Window>

また、ほか方法がありましたら、お願いいたします。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

gridが拡大したときにほかのコントロールのかぶってしまいます。

ハンバーガーメニューにもオーバーレイするものと、押し出すもの両方ありますよね。
かぶらないようにするならGridで区切って、メニュー部分とコンテンツ部分を別々に入れればいいんじゃないですかね。

ボタン二つで制御しているので、1つにまとめることができないか知りたいです。

オンオフを表すようなものには、ToggleButtonがあります。

ほか方法がありましたら

ハンバーガーメニューはNuGetやGitHub・ブログ記事等いくつかあると思うので、研究してみるといいかもしれませんね。

個人的にはNavigationViewが、WinUIで自然に使えたら言うことないのですが。

xml
1<Window
2  x:Class="Questions290156.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450">
7  <Window.Resources>
8    <Storyboard x:Key="Appearance">
9      <DoubleAnimation
10        Storyboard.TargetName="config"
11        Storyboard.TargetProperty="Width"
12        To="300"
13        Duration="00:00:00.1" />
14    </Storyboard>
15    <Storyboard x:Key="Disappear">
16      <DoubleAnimation
17        Storyboard.TargetName="config"
18        Storyboard.TargetProperty="Width"
19        To="20"
20        Duration="00:00:00.1" />
21    </Storyboard>
22
23    <Style TargetType="HeaderedContentControl">
24      <Setter Property="Margin" Value="30,20" />
25      <Setter Property="Header" Value="Label" />
26    </Style>
27  </Window.Resources>
28  <Grid>
29    <Grid.ColumnDefinitions>
30      <ColumnDefinition />
31      <ColumnDefinition Width="Auto" />
32    </Grid.ColumnDefinitions>
33    <Button
34      x:Name="Btn001"
35      Width="67"
36      Height="40"
37      Margin="0,177,242,0"
38      HorizontalAlignment="Right"
39      VerticalAlignment="Top"
40      Content="設定">
41      <Button.Triggers>
42        <EventTrigger RoutedEvent="Button.Click">
43          <BeginStoryboard Storyboard="{StaticResource Appearance}" />
44        </EventTrigger>
45      </Button.Triggers>
46    </Button>
47    <Button
48      x:Name="Btn001_Copy"
49      Width="67"
50      Height="40"
51      Margin="0,90,176,0"
52      HorizontalAlignment="Right"
53      VerticalAlignment="Top"
54      Content="設定">
55      <Button.Triggers>
56        <EventTrigger RoutedEvent="Button.Click">
57          <BeginStoryboard Storyboard="{StaticResource Disappear}" />
58        </EventTrigger>
59      </Button.Triggers>
60    </Button>
61
62    <Grid
63      x:Name="config"
64      Grid.Column="1"
65      Width="300"
66      Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
67      <Grid.RowDefinitions>
68        <RowDefinition Height="Auto" />
69        <RowDefinition Height="Auto" />
70        <RowDefinition Height="Auto" />
71        <RowDefinition />
72      </Grid.RowDefinitions>
73      <Grid.ColumnDefinitions>
74        <ColumnDefinition />
75        <ColumnDefinition />
76      </Grid.ColumnDefinitions>
77
78      <HeaderedContentControl>
79        <ComboBox />
80      </HeaderedContentControl>
81      <HeaderedContentControl Grid.Column="1">
82        <ComboBox />
83      </HeaderedContentControl>
84      <HeaderedContentControl Grid.Row="1">
85        <ComboBox />
86      </HeaderedContentControl>
87      <HeaderedContentControl Grid.Row="1" Grid.Column="1">
88        <ComboBox />
89      </HeaderedContentControl>
90      <HeaderedContentControl Grid.Row="2">
91        <ComboBox />
92      </HeaderedContentControl>
93      <HeaderedContentControl Grid.Row="2" Grid.Column="1">
94        <ComboBox />
95      </HeaderedContentControl>
96    </Grid>
97
98    <ToggleButton
99        HorizontalAlignment="Left"
100        VerticalAlignment="Top"
101        Content="&gt;" Grid.Column="1">
102      <ToggleButton.Triggers>
103        <EventTrigger RoutedEvent="ToggleButton.Checked">
104          <BeginStoryboard Storyboard="{StaticResource Disappear}" />
105          <BeginStoryboard>
106            <Storyboard>
107              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
108                <DiscreteObjectKeyFrame KeyTime="0" Value="&lt;" />
109              </ObjectAnimationUsingKeyFrames>
110            </Storyboard>
111          </BeginStoryboard>
112        </EventTrigger>
113        <EventTrigger RoutedEvent="ToggleButton.Unchecked">
114          <BeginStoryboard Storyboard="{StaticResource Appearance}" />
115          <BeginStoryboard>
116            <Storyboard>
117              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
118                <DiscreteObjectKeyFrame KeyTime="0" Value="&gt;" />
119              </ObjectAnimationUsingKeyFrames>
120            </Storyboard>
121          </BeginStoryboard>
122        </EventTrigger>
123      </ToggleButton.Triggers>
124    </ToggleButton>
125  </Grid>
126</Window>