Skip to content

Fix for 2923: Ignore vertical scroll inside TabControl header. #2924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Keboo merged 6 commits into from
Nov 3, 2022
Merged

Fix for 2923: Ignore vertical scroll inside TabControl header. #2924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9486dea
Remove not needed ScrollViewer from Expander.xaml demo page
nicolaihenriksen Oct 28, 2022
313517f
Add ScrollViewerAssist option to "ignore vertical scroll"
nicolaihenriksen Oct 28, 2022
7775d33
Add scrollable tab content sample to demo app
nicolaihenriksen Oct 28, 2022
c6aecd8
Moved DP registration down to the associated event handler
nicolaihenriksen Oct 31, 2022
b961a16
Renamed attached property
nicolaihenriksen Oct 31, 2022
9f3d57b
Renamed attached DP to BubbleVerticalScroll
nicolaihenriksen Nov 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions MainDemo.Wpf/Domain/TabsViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,17 @@ internal class TabsViewModel : ViewModelBase

public CustomTab? SelectedTab { get; set; }

public string? VeryLongText { get; set; } = @"
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.

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.

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.

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.

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.";

public TabsViewModel() =>
CustomTabs = new()
{
Expand Down
306 changes: 152 additions & 154 deletions MainDemo.Wpf/Expander.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,20 +38,67 @@
</Style>
</UserControl.Resources>

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="800" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<smtx:XamlDisplay UniqueKey="explander_1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="800" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<smtx:XamlDisplay UniqueKey="explander_1">
<StackPanel>
<Expander HorizontalAlignment="Stretch" Header="Expander Example 1a">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
</StackPanel>
</Expander>

<Expander HorizontalAlignment="Stretch"
ExpandDirection="Up"
Header="Expander Example 1b">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
</StackPanel>
</Expander>

<Expander HorizontalAlignment="Stretch" Header="Expander Example 1c">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
</StackPanel>
</Expander>

<Expander HorizontalAlignment="Stretch"
materialDesign:ExpanderAssist.HorizontalHeaderPadding="35,2,24,2"
Header="Custom Header Padding">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
</StackPanel>
</Expander>
</StackPanel>
</smtx:XamlDisplay>

<smtx:XamlDisplay Grid.Row="1"
Grid.Column="0"
Margin="4,24,0,0"
UniqueKey="expander_2">
<materialDesign:Card>
<StackPanel>
<Expander HorizontalAlignment="Stretch" Header="Expander Example 1a">
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2a">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
Expand All @@ -60,18 +107,9 @@
</StackPanel>
</Expander>

<Expander HorizontalAlignment="Stretch"
ExpandDirection="Up"
Header="Expander Example 1b">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
</StackPanel>
</Expander>
<Border Style="{StaticResource HorizontalDividerBorder}" />

<Expander HorizontalAlignment="Stretch" Header="Expander Example 1c">
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2b">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
Expand All @@ -80,9 +118,9 @@
</StackPanel>
</Expander>

<Expander HorizontalAlignment="Stretch"
materialDesign:ExpanderAssist.HorizontalHeaderPadding="35,2,24,2"
Header="Custom Header Padding">
<Border Style="{StaticResource HorizontalDividerBorder}" />

<Expander HorizontalAlignment="Stretch" Header="Expander Example 2c">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
Expand All @@ -91,133 +129,93 @@
</StackPanel>
</Expander>
</StackPanel>
</smtx:XamlDisplay>

<smtx:XamlDisplay Grid.Row="1"
Grid.Column="0"
Margin="4,24,0,0"
UniqueKey="expander_2">
<materialDesign:Card>
<StackPanel>
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2a">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
</StackPanel>
</Expander>

<Border Style="{StaticResource HorizontalDividerBorder}" />

<Expander HorizontalAlignment="Stretch" Header="Expander Example 2b">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
</StackPanel>
</Expander>

<Border Style="{StaticResource HorizontalDividerBorder}" />

<Expander HorizontalAlignment="Stretch" Header="Expander Example 2c">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource HorizontalExpanderContentTextBlock}" />
</StackPanel>
</Expander>
</materialDesign:Card>
</smtx:XamlDisplay>


<smtx:XamlDisplay Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Margin="8"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
UniqueKey="expander_3">
<StackPanel Orientation="Horizontal">
<Expander ExpandDirection="Left">
<Expander.Header>
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3a">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>

<StackPanel Margin="8,24,16,24"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
</StackPanel>
</materialDesign:Card>
</smtx:XamlDisplay>


<smtx:XamlDisplay Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Margin="8"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
UniqueKey="expander_3">
<StackPanel Orientation="Horizontal">
<Expander ExpandDirection="Left">
<Expander.Header>
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3a">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>

<StackPanel Margin="8,24,16,24"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
</StackPanel>
</Expander>

<Border Style="{StaticResource VerticalDividerBorder}" />

<Expander ExpandDirection="Right">
<Expander.Header>
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3b">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>

<StackPanel Margin="8,24,16,24"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
</StackPanel>
</Expander>

<Border Style="{StaticResource VerticalDividerBorder}" />

<Expander ExpandDirection="Right">
<Expander.Header>
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3c">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>

<StackPanel Margin="8,24,16,24"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
</StackPanel>
</Expander>

<Border Style="{StaticResource VerticalDividerBorder}" />

<Expander materialDesign:ExpanderAssist.VerticalHeaderPadding="0,35,0,5" ExpandDirection="Right">
<Expander.Header>
<TextBlock RenderTransformOrigin=".5,.5" Text="Custom Header Padding">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>

<StackPanel Margin="8,24,16,24"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
</StackPanel>
</Expander>
</StackPanel>
</smtx:XamlDisplay>
</Grid>
</ScrollViewer>
</Expander>

<Border Style="{StaticResource VerticalDividerBorder}" />

<Expander ExpandDirection="Right">
<Expander.Header>
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3b">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>

<StackPanel Margin="8,24,16,24"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
</StackPanel>
</Expander>

<Border Style="{StaticResource VerticalDividerBorder}" />

<Expander ExpandDirection="Right">
<Expander.Header>
<TextBlock RenderTransformOrigin=".5,.5" Text="Expander Example 3c">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>

<StackPanel Margin="8,24,16,24"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
</StackPanel>
</Expander>

<Border Style="{StaticResource VerticalDividerBorder}" />

<Expander materialDesign:ExpanderAssist.VerticalHeaderPadding="0,35,0,5" ExpandDirection="Right">
<Expander.Header>
<TextBlock RenderTransformOrigin=".5,.5" Text="Custom Header Padding">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>

<StackPanel Margin="8,24,16,24"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
<TextBlock Text="Your Content" />
<TextBlock Style="{StaticResource VerticalExpanderContentTextBlock}" />
</StackPanel>
</Expander>
</StackPanel>
</smtx:XamlDisplay>
</Grid>
</UserControl>

22 changes: 22 additions & 0 deletions MainDemo.Wpf/Tabs.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,28 @@

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

<TextBlock Margin="0,15,0,20"
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
Text="Scrollable content" />

<smtx:XamlDisplay Margin="0,0,16,16" UniqueKey="tabs_scrollable_content" HorizontalAlignment="Left">
<TabControl Width="500"
Height="200">
<TabItem Header="TAB 1">
<ScrollViewer>
<TextBlock Text="{Binding VeryLongText}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TextWrapping="Wrap" />
</ScrollViewer>
</TabItem>
<TabItem Header="TAB 2">
<ScrollViewer>
<TextBox Text="{Binding VeryLongText}" Style="{StaticResource MaterialDesignOutlinedTextBox}" AcceptsReturn="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TextWrapping="Wrap" Margin="5" />
</ScrollViewer>
</TabItem>
</TabControl>
</smtx:XamlDisplay>

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

<TextBlock Margin="0,15,0,20"
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
Text="Placement" />
Expand Down
Loading