teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

見直しキャンペーン中

2023/07/23 05:19

投稿

TN8001
TN8001

スコア10108

answer CHANGED
@@ -1,143 +1,143 @@
1
- > gridが拡大したときにほかのコントロールのかぶってしまいます。
2
-
3
- ハンバーガーメニューにもオーバーレイするものと、押し出すもの両方ありますよね。
4
- かぶらないようにするなら`Grid`で区切って、メニュー部分とコンテンツ部分を別々に入れればいいんじゃないですかね。
5
-
6
- > ボタン二つで制御しているので、1つにまとめることができないか知りたいです。
7
-
8
- オンオフを表すようなものには、`ToggleButton`があります。
9
-
10
- > ほか方法がありましたら
11
-
12
- ハンバーガーメニューはNuGetやGitHub・ブログ記事等いくつかあると思うので、研究してみるといいかもしれませんね。
13
-
14
- 個人的には`NavigationView `が、WinUIで自然に使えたら言うことないのですが。
15
-
16
- ```xaml
17
- <Window
18
- x:Class="Questions290156.MainWindow"
19
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
20
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
21
- Width="800"
22
- Height="450">
23
- <Window.Resources>
24
- <Storyboard x:Key="Appearance">
25
- <DoubleAnimation
26
- Storyboard.TargetName="config"
27
- Storyboard.TargetProperty="Width"
28
- To="300"
29
- Duration="00:00:00.1" />
30
- </Storyboard>
31
- <Storyboard x:Key="Disappear">
32
- <DoubleAnimation
33
- Storyboard.TargetName="config"
34
- Storyboard.TargetProperty="Width"
35
- To="20"
36
- Duration="00:00:00.1" />
37
- </Storyboard>
38
-
39
- <Style TargetType="HeaderedContentControl">
40
- <Setter Property="Margin" Value="30,20" />
41
- <Setter Property="Header" Value="Label" />
42
- </Style>
43
- </Window.Resources>
44
- <Grid>
45
- <Grid.ColumnDefinitions>
46
- <ColumnDefinition />
47
- <ColumnDefinition Width="Auto" />
48
- </Grid.ColumnDefinitions>
49
- <Button
50
- x:Name="Btn001"
51
- Width="67"
52
- Height="40"
53
- Margin="0,177,242,0"
54
- HorizontalAlignment="Right"
55
- VerticalAlignment="Top"
56
- Content="設定">
57
- <Button.Triggers>
58
- <EventTrigger RoutedEvent="Button.Click">
59
- <BeginStoryboard Storyboard="{StaticResource Appearance}" />
60
- </EventTrigger>
61
- </Button.Triggers>
62
- </Button>
63
- <Button
64
- x:Name="Btn001_Copy"
65
- Width="67"
66
- Height="40"
67
- Margin="0,90,176,0"
68
- HorizontalAlignment="Right"
69
- VerticalAlignment="Top"
70
- Content="設定">
71
- <Button.Triggers>
72
- <EventTrigger RoutedEvent="Button.Click">
73
- <BeginStoryboard Storyboard="{StaticResource Disappear}" />
74
- </EventTrigger>
75
- </Button.Triggers>
76
- </Button>
77
-
78
- <Grid
79
- x:Name="config"
80
- Grid.Column="1"
81
- Width="300"
82
- Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
83
- <Grid.RowDefinitions>
84
- <RowDefinition Height="Auto" />
85
- <RowDefinition Height="Auto" />
86
- <RowDefinition Height="Auto" />
87
- <RowDefinition />
88
- </Grid.RowDefinitions>
89
- <Grid.ColumnDefinitions>
90
- <ColumnDefinition />
91
- <ColumnDefinition />
92
- </Grid.ColumnDefinitions>
93
-
94
- <HeaderedContentControl>
95
- <ComboBox />
96
- </HeaderedContentControl>
97
- <HeaderedContentControl Grid.Column="1">
98
- <ComboBox />
99
- </HeaderedContentControl>
100
- <HeaderedContentControl Grid.Row="1">
101
- <ComboBox />
102
- </HeaderedContentControl>
103
- <HeaderedContentControl Grid.Row="1" Grid.Column="1">
104
- <ComboBox />
105
- </HeaderedContentControl>
106
- <HeaderedContentControl Grid.Row="2">
107
- <ComboBox />
108
- </HeaderedContentControl>
109
- <HeaderedContentControl Grid.Row="2" Grid.Column="1">
110
- <ComboBox />
111
- </HeaderedContentControl>
112
- </Grid>
113
-
114
- <ToggleButton
115
- HorizontalAlignment="Left"
116
- VerticalAlignment="Top"
117
- Content="&gt;" Grid.Column="1">
118
- <ToggleButton.Triggers>
119
- <EventTrigger RoutedEvent="ToggleButton.Checked">
120
- <BeginStoryboard Storyboard="{StaticResource Disappear}" />
121
- <BeginStoryboard>
122
- <Storyboard>
123
- <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
124
- <DiscreteObjectKeyFrame KeyTime="0" Value="&lt;" />
125
- </ObjectAnimationUsingKeyFrames>
126
- </Storyboard>
127
- </BeginStoryboard>
128
- </EventTrigger>
129
- <EventTrigger RoutedEvent="ToggleButton.Unchecked">
130
- <BeginStoryboard Storyboard="{StaticResource Appearance}" />
131
- <BeginStoryboard>
132
- <Storyboard>
133
- <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
134
- <DiscreteObjectKeyFrame KeyTime="0" Value="&gt;" />
135
- </ObjectAnimationUsingKeyFrames>
136
- </Storyboard>
137
- </BeginStoryboard>
138
- </EventTrigger>
139
- </ToggleButton.Triggers>
140
- </ToggleButton>
141
- </Grid>
142
- </Window>
1
+ > gridが拡大したときにほかのコントロールのかぶってしまいます。
2
+
3
+ ハンバーガーメニューにもオーバーレイするものと、押し出すもの両方ありますよね。
4
+ かぶらないようにするなら`Grid`で区切って、メニュー部分とコンテンツ部分を別々に入れればいいんじゃないですかね。
5
+
6
+ > ボタン二つで制御しているので、1つにまとめることができないか知りたいです。
7
+
8
+ オンオフを表すようなものには、`ToggleButton`があります。
9
+
10
+ > ほか方法がありましたら
11
+
12
+ ハンバーガーメニューはNuGetやGitHub・ブログ記事等いくつかあると思うので、研究してみるといいかもしれませんね。
13
+
14
+ 個人的には`NavigationView`が、WinUIで自然に使えたら言うことないのですが。
15
+
16
+ ```xml
17
+ <Window
18
+ x:Class="Questions290156.MainWindow"
19
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
20
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
21
+ Width="800"
22
+ Height="450">
23
+ <Window.Resources>
24
+ <Storyboard x:Key="Appearance">
25
+ <DoubleAnimation
26
+ Storyboard.TargetName="config"
27
+ Storyboard.TargetProperty="Width"
28
+ To="300"
29
+ Duration="00:00:00.1" />
30
+ </Storyboard>
31
+ <Storyboard x:Key="Disappear">
32
+ <DoubleAnimation
33
+ Storyboard.TargetName="config"
34
+ Storyboard.TargetProperty="Width"
35
+ To="20"
36
+ Duration="00:00:00.1" />
37
+ </Storyboard>
38
+
39
+ <Style TargetType="HeaderedContentControl">
40
+ <Setter Property="Margin" Value="30,20" />
41
+ <Setter Property="Header" Value="Label" />
42
+ </Style>
43
+ </Window.Resources>
44
+ <Grid>
45
+ <Grid.ColumnDefinitions>
46
+ <ColumnDefinition />
47
+ <ColumnDefinition Width="Auto" />
48
+ </Grid.ColumnDefinitions>
49
+ <Button
50
+ x:Name="Btn001"
51
+ Width="67"
52
+ Height="40"
53
+ Margin="0,177,242,0"
54
+ HorizontalAlignment="Right"
55
+ VerticalAlignment="Top"
56
+ Content="設定">
57
+ <Button.Triggers>
58
+ <EventTrigger RoutedEvent="Button.Click">
59
+ <BeginStoryboard Storyboard="{StaticResource Appearance}" />
60
+ </EventTrigger>
61
+ </Button.Triggers>
62
+ </Button>
63
+ <Button
64
+ x:Name="Btn001_Copy"
65
+ Width="67"
66
+ Height="40"
67
+ Margin="0,90,176,0"
68
+ HorizontalAlignment="Right"
69
+ VerticalAlignment="Top"
70
+ Content="設定">
71
+ <Button.Triggers>
72
+ <EventTrigger RoutedEvent="Button.Click">
73
+ <BeginStoryboard Storyboard="{StaticResource Disappear}" />
74
+ </EventTrigger>
75
+ </Button.Triggers>
76
+ </Button>
77
+
78
+ <Grid
79
+ x:Name="config"
80
+ Grid.Column="1"
81
+ Width="300"
82
+ Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
83
+ <Grid.RowDefinitions>
84
+ <RowDefinition Height="Auto" />
85
+ <RowDefinition Height="Auto" />
86
+ <RowDefinition Height="Auto" />
87
+ <RowDefinition />
88
+ </Grid.RowDefinitions>
89
+ <Grid.ColumnDefinitions>
90
+ <ColumnDefinition />
91
+ <ColumnDefinition />
92
+ </Grid.ColumnDefinitions>
93
+
94
+ <HeaderedContentControl>
95
+ <ComboBox />
96
+ </HeaderedContentControl>
97
+ <HeaderedContentControl Grid.Column="1">
98
+ <ComboBox />
99
+ </HeaderedContentControl>
100
+ <HeaderedContentControl Grid.Row="1">
101
+ <ComboBox />
102
+ </HeaderedContentControl>
103
+ <HeaderedContentControl Grid.Row="1" Grid.Column="1">
104
+ <ComboBox />
105
+ </HeaderedContentControl>
106
+ <HeaderedContentControl Grid.Row="2">
107
+ <ComboBox />
108
+ </HeaderedContentControl>
109
+ <HeaderedContentControl Grid.Row="2" Grid.Column="1">
110
+ <ComboBox />
111
+ </HeaderedContentControl>
112
+ </Grid>
113
+
114
+ <ToggleButton
115
+ HorizontalAlignment="Left"
116
+ VerticalAlignment="Top"
117
+ Content="&gt;" Grid.Column="1">
118
+ <ToggleButton.Triggers>
119
+ <EventTrigger RoutedEvent="ToggleButton.Checked">
120
+ <BeginStoryboard Storyboard="{StaticResource Disappear}" />
121
+ <BeginStoryboard>
122
+ <Storyboard>
123
+ <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
124
+ <DiscreteObjectKeyFrame KeyTime="0" Value="&lt;" />
125
+ </ObjectAnimationUsingKeyFrames>
126
+ </Storyboard>
127
+ </BeginStoryboard>
128
+ </EventTrigger>
129
+ <EventTrigger RoutedEvent="ToggleButton.Unchecked">
130
+ <BeginStoryboard Storyboard="{StaticResource Appearance}" />
131
+ <BeginStoryboard>
132
+ <Storyboard>
133
+ <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
134
+ <DiscreteObjectKeyFrame KeyTime="0" Value="&gt;" />
135
+ </ObjectAnimationUsingKeyFrames>
136
+ </Storyboard>
137
+ </BeginStoryboard>
138
+ </EventTrigger>
139
+ </ToggleButton.Triggers>
140
+ </ToggleButton>
141
+ </Grid>
142
+ </Window>
143
143
  ```