tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Port ScrollViewer to ControlTheme. 

Including splitting out the menu scroller into a separate xaml file for separate preview.
pull/8479/head
Steven Kirk 4 years ago
parent
d2e4d58f17
commit
d902c3eb0c
4 changed files with 204 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
  2. 28
      src/Avalonia.Themes.Fluent/Controls/MenuItem.xaml
  3. 98
      src/Avalonia.Themes.Fluent/Controls/MenuScrollViewer.xaml
  4. 164
      src/Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml

1
src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
View File

@ -25,6 +25,7 @@
<ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Label.xaml" /> <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Label.xaml" />
<ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ListBox.xaml" /> <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ListBox.xaml" />
<ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ListBoxItem.xaml" /> <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ListBoxItem.xaml" />
<ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuScrollViewer.xaml" />
<ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Menu.xaml" /> <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Menu.xaml" />
<ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuItem.xaml" /> <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuItem.xaml" />
<ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuFlyoutPresenter.xaml" /> <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuFlyoutPresenter.xaml" />

28
src/Avalonia.Themes.Fluent/Controls/MenuItem.xaml
View File

@ -5,8 +5,8 @@
x:DataType="MenuItem" x:DataType="MenuItem"
x:CompileBindings="True"> x:CompileBindings="True">
<Design.PreviewWith> <Design.PreviewWith>
<Border Padding="20"> <Border Padding="20" Width="320">
<StackPanel Spacing="20"> <StackPanel Spacing="20" HorizontalAlignment="Left">
<MenuItem Header="_Standard"/> <MenuItem Header="_Standard"/>
<MenuItem IsSelected="True" Header="Selected"/> <MenuItem IsSelected="True" Header="Selected"/>
<MenuItem Header="With Icon"> <MenuItem Header="With Icon">
@ -22,8 +22,26 @@
<MenuItem Header="Input Gesture" InputGesture="Ctrl+G"/> <MenuItem Header="Input Gesture" InputGesture="Ctrl+G"/>
<MenuItem Header="Disabled" IsEnabled="False"/> <MenuItem Header="Disabled" IsEnabled="False"/>
<MenuItem Header="-"/> <MenuItem Header="-"/>
<MenuItem Header="Parent"> <MenuItem Header="Parent" IsSubMenuOpen="True">
<MenuItem Header="Child"/> <MenuItem Header="Child 1"/>
<MenuItem Header="Child 2"/>
<MenuItem Header="Child 3"/>
<MenuItem Header="Child 4"/>
<MenuItem Header="Child 5"/>
<MenuItem Header="Child 6"/>
<MenuItem Header="Child 7"/>
<MenuItem Header="Child 8"/>
<MenuItem Header="Child 9"/>
<MenuItem Header="Child 10"/>
<MenuItem Header="Child 11"/>
<MenuItem Header="Child 12"/>
<MenuItem Header="Child 13"/>
<MenuItem Header="Child 14"/>
<MenuItem Header="Child 15"/>
<MenuItem Header="Child 16"/>
<MenuItem Header="Child 17"/>
<MenuItem Header="Child 18"/>
<MenuItem Header="Child 19"/>
</MenuItem> </MenuItem>
<MenuItem Header="Disabled Parent" IsEnabled="False"> <MenuItem Header="Disabled Parent" IsEnabled="False">
<MenuItem Header="Child"/> <MenuItem Header="Child"/>
@ -113,7 +131,7 @@
MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}" MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
CornerRadius="{DynamicResource OverlayCornerRadius}"> CornerRadius="{DynamicResource OverlayCornerRadius}">
<ScrollViewer Classes="menuscroller"> <ScrollViewer Theme="{StaticResource FluentMenuScrollViewer}">
<ItemsPresenter Name="PART_ItemsPresenter" <ItemsPresenter Name="PART_ItemsPresenter"
Items="{TemplateBinding Items}" Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}" ItemsPanel="{TemplateBinding ItemsPanel}"

98
src/Avalonia.Themes.Fluent/Controls/MenuScrollViewer.xaml
View File

@ -0,0 +1,98 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
<Design.PreviewWith>
<ScrollViewer Theme="{DynamicResource FluentMenuScrollViewer}" Width="200" Height="200">
<StackPanel Spacing="20">
<TextBlock>Item 1</TextBlock>
<TextBlock>Item 2</TextBlock>
<TextBlock>Item 3</TextBlock>
<TextBlock>Item 4</TextBlock>
<TextBlock>Item 5</TextBlock>
<TextBlock>Item 6</TextBlock>
<TextBlock>Item 7</TextBlock>
<TextBlock>Item 8</TextBlock>
<TextBlock>Item 9</TextBlock>
</StackPanel>
</ScrollViewer>
</Design.PreviewWith>
<ControlTheme x:Key="FluentMenuScrollViewer" TargetType="ScrollViewer">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<ControlTemplate>
<DockPanel>
<RepeatButton DockPanel.Dock="Top"
BorderThickness="0"
Background="Transparent"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center"
RenderTransform="{x:Null}"
Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}">
<RepeatButton.IsVisible>
<MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
ConverterParameter="0">
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height" />
</MultiBinding>
</RepeatButton.IsVisible>
<Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
<Path VerticalAlignment="Center"
HorizontalAlignment="Center"
Data="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z"
Fill="{DynamicResource ScrollBarButtonArrowForeground}"
Width="20"
Height="20" />
</Viewbox>
</RepeatButton>
<RepeatButton DockPanel.Dock="Bottom"
BorderThickness="0"
Background="Transparent"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center"
RenderTransform="{x:Null}"
Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}">
<RepeatButton.IsVisible>
<MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
ConverterParameter="100">
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height" />
</MultiBinding>
</RepeatButton.IsVisible>
<Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
<Path VerticalAlignment="Center"
HorizontalAlignment="Center"
Data="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z"
Fill="{DynamicResource ScrollBarButtonArrowForeground}"
Width="20"
Height="20" />
</Viewbox>
</RepeatButton>
<ScrollContentPresenter Name="PART_ContentPresenter"
CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
Content="{TemplateBinding Content}"
Extent="{TemplateBinding Extent, Mode=TwoWay}"
Margin="{TemplateBinding Padding}"
Offset="{TemplateBinding Offset, Mode=TwoWay}"
Viewport="{TemplateBinding Viewport, Mode=TwoWay}">
<ScrollContentPresenter.GestureRecognizers>
<ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
</ScrollContentPresenter.GestureRecognizers>
</ScrollContentPresenter>
</DockPanel>
</ControlTemplate>
</Setter>
<Style Selector="^ /template/ RepeatButton:pointerover > Viewbox > Path">
<Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
</Style>
</ControlTheme>
</ResourceDictionary>

164
src/Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml
View File

@ -1,87 +1,87 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"> xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
<Design.PreviewWith> <Design.PreviewWith>
<Grid ColumnDefinitions="*,20,*" Height="300" Width="200" Margin="20"> <ScrollViewer Width="200" Height="200"
<ScrollViewer> HorizontalScrollBarVisibility="Auto">
<Border Height="1000" Background="#ccc" /> <StackPanel Spacing="20" Width="210">
</ScrollViewer> <TextBlock>Item 1</TextBlock>
<ScrollViewer Grid.Column="2" Classes="menuscroller"> <TextBlock>Item 2</TextBlock>
<Border Height="1000" Background="#ccc" /> <TextBlock>Item 3</TextBlock>
</ScrollViewer> <TextBlock>Item 4</TextBlock>
</Grid> <TextBlock>Item 5</TextBlock>
</Design.PreviewWith> <TextBlock>Item 6</TextBlock>
<TextBlock>Item 7</TextBlock>
<ControlTheme x:Key="{x:Type ScrollViewer}" TargetType="ScrollViewer"> <TextBlock>Item 8</TextBlock>
<Setter Property="Background" Value="Transparent" /> <TextBlock>Item 9</TextBlock>
<Setter Property="Template"> </StackPanel>
<ControlTemplate> </ScrollViewer>
<Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto"> </Design.PreviewWith>
<ScrollContentPresenter Name="PART_ContentPresenter" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" Content="{TemplateBinding Content}" Extent="{TemplateBinding Extent, Mode=TwoWay}" Padding="{TemplateBinding Padding}" Offset="{TemplateBinding Offset, Mode=TwoWay}" Viewport="{TemplateBinding Viewport, Mode=TwoWay}" IsScrollChainingEnabled="{TemplateBinding IsScrollChainingEnabled}">
<ScrollContentPresenter.GestureRecognizers> <ControlTheme x:Key="{x:Type ScrollViewer}" TargetType="ScrollViewer">
<ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" /> <Setter Property="Background" Value="Transparent" />
</ScrollContentPresenter.GestureRecognizers> <Setter Property="Template">
</ScrollContentPresenter> <ControlTemplate>
<ScrollBar Name="PART_HorizontalScrollBar" AllowAutoHide="{TemplateBinding AllowAutoHide}" Orientation="Horizontal" LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}" SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}" Maximum="{TemplateBinding HorizontalScrollBarMaximum}" Value="{TemplateBinding HorizontalScrollBarValue, Mode=TwoWay}" ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}" Visibility="{TemplateBinding HorizontalScrollBarVisibility}" Grid.Row="1" Focusable="False" /> <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
<ScrollBar Name="PART_VerticalScrollBar" AllowAutoHide="{TemplateBinding AllowAutoHide}" Orientation="Vertical" LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}" SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}" Maximum="{TemplateBinding VerticalScrollBarMaximum}" Value="{TemplateBinding VerticalScrollBarValue, Mode=TwoWay}" ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}" Visibility="{TemplateBinding VerticalScrollBarVisibility}" Grid.Column="1" Focusable="False" /> <ScrollContentPresenter Name="PART_ContentPresenter"
<Panel x:Name="PART_ScrollBarsSeparator" Grid.Row="1" Grid.Column="1" Background="{DynamicResource ScrollViewerScrollBarsSeparatorBackground}" /> Grid.Row="0"
</Grid> Grid.Column="0"
</ControlTemplate> Grid.RowSpan="2"
Grid.ColumnSpan="2"
Background="{TemplateBinding Background}"
CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
Content="{TemplateBinding Content}"
Extent="{TemplateBinding Extent, Mode=TwoWay}"
Padding="{TemplateBinding Padding}"
Offset="{TemplateBinding Offset, Mode=TwoWay}"
Viewport="{TemplateBinding Viewport, Mode=TwoWay}"
IsScrollChainingEnabled="{TemplateBinding IsScrollChainingEnabled}">
<ScrollContentPresenter.GestureRecognizers>
<ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
</ScrollContentPresenter.GestureRecognizers>
</ScrollContentPresenter>
<ScrollBar Name="PART_HorizontalScrollBar"
AllowAutoHide="{TemplateBinding AllowAutoHide}"
Orientation="Horizontal"
LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
Maximum="{TemplateBinding HorizontalScrollBarMaximum}"
Value="{TemplateBinding HorizontalScrollBarValue, Mode=TwoWay}"
ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}"
Visibility="{TemplateBinding HorizontalScrollBarVisibility}"
Grid.Row="1"
Focusable="False" />
<ScrollBar Name="PART_VerticalScrollBar"
AllowAutoHide="{TemplateBinding AllowAutoHide}"
Orientation="Vertical"
LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
Maximum="{TemplateBinding VerticalScrollBarMaximum}"
Value="{TemplateBinding VerticalScrollBarValue, Mode=TwoWay}"
ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}"
Visibility="{TemplateBinding VerticalScrollBarVisibility}"
Grid.Column="1"
Focusable="False" />
<Panel x:Name="PART_ScrollBarsSeparator"
Grid.Row="1"
Grid.Column="1"
Background="{DynamicResource ScrollViewerScrollBarsSeparatorBackground}" />
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^ /template/ Panel#PART_ScrollBarsSeparator">
<Setter Property="Opacity" Value="0" />
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Opacity" Duration="0:0:0.1" />
</Transitions>
</Setter> </Setter>
<Style Selector="^ /template/ Panel#PART_ScrollBarsSeparator"> </Style>
<Setter Property="Opacity" Value="0" /> <Style Selector="^[IsExpanded=true] /template/ Panel#PART_ScrollBarsSeparator">
<Setter Property="Transitions"> <Setter Property="Opacity" Value="1" />
<Transitions> </Style>
<DoubleTransition Property="Opacity" Duration="0:0:0.1" /> </ControlTheme>
</Transitions>
</Setter>
</Style>
<Style Selector="^[IsExpanded=true] /template/ Panel#PART_ScrollBarsSeparator">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^.menuscroller">
<Setter Property="Template">
<ControlTemplate>
<DockPanel>
<RepeatButton DockPanel.Dock="Top" BorderThickness="0" Background="Transparent" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" RenderTransform="{x:Null}" Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}">
<RepeatButton.IsVisible>
<MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="0">
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height" />
</MultiBinding>
</RepeatButton.IsVisible>
<Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
<Path VerticalAlignment="Center" HorizontalAlignment="Center" Data="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z" Width="20" Height="20" />
</Viewbox>
</RepeatButton>
<RepeatButton DockPanel.Dock="Bottom" BorderThickness="0" Background="Transparent" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" RenderTransform="{x:Null}" Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}">
<RepeatButton.IsVisible>
<MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="100">
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height" />
</MultiBinding>
</RepeatButton.IsVisible>
<Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
<Path VerticalAlignment="Center" HorizontalAlignment="Center" Data="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z" Width="20" Height="20" />
</Viewbox>
</RepeatButton>
<ScrollContentPresenter Name="PART_ContentPresenter" CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" Content="{TemplateBinding Content}" Extent="{TemplateBinding Extent, Mode=TwoWay}" Margin="{TemplateBinding Padding}" Offset="{TemplateBinding Offset, Mode=TwoWay}" Viewport="{TemplateBinding Viewport, Mode=TwoWay}" />
</DockPanel>
</ControlTemplate>
</Setter>
<Style Selector="^ /template/ RepeatButton">
<Style Selector="^ > Viewbox > Path">
<Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForeground}" />
</Style>
<Style Selector="^:pointerover > Viewbox > Path">
<Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
</Style>
</Style>
</Style>
</ControlTheme>
</ResourceDictionary> </ResourceDictionary>

Write Preview
Loading…
Cancel
Save