Skip to content

Commit 430c6f3

Browse files
azchohfiazchohfi
authored
Merge pull request #1636 from Microsoft/nmetulev/expander
Expander: remove DisplayMode and replace animations with composition animations
2 parents 19b9f5f + 2c4a858 commit 430c6f3

File tree

8 files changed

+114
-391
lines changed

8 files changed

+114
-391
lines changed

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Expander/ExpanderPage.xaml‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,8 @@
1616
Foreground="White"
1717
Background="{Binding Path=BackgroundExpander1.Value, Mode=TwoWay}"
1818
IsExpanded="{Binding Path=IsExpanded1.Value, Mode=TwoWay}"
19-
ExpandDirection="{Binding Path=ExpandDirection1.Value, Mode=TwoWay}"
20-
DisplayMode="{Binding Path=DisplayMode1.Value, Mode=TwoWay}">
21-
<Grid Height="250">
19+
ExpandDirection="{Binding Path=ExpandDirection1.Value, Mode=TwoWay}">
20+
<Grid>
2221
<TextBlock HorizontalAlignment="Center"
2322
TextWrapping="Wrap"
2423
Text="This is the content"
@@ -27,7 +26,7 @@
2726
</Grid>
2827

2928
<controls:Expander.ContentOverlay>
30-
<Grid Background="Red">
29+
<Grid Background="Red" MinHeight="250">
3130
<TextBlock Text="Hello world!"
3231
HorizontalAlignment="Center"
3332
VerticalAlignment="Center" />
@@ -41,8 +40,7 @@
4140
Foreground="White"
4241
Background="{Binding Path=BackgroundExpander2.Value, Mode=TwoWay}"
4342
IsExpanded="{Binding Path=IsExpanded2.Value, Mode=TwoWay}"
44-
ExpandDirection="{Binding Path=ExpandDirection2.Value, Mode=TwoWay}"
45-
DisplayMode="{Binding Path=DisplayMode2.Value, Mode=TwoWay}">
43+
ExpandDirection="{Binding Path=ExpandDirection2.Value, Mode=TwoWay}">
4644
<Grid Height="250">
4745
<TextBlock HorizontalAlignment="Center"
4846
TextWrapping="Wrap"

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Expander/ExpanderXaml.bind‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,18 @@
1515
Foreground="White"
1616
Background="@[BackgroundExpander1:Brush:Gray]"
1717
IsExpanded="@[IsExpanded1:Bool:False]@"
18-
ExpandDirection="@[ExpandDirection1:Enum:ExpandDirection.Down]"
19-
DisplayMode="@[DisplayMode1:Enum:ExpanderDisplayMode.Overlay]">
20-
<Grid Height="250">
18+
ExpandDirection="@[ExpandDirection1:Enum:ExpandDirection.Down]">
19+
<Grid>
2120
<TextBlock HorizontalAlignment="Center"
2221
TextWrapping="Wrap"
23-
Text="This is the content"
22+
Text="This is the expanded content"
2423
VerticalAlignment="Center"
2524
Style="{StaticResource HeaderTextBlockStyle}" />
2625
</Grid>
2726

2827
<controls:Expander.ContentOverlay>
29-
<Grid Background="Red">
30-
<TextBlock Text="Hello world!"
28+
<Grid Background="Red" MinHeight="250">
29+
<TextBlock Text="This is the content overlay"
3130
HorizontalAlignment="Center"
3231
VerticalAlignment="Center" />
3332
</Grid>
@@ -40,12 +39,11 @@
4039
Foreground="White"
4140
Background="@[BackgroundExpander2:Brush:Black]"
4241
IsExpanded="@[IsExpanded2:Bool:True]@"
43-
ExpandDirection="@[ExpandDirection2:Enum:ExpandDirection.Right]"
44-
DisplayMode="@[DisplayMode2:Enum:ExpanderDisplayMode.Expand]">
42+
ExpandDirection="@[ExpandDirection2:Enum:ExpandDirection.Right]">
4543
<Grid Height="250">
4644
<TextBlock HorizontalAlignment="Center"
4745
TextWrapping="Wrap"
48-
Text="This is the content"
46+
Text="This is the expanded content without a content overlay"
4947
VerticalAlignment="Center"
5048
Style="{StaticResource HeaderTextBlockStyle}" />
5149
</Grid>

‎Microsoft.Toolkit.Uwp.UI.Controls/Expander/Expander.Constants.cs‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
1818
public partial class Expander
1919
{
2020
/// <summary>
21-
/// Key of the VisualStateGroup that trigger display mode (visible/collapsed/overlay) and direction content
21+
/// Key of the VisualStateGroup that trigger display mode (visible/collapsed) and direction content
2222
/// </summary>
2323
private const string DisplayModeAndDirectionStatesGroupStateContent = "DisplayModeAndDirectionStates";
2424

@@ -61,27 +61,7 @@ public partial class Expander
6161
/// Key of the VisualState when expander is collapsed and expander direction is set to Up
6262
/// </summary>
6363
private const string StateContentCollapsedUp = "CollapsedUp";
64-
65-
/// <summary>
66-
/// Key of the VisualState when expander is overlay and expander direction is set to Left
67-
/// </summary>
68-
private const string StateContentOverlayLeft = "OverlayLeft";
69-
70-
/// <summary>
71-
/// Key of the VisualState when expander is overlay and expander direction is set to Down
72-
/// </summary>
73-
private const string StateContentOverlayDown = "OverlayDown";
74-
75-
/// <summary>
76-
/// Key of the VisualState when expander is overlay and expander direction is set to Right
77-
/// </summary>
78-
private const string StateContentOverlayRight = "OverlayRight";
79-
80-
/// <summary>
81-
/// Key of the VisualState when expander is overlay and expander direction is set to Up
82-
/// </summary>
83-
private const string StateContentOverlayUp = "OverlayUp";
84-
64+
8565
/// <summary>
8666
/// Key of the UI Element that toggle IsExpanded property
8767
/// </summary>

‎Microsoft.Toolkit.Uwp.UI.Controls/Expander/Expander.Properties.cs‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,6 @@ public partial class Expander
4343
public static readonly DependencyProperty ExpandDirectionProperty =
4444
DependencyProperty.Register(nameof(ExpandDirection), typeof(ExpandDirection), typeof(Expander), new PropertyMetadata(ExpandDirection.Down, OnExpandDirectionChanged));
4545

46-
/// <summary>
47-
/// Identifies the <see cref="DisplayMode"/> dependency property.
48-
/// </summary>
49-
public static readonly DependencyProperty DisplayModeProperty =
50-
DependencyProperty.Register(nameof(DisplayMode), typeof(ExpanderDisplayMode), typeof(Expander), new PropertyMetadata(ExpanderDisplayMode.Expand, OnDisplayModeChanged));
51-
5246
/// <summary>
5347
/// Identifies the <see cref="ContentOverlay"/> dependency property.
5448
/// </summary>
@@ -91,15 +85,6 @@ public ExpandDirection ExpandDirection
9185
set { SetValue(ExpandDirectionProperty, value); }
9286
}
9387

94-
/// <summary>
95-
/// Gets or sets a value indicating whether the Expander control should be in Expand or Overlay mode.
96-
/// </summary>
97-
public ExpanderDisplayMode DisplayMode
98-
{
99-
get { return (ExpanderDisplayMode)GetValue(DisplayModeProperty); }
100-
set { SetValue(DisplayModeProperty, value); }
101-
}
102-
10388
/// <summary>
10489
/// Gets or sets a value indicating whether the ContentOverlay of the control.
10590
/// </summary>
@@ -135,17 +120,5 @@ private static void OnExpandDirectionChanged(DependencyObject d, DependencyPrope
135120
expander.OnExpandDirectionChanged();
136121
}
137122
}
138-
139-
private static void OnDisplayModeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
140-
{
141-
var expander = d as Expander;
142-
var previousDisplayMode = (ExpanderDisplayMode)e.OldValue;
143-
var newDisplayMode = (ExpanderDisplayMode)e.NewValue;
144-
145-
if (previousDisplayMode != newDisplayMode)
146-
{
147-
expander.OnDisplayModeOrIsExpandedChanged();
148-
}
149-
}
150123
}
151124
}

‎Microsoft.Toolkit.Uwp.UI.Controls/Expander/Expander.cs‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,6 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
3535
[TemplateVisualState(Name = StateContentCollapsedDown, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
3636
[TemplateVisualState(Name = StateContentCollapsedRight, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
3737
[TemplateVisualState(Name = StateContentCollapsedUp, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
38-
[TemplateVisualState(Name = StateContentOverlayLeft, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
39-
[TemplateVisualState(Name = StateContentOverlayDown, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
40-
[TemplateVisualState(Name = StateContentOverlayRight, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
41-
[TemplateVisualState(Name = StateContentOverlayUp, GroupName = DisplayModeAndDirectionStatesGroupStateContent)]
4238
[TemplatePart(Name = RootGridPart, Type = typeof(Grid))]
4339
[TemplatePart(Name = ExpanderToggleButtonPart, Type = typeof(ToggleButton))]
4440
[TemplatePart(Name = LayoutTransformerPart, Type = typeof(LayoutTransformControl))]
@@ -170,16 +166,16 @@ private void UpdateDisplayModeOrExpanderDirection()
170166
switch (ExpandDirection)
171167
{
172168
case ExpandDirection.Left:
173-
visualState = GetDisplayModeVisualState(StateContentOverlayLeft, StateContentCollapsedLeft, StateContentVisibleLeft);
169+
visualState = GetDisplayModeVisualState(StateContentCollapsedLeft, StateContentVisibleLeft);
174170
break;
175171
case ExpandDirection.Down:
176-
visualState = GetDisplayModeVisualState(StateContentOverlayDown, StateContentCollapsedDown, StateContentVisibleDown);
172+
visualState = GetDisplayModeVisualState(StateContentCollapsedDown, StateContentVisibleDown);
177173
break;
178174
case ExpandDirection.Right:
179-
visualState = GetDisplayModeVisualState(StateContentOverlayRight, StateContentCollapsedRight, StateContentVisibleRight);
175+
visualState = GetDisplayModeVisualState(StateContentCollapsedRight, StateContentVisibleRight);
180176
break;
181177
case ExpandDirection.Up:
182-
visualState = GetDisplayModeVisualState(StateContentOverlayUp, StateContentCollapsedUp, StateContentVisibleUp);
178+
visualState = GetDisplayModeVisualState(StateContentCollapsedUp, StateContentVisibleUp);
183179
break;
184180
}
185181

@@ -189,22 +185,9 @@ private void UpdateDisplayModeOrExpanderDirection()
189185
}
190186
}
191187

192-
private string GetDisplayModeVisualState(string overlayState, string collapsedState, string visibleState)
188+
private string GetDisplayModeVisualState(string collapsedState, string visibleState)
193189
{
194-
if (!IsExpanded && DisplayMode == ExpanderDisplayMode.Overlay)
195-
{
196-
// Overlay
197-
return overlayState;
198-
}
199-
200-
if (!IsExpanded && DisplayMode == ExpanderDisplayMode.Expand)
201-
{
202-
// Collapsed
203-
return collapsedState;
204-
}
205-
206-
// Visible
207-
return visibleState;
190+
return IsExpanded ? visibleState : collapsedState;
208191
}
209192
}
210193
}

0 commit comments

Comments
 (0)