Skip to content

Commit 7151ebd

Browse files
nicolaihenriksennicolaihenriksen
authored
Fix for 2923: Ignore vertical scroll inside TabControl header. (#2924)
* Remove not needed ScrollViewer from Expander.xaml demo page There is already a MainScrollViewer in place which handles the scrolling, so there is no need for the additional ScrollViewer; in fact this is what was causing scrolling not to work correctly when hovering the expanders. * Add ScrollViewerAssist option to "ignore vertical scroll" Changed to file scoped namespace. Introduced attached property to effectively disable the vertical scroll on a ScrollViewer. * Add scrollable tab content sample to demo app * Moved DP registration down to the associated event handler * Renamed attached property * Renamed attached DP to BubbleVerticalScroll
1 parent 2e306d0 commit 7151ebd

File tree

5 files changed

+387
-272
lines changed

5 files changed

+387
-272
lines changed

‎MainDemo.Wpf/Domain/TabsViewModel.cs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,17 @@ internal class TabsViewModel : ViewModelBase
88

99
public CustomTab? SelectedTab { get; set; }
1010

11+
public string? VeryLongText { get; set; } = @"
12+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum eleifend tellus, quis accumsan neque facilisis ac. Pellentesque non dignissim nisl, id egestas mauris. Suspendisse dui nisi, vestibulum et tincidunt sed, porta id lorem. Quisque iaculis nulla eget feugiat tristique. Suspendisse risus justo, condimentum sed venenatis id, aliquam at lectus. Fusce ut commodo dui. Vivamus eget iaculis sapien. Suspendisse tincidunt, lectus sed pretium porttitor, tortor odio vehicula sem, sed euismod ante erat vitae velit. Quisque maximus ut sem non imperdiet. Ut non libero sit amet risus fringilla convallis vitae sed turpis.
13+
14+
Duis aliquet nibh magna, et ultrices tortor rhoncus id. Morbi sed gravida neque. Nulla ornare posuere nisi, et pulvinar nibh euismod a. Nam aliquam ullamcorper congue. Sed sagittis hendrerit leo vitae lacinia. Integer lobortis, orci quis mattis venenatis, felis quam condimentum lorem, sit amet lacinia orci mi eu felis. Suspendisse potenti. Cras viverra tellus odio, in facilisis urna ornare vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sem nunc, posuere at tortor ut, iaculis dictum nisl. Cras blandit in ligula nec imperdiet. Maecenas molestie velit in sapien feugiat, in euismod lectus varius. Mauris quis accumsan arcu.
15+
16+
Donec massa est, pretium id nibh sed, varius luctus metus. Vivamus finibus placerat est sit amet molestie. In tincidunt enim a rhoncus viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam accumsan, erat vel consectetur tincidunt, mi turpis pulvinar mauris, at ultricies purus massa at mi. Etiam non tristique erat, eu ultricies nisi. In imperdiet sollicitudin pulvinar. Aliquam non nibh nunc. Vestibulum hendrerit libero eu felis aliquam, et ornare leo pharetra. Cras semper rutrum lectus at venenatis. Ut facilisis rutrum felis, eget facilisis neque gravida quis. Vestibulum ornare mollis pharetra.
17+
18+
Sed placerat sapien non quam fringilla fermentum. Nullam ex leo, condimentum sit amet magna vitae, condimentum volutpat risus. Aenean scelerisque neque cursus consequat elementum. Proin id tortor nec risus lacinia porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam massa ligula, condimentum pellentesque lacus id, ornare accumsan lectus. Fusce viverra nunc sit amet maximus tincidunt. Sed dapibus nulla eget tempus euismod. Aliquam fringilla turpis ut fringilla efficitur. Cras posuere suscipit ligula eget posuere. In aliquet non ligula at consequat. Ut venenatis nunc quis est congue, consequat rutrum justo vehicula. Cras tortor ante, condimentum non venenatis non, venenatis efficitur ex.
19+
20+
Nulla a porta libero, quis hendrerit ex. In ut pharetra sem. Nunc gravida ante rhoncus commodo aliquet. Integer luctus blandit libero, sed faucibus ligula ornare ut. Mauris facilisis, urna eu fermentum mollis, mauris massa commodo odio, a venenatis nunc nunc sollicitudin nibh. Ut mattis ipsum nec lacus mattis fringilla. Proin vulputate id velit a finibus. Ut nunc ex, elementum porttitor finibus vel, pellentesque vel turpis. Cras fringilla eleifend libero, ac feugiat arcu vehicula ornare. Nullam pretium finibus blandit. Etiam at urna facilisis, posuere felis non, congue velit. Pellentesque tortor erat, mattis at augue eu, egestas interdum nunc. Aliquam tortor lorem, venenatis eget vestibulum vitae, maximus eget nunc. Vestibulum et leo venenatis, rutrum lacus eget, mattis quam.";
21+
1122
public TabsViewModel() =>
1223
CustomTabs = new()
1324
{

‎MainDemo.Wpf/Expander.xaml

Lines changed: 152 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,67 @@
3838
</Style>
3939
</UserControl.Resources>
4040

41-
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
42-
<Grid>
43-
<Grid.RowDefinitions>
44-
<RowDefinition Height="Auto" />
45-
<RowDefinition Height="Auto" />
46-
</Grid.RowDefinitions>
47-
48-
<Grid.ColumnDefinitions>
49-
<ColumnDefinition Width="800" />
50-
<ColumnDefinition Width="Auto" />
51-
</Grid.ColumnDefinitions>
52-
<smtx:XamlDisplay UniqueKey="explander_1">
41+
<Grid>
42+
<Grid.RowDefinitions>
43+
<RowDefinition Height="Auto" />
44+
<RowDefinition Height="Auto" />
45+
</Grid.RowDefinitions>
46+
47+
<Grid.ColumnDefinitions>
48+
<ColumnDefinition Width="800" />
49+
<ColumnDefinition Width="Auto" />
50+
</Grid.ColumnDefinitions>
51+
<smtx:XamlDisplay UniqueKey="explander_1">
52+
<StackPanel>
53+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 1a">
54+
<StackPanel Margin="24,8,24,16"
55+
Orientation="Vertical"
56+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
57+
<TextBlock Text="Your Content" />
58+
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
59+
</StackPanel>
60+
</Expander>
61+
62+
<Expander HorizontalAlignment="Stretch"
63+
ExpandDirection="Up"
64+
Header="Expander Example 1b">
65+
<StackPanel Margin="24,8,24,16"
66+
Orientation="Vertical"
67+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
68+
<TextBlock Text="Your Content" />
69+
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
70+
</StackPanel>
71+
</Expander>
72+
73+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 1c">
74+
<StackPanel Margin="24,8,24,16"
75+
Orientation="Vertical"
76+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
77+
<TextBlock Text="Your Content" />
78+
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
79+
</StackPanel>
80+
</Expander>
81+
82+
<Expander HorizontalAlignment="Stretch"
83+
materialDesign:ExpanderAssist.HorizontalHeaderPadding="35,2,24,2"
84+
Header="Custom Header Padding">
85+
<StackPanel Margin="24,8,24,16"
86+
Orientation="Vertical"
87+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
88+
<TextBlock Text="Your Content" />
89+
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
90+
</StackPanel>
91+
</Expander>
92+
</StackPanel>
93+
</smtx:XamlDisplay>
94+
95+
<smtx:XamlDisplay Grid.Row="1"
96+
Grid.Column="0"
97+
Margin="4,24,0,0"
98+
UniqueKey="expander_2">
99+
<materialDesign:Card>
53100
<StackPanel>
54-
<Expander HorizontalAlignment="Stretch" Header="Expander Example 1a">
101+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2a">
55102
<StackPanel Margin="24,8,24,16"
56103
Orientation="Vertical"
57104
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
@@ -60,18 +107,9 @@
60107
</StackPanel>
61108
</Expander>
62109

63-
<Expander HorizontalAlignment="Stretch"
64-
ExpandDirection="Up"
65-
Header="Expander Example 1b">
66-
<StackPanel Margin="24,8,24,16"
67-
Orientation="Vertical"
68-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
69-
<TextBlock Text="Your Content" />
70-
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
71-
</StackPanel>
72-
</Expander>
110+
<Border Style="{StaticResource HorizontalDividerBorder}" />
73111

74-
<Expander HorizontalAlignment="Stretch" Header="Expander Example 1c">
112+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2b">
75113
<StackPanel Margin="24,8,24,16"
76114
Orientation="Vertical"
77115
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
@@ -80,9 +118,9 @@
80118
</StackPanel>
81119
</Expander>
82120

83-
<Expander HorizontalAlignment="Stretch"
84-
materialDesign:ExpanderAssist.HorizontalHeaderPadding="35,2,24,2"
85-
Header="Custom Header Padding">
121+
<Border Style="{StaticResource HorizontalDividerBorder}" />
122+
123+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2c">
86124
<StackPanel Margin="24,8,24,16"
87125
Orientation="Vertical"
88126
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
@@ -91,133 +129,93 @@
91129
</StackPanel>
92130
</Expander>
93131
</StackPanel>
94-
</smtx:XamlDisplay>
95-
96-
<smtx:XamlDisplay Grid.Row="1"
97-
Grid.Column="0"
98-
Margin="4,24,0,0"
99-
UniqueKey="expander_2">
100-
<materialDesign:Card>
101-
<StackPanel>
102-
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2a">
103-
<StackPanel Margin="24,8,24,16"
104-
Orientation="Vertical"
105-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
106-
<TextBlock Text="Your Content" />
107-
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
108-
</StackPanel>
109-
</Expander>
110-
111-
<Border Style="{StaticResource HorizontalDividerBorder}" />
112-
113-
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2b">
114-
<StackPanel Margin="24,8,24,16"
115-
Orientation="Vertical"
116-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
117-
<TextBlock Text="Your Content" />
118-
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
119-
</StackPanel>
120-
</Expander>
121-
122-
<Border Style="{StaticResource HorizontalDividerBorder}" />
123-
124-
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2c">
125-
<StackPanel Margin="24,8,24,16"
126-
Orientation="Vertical"
127-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
128-
<TextBlock Text="Your Content" />
129-
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
130-
</StackPanel>
131-
</Expander>
132+
</materialDesign:Card>
133+
</smtx:XamlDisplay>
134+
135+
136+
<smtx:XamlDisplay Grid.Row="0"
137+
Grid.RowSpan="2"
138+
Grid.Column="1"
139+
Margin="8"
140+
HorizontalAlignment="Left"
141+
VerticalAlignment="Stretch"
142+
UniqueKey="expander_3">
143+
<StackPanel Orientation="Horizontal">
144+
<Expander ExpandDirection="Left">
145+
<Expander.Header>
146+
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3a">
147+
<TextBlock.LayoutTransform>
148+
<RotateTransform Angle="90" />
149+
</TextBlock.LayoutTransform>
150+
</TextBlock>
151+
</Expander.Header>
152+
153+
<StackPanel Margin="8,24,16,24"
154+
Orientation="Vertical"
155+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
156+
<TextBlock Text="Your Content" />
157+
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
132158
</StackPanel>
133-
</materialDesign:Card>
134-
</smtx:XamlDisplay>
135-
136-
137-
<smtx:XamlDisplay Grid.Row="0"
138-
Grid.RowSpan="2"
139-
Grid.Column="1"
140-
Margin="8"
141-
HorizontalAlignment="Left"
142-
VerticalAlignment="Stretch"
143-
UniqueKey="expander_3">
144-
<StackPanel Orientation="Horizontal">
145-
<Expander ExpandDirection="Left">
146-
<Expander.Header>
147-
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3a">
148-
<TextBlock.LayoutTransform>
149-
<RotateTransform Angle="90" />
150-
</TextBlock.LayoutTransform>
151-
</TextBlock>
152-
</Expander.Header>
153-
154-
<StackPanel Margin="8,24,16,24"
155-
Orientation="Vertical"
156-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
157-
<TextBlock Text="Your Content" />
158-
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
159-
</StackPanel>
160-
</Expander>
161-
162-
<Border Style="{StaticResource VerticalDividerBorder}" />
163-
164-
<Expander ExpandDirection="Right">
165-
<Expander.Header>
166-
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3b">
167-
<TextBlock.LayoutTransform>
168-
<RotateTransform Angle="90" />
169-
</TextBlock.LayoutTransform>
170-
</TextBlock>
171-
</Expander.Header>
172-
173-
<StackPanel Margin="8,24,16,24"
174-
Orientation="Vertical"
175-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
176-
<TextBlock Text="Your Content" />
177-
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
178-
</StackPanel>
179-
</Expander>
180-
181-
<Border Style="{StaticResource VerticalDividerBorder}" />
182-
183-
<Expander ExpandDirection="Right">
184-
<Expander.Header>
185-
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3c">
186-
<TextBlock.LayoutTransform>
187-
<RotateTransform Angle="90" />
188-
</TextBlock.LayoutTransform>
189-
</TextBlock>
190-
</Expander.Header>
191-
192-
<StackPanel Margin="8,24,16,24"
193-
Orientation="Vertical"
194-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
195-
<TextBlock Text="Your Content" />
196-
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
197-
</StackPanel>
198-
</Expander>
199-
200-
<Border Style="{StaticResource VerticalDividerBorder}" />
201-
202-
<Expander materialDesign:ExpanderAssist.VerticalHeaderPadding="0,35,0,5" ExpandDirection="Right">
203-
<Expander.Header>
204-
<TextBlock RenderTransformOrigin=".5,.5" Text="Custom Header Padding">
205-
<TextBlock.LayoutTransform>
206-
<RotateTransform Angle="90" />
207-
</TextBlock.LayoutTransform>
208-
</TextBlock>
209-
</Expander.Header>
210-
211-
<StackPanel Margin="8,24,16,24"
212-
Orientation="Vertical"
213-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
214-
<TextBlock Text="Your Content" />
215-
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
216-
</StackPanel>
217-
</Expander>
218-
</StackPanel>
219-
</smtx:XamlDisplay>
220-
</Grid>
221-
</ScrollViewer>
159+
</Expander>
160+
161+
<Border Style="{StaticResource VerticalDividerBorder}" />
162+
163+
<Expander ExpandDirection="Right">
164+
<Expander.Header>
165+
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3b">
166+
<TextBlock.LayoutTransform>
167+
<RotateTransform Angle="90" />
168+
</TextBlock.LayoutTransform>
169+
</TextBlock>
170+
</Expander.Header>
171+
172+
<StackPanel Margin="8,24,16,24"
173+
Orientation="Vertical"
174+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
175+
<TextBlock Text="Your Content" />
176+
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
177+
</StackPanel>
178+
</Expander>
179+
180+
<Border Style="{StaticResource VerticalDividerBorder}" />
181+
182+
<Expander ExpandDirection="Right">
183+
<Expander.Header>
184+
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3c">
185+
<TextBlock.LayoutTransform>
186+
<RotateTransform Angle="90" />
187+
</TextBlock.LayoutTransform>
188+
</TextBlock>
189+
</Expander.Header>
190+
191+
<StackPanel Margin="8,24,16,24"
192+
Orientation="Vertical"
193+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
194+
<TextBlock Text="Your Content" />
195+
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
196+
</StackPanel>
197+
</Expander>
198+
199+
<Border Style="{StaticResource VerticalDividerBorder}" />
200+
201+
<Expander materialDesign:ExpanderAssist.VerticalHeaderPadding="0,35,0,5" ExpandDirection="Right">
202+
<Expander.Header>
203+
<TextBlock RenderTransformOrigin=".5,.5" Text="Custom Header Padding">
204+
<TextBlock.LayoutTransform>
205+
<RotateTransform Angle="90" />
206+
</TextBlock.LayoutTransform>
207+
</TextBlock>
208+
</Expander.Header>
209+
210+
<StackPanel Margin="8,24,16,24"
211+
Orientation="Vertical"
212+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
213+
<TextBlock Text="Your Content" />
214+
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
215+
</StackPanel>
216+
</Expander>
217+
</StackPanel>
218+
</smtx:XamlDisplay>
219+
</Grid>
222220
</UserControl>
223221

‎MainDemo.Wpf/Tabs.xaml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,28 @@
312312

313313
<Separator Style="{DynamicResource MaterialDesignSeparator}" />
314314

315+
<TextBlock Margin="0,15,0,20"
316+
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
317+
Text="Scrollable content" />
318+
319+
<smtx:XamlDisplay Margin="0,0,16,16" UniqueKey="tabs_scrollable_content" HorizontalAlignment="Left">
320+
<TabControl Width="500"
321+
Height="200">
322+
<TabItem Header="TAB 1">
323+
<ScrollViewer>
324+
<TextBlock Text="{Binding VeryLongText}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TextWrapping="Wrap" />
325+
</ScrollViewer>
326+
</TabItem>
327+
<TabItem Header="TAB 2">
328+
<ScrollViewer>
329+
<TextBox Text="{Binding VeryLongText}" Style="{StaticResource MaterialDesignOutlinedTextBox}" AcceptsReturn="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TextWrapping="Wrap" Margin="5" />
330+
</ScrollViewer>
331+
</TabItem>
332+
</TabControl>
333+
</smtx:XamlDisplay>
334+
335+
<Separator Style="{DynamicResource MaterialDesignSeparator}" />
336+
315337
<TextBlock Margin="0,15,0,20"
316338
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
317339
Text="Placement" />

0 commit comments

Comments
 (0)