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

Add SplitViewPanePlacement settings for Top and Bottom. (#19465) 

* add SplitViewPanePlacement settings for Top and Bottom.

* remove duplicated styles.

* add missing transparent fills of lightdismiss area.

* add simple theme support for splitview pane placement top/bottom.
pull/19663/head
Dan Walmsley 1 year ago
committed by GitHub
parent
f4e653a8de
commit
7f47605256
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
7 changed files with 540 additions and 59 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. 9
      samples/ControlCatalog/Pages/SplitViewPage.xaml
  2. 18
      samples/ControlCatalog/ViewModels/SplitViewPageViewModel.cs
  3. 24
      src/Avalonia.Controls/SplitView/SplitView.cs
  4. 12
      src/Avalonia.Controls/SplitView/SplitViewPanePlacement.cs
  5. 23
      src/Avalonia.Controls/SplitView/SplitViewTemplateSettings.cs
  6. 284
      src/Avalonia.Themes.Fluent/Controls/SplitView.xaml
  7. 229
      src/Avalonia.Themes.Simple/Controls/SplitView.xaml

9
samples/ControlCatalog/Pages/SplitViewPage.xaml
View File

@ -20,7 +20,13 @@
Content="UseLightDismissOverlayMode" Content="UseLightDismissOverlayMode"
IsChecked="{Binding UseLightDismissOverlayMode, ElementName=SplitView}" /> IsChecked="{Binding UseLightDismissOverlayMode, ElementName=SplitView}" />
<ToggleSwitch OffContent="Left" OnContent="Right" Content="Placement" IsChecked="{Binding !IsLeft}" /> <ComboBox Name="Placement" Width="170" Margin="10" SelectedIndex="{Binding Placement}">
<ComboBoxItem>Left</ComboBoxItem>
<ComboBoxItem>Right</ComboBoxItem>
<ComboBoxItem>Top</ComboBoxItem>
<ComboBoxItem>Bottom</ComboBoxItem>
</ComboBox>
<TextBlock Text="DisplayMode" /> <TextBlock Text="DisplayMode" />
<ComboBox Name="DisplayModeSelector" Width="170" Margin="10" SelectedIndex="{Binding DisplayMode}"> <ComboBox Name="DisplayModeSelector" Width="170" Margin="10" SelectedIndex="{Binding DisplayMode}">
@ -52,6 +58,7 @@
BorderThickness="1"> BorderThickness="1">
<!--{Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}--> <!--{Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}-->
<SplitView Name="SplitView" <SplitView Name="SplitView"
PanePlacement="{Binding PanePlacement}" PanePlacement="{Binding PanePlacement}"
PaneBackground="{Binding ((Control)SelectedItem).Tag, ElementName=PaneBackgroundSelector, FallbackValue={x:Null}}" PaneBackground="{Binding ((Control)SelectedItem).Tag, ElementName=PaneBackgroundSelector, FallbackValue={x:Null}}"
OpenPaneLength="{Binding Value, ElementName=OpenPaneLengthSlider}" OpenPaneLength="{Binding Value, ElementName=OpenPaneLengthSlider}"

18
samples/ControlCatalog/ViewModels/SplitViewPageViewModel.cs
View File

@ -6,15 +6,15 @@ namespace ControlCatalog.ViewModels
{ {
public class SplitViewPageViewModel : ViewModelBase public class SplitViewPageViewModel : ViewModelBase
{ {
private bool _isLeft = true;
private int _displayMode = 3; //CompactOverlay private int _displayMode = 3; //CompactOverlay
private int _placement = 0; //Left
public bool IsLeft public int Placement
{ {
get => _isLeft; get => _placement;
set set
{ {
this.RaiseAndSetIfChanged(ref _isLeft, value); this.RaiseAndSetIfChanged(ref _placement, value);
this.RaisePropertyChanged(nameof(PanePlacement)); this.RaisePropertyChanged(nameof(PanePlacement));
} }
} }
@ -29,7 +29,15 @@ namespace ControlCatalog.ViewModels
} }
} }
public SplitViewPanePlacement PanePlacement => _isLeft ? SplitViewPanePlacement.Left : SplitViewPanePlacement.Right; public SplitViewPanePlacement PanePlacement =>
_placement switch
{
0 => SplitViewPanePlacement.Left,
1 => SplitViewPanePlacement.Right,
2 => SplitViewPanePlacement.Top,
3 => SplitViewPanePlacement.Bottom,
_ => SplitViewPanePlacement.Left
};
public SplitViewDisplayMode CurrentDisplayMode public SplitViewDisplayMode CurrentDisplayMode
{ {

24
src/Avalonia.Controls/SplitView/SplitView.cs
View File

@ -18,7 +18,7 @@ namespace Avalonia.Controls
[TemplatePart("PART_PaneRoot", typeof(Panel))] [TemplatePart("PART_PaneRoot", typeof(Panel))]
[PseudoClasses(pcOpen, pcClosed)] [PseudoClasses(pcOpen, pcClosed)]
[PseudoClasses(pcCompactOverlay, pcCompactInline, pcOverlay, pcInline)] [PseudoClasses(pcCompactOverlay, pcCompactInline, pcOverlay, pcInline)]
[PseudoClasses(pcLeft, pcRight)] [PseudoClasses(pcLeft, pcRight, pcTop, pcBottom)]
[PseudoClasses(pcLightDismiss)] [PseudoClasses(pcLightDismiss)]
public class SplitView : ContentControl public class SplitView : ContentControl
{ {
@ -30,6 +30,8 @@ namespace Avalonia.Controls
private const string pcInline = ":inline"; private const string pcInline = ":inline";
private const string pcLeft = ":left"; private const string pcLeft = ":left";
private const string pcRight = ":right"; private const string pcRight = ":right";
private const string pcTop = ":top";
private const string pcBottom = ":bottom";
private const string pcLightDismiss = ":lightDismiss"; private const string pcLightDismiss = ":lightDismiss";
/// <summary> /// <summary>
@ -464,6 +466,8 @@ namespace Avalonia.Controls
{ {
SplitViewPanePlacement.Left => pcLeft, SplitViewPanePlacement.Left => pcLeft,
SplitViewPanePlacement.Right => pcRight, SplitViewPanePlacement.Right => pcRight,
SplitViewPanePlacement.Top => pcTop,
SplitViewPanePlacement.Bottom => pcBottom,
_ => throw new ArgumentOutOfRangeException(nameof(placement), placement, null) _ => throw new ArgumentOutOfRangeException(nameof(placement), placement, null)
}; };
} }
@ -501,11 +505,14 @@ namespace Avalonia.Controls
if (displayMode == SplitViewDisplayMode.CompactInline) if (displayMode == SplitViewDisplayMode.CompactInline)
{ {
TemplateSettings.ClosedPaneWidth = newLen; TemplateSettings.ClosedPaneWidth = newLen;
TemplateSettings.ClosedPaneHeight = newLen;
} }
else if (displayMode == SplitViewDisplayMode.CompactOverlay) else if (displayMode == SplitViewDisplayMode.CompactOverlay)
{ {
TemplateSettings.ClosedPaneWidth = newLen; TemplateSettings.ClosedPaneWidth = newLen;
TemplateSettings.PaneColumnGridLength = new GridLength(newLen, GridUnitType.Pixel); TemplateSettings.PaneColumnGridLength = new GridLength(newLen, GridUnitType.Pixel);
TemplateSettings.ClosedPaneHeight = newLen;
TemplateSettings.PaneRowGridLength = new GridLength(newLen, GridUnitType.Pixel);
} }
} }
@ -521,14 +528,25 @@ namespace Avalonia.Controls
var (closedPaneWidth, paneColumnGridLength) = newValue switch var (closedPaneWidth, paneColumnGridLength) = newValue switch
{ {
SplitViewDisplayMode.Overlay => (0, new GridLength(0, GridUnitType.Pixel)), SplitViewDisplayMode.Overlay => (0d, new GridLength(0, GridUnitType.Pixel)),
SplitViewDisplayMode.CompactOverlay => (CompactPaneLength, new GridLength(CompactPaneLength, GridUnitType.Pixel)), SplitViewDisplayMode.CompactOverlay => (CompactPaneLength, new GridLength(CompactPaneLength, GridUnitType.Pixel)),
SplitViewDisplayMode.Inline => (0, new GridLength(0, GridUnitType.Auto)), SplitViewDisplayMode.Inline => (0d, new GridLength(0, GridUnitType.Auto)),
SplitViewDisplayMode.CompactInline => (CompactPaneLength, new GridLength(0, GridUnitType.Auto)), SplitViewDisplayMode.CompactInline => (CompactPaneLength, new GridLength(0, GridUnitType.Auto)),
_ => throw new NotImplementedException(), _ => throw new NotImplementedException(),
}; };
TemplateSettings.ClosedPaneWidth = closedPaneWidth; TemplateSettings.ClosedPaneWidth = closedPaneWidth;
TemplateSettings.PaneColumnGridLength = paneColumnGridLength; TemplateSettings.PaneColumnGridLength = paneColumnGridLength;
var (closedPaneHeight, paneRowGridLength) = newValue switch
{
SplitViewDisplayMode.Overlay => (0d, new GridLength(0, GridUnitType.Pixel)),
SplitViewDisplayMode.CompactOverlay => (CompactPaneLength, new GridLength(CompactPaneLength, GridUnitType.Pixel)),
SplitViewDisplayMode.Inline => (0d, new GridLength(0, GridUnitType.Auto)),
SplitViewDisplayMode.CompactInline => (CompactPaneLength, new GridLength(0, GridUnitType.Auto)),
_ => throw new NotImplementedException(),
};
TemplateSettings.ClosedPaneHeight = closedPaneHeight;
TemplateSettings.PaneRowGridLength = paneRowGridLength;
InvalidateLightDismissSubscription(); InvalidateLightDismissSubscription();
} }

12
src/Avalonia.Controls/SplitView/SplitViewPanePlacement.cs
View File

@ -13,6 +13,16 @@
/// <summary> /// <summary>
/// The pane is shown to the right of content. /// The pane is shown to the right of content.
/// </summary> /// </summary>
Right Right,
/// <summary>
/// The pane is shown above the content.
/// </summary>
Top,
/// <summary>
/// The pane is shown below the content.
/// </summary>
Bottom
} }
} }

23
src/Avalonia.Controls/SplitView/SplitViewTemplateSettings.cs
View File

@ -19,6 +19,15 @@
AvaloniaProperty.Register<SplitViewTemplateSettings, GridLength>( AvaloniaProperty.Register<SplitViewTemplateSettings, GridLength>(
nameof(PaneColumnGridLength)); nameof(PaneColumnGridLength));
public static readonly StyledProperty<double> ClosedPaneHeightProperty =
AvaloniaProperty.Register<SplitViewTemplateSettings,
double>(nameof(ClosedPaneHeight),
0d);
public static readonly StyledProperty<GridLength> PaneRowGridLengthProperty =
AvaloniaProperty.Register<SplitViewTemplateSettings, GridLength>(
nameof(PaneRowGridLength));
[System.Diagnostics.CodeAnalysis.SuppressMessage("AvaloniaProperty", "AVP1032", Justification = "This property is supposed to be a styled readonly property.")] [System.Diagnostics.CodeAnalysis.SuppressMessage("AvaloniaProperty", "AVP1032", Justification = "This property is supposed to be a styled readonly property.")]
public double ClosedPaneWidth public double ClosedPaneWidth
{ {
@ -32,5 +41,19 @@
get => GetValue(PaneColumnGridLengthProperty); get => GetValue(PaneColumnGridLengthProperty);
internal set => SetValue(PaneColumnGridLengthProperty, value); internal set => SetValue(PaneColumnGridLengthProperty, value);
} }
[System.Diagnostics.CodeAnalysis.SuppressMessage("AvaloniaProperty", "AVP1032", Justification = "This property is supposed to be a styled readonly property.")]
public double ClosedPaneHeight
{
get => GetValue(ClosedPaneHeightProperty);
internal set => SetValue(ClosedPaneHeightProperty, value);
}
[System.Diagnostics.CodeAnalysis.SuppressMessage("AvaloniaProperty", "AVP1032", Justification = "This property is supposed to be a styled readonly property.")]
public GridLength PaneRowGridLength
{
get => GetValue(PaneRowGridLengthProperty);
internal set => SetValue(PaneRowGridLengthProperty, value);
}
} }
} }

284
src/Avalonia.Themes.Fluent/Controls/SplitView.xaml
View File

@ -51,7 +51,7 @@
HorizontalAlignment="Right" /> HorizontalAlignment="Right" />
</Panel> </Panel>
<Panel Name="ContentRoot"> <Panel Name="ContentRoot" Grid.Column="1">
<ContentPresenter x:Name="PART_ContentPresenter" <ContentPresenter x:Name="PART_ContentPresenter"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" /> ContentTemplate="{TemplateBinding ContentTemplate}" />
@ -135,11 +135,11 @@
Width="1" HorizontalAlignment="Left" /> Width="1" HorizontalAlignment="Left" />
</Panel> </Panel>
<Panel Name="ContentRoot"> <Panel Name="ContentRoot" Grid.Column="0">
<ContentPresenter x:Name="PART_ContentPresenter" <ContentPresenter x:Name="PART_ContentPresenter"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" /> ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle Name="LightDismissLayer" IsVisible="False"/> <Rectangle Name="LightDismissLayer" Fill="Transparent" IsVisible="False"/>
</Panel> </Panel>
</Grid> </Grid>
@ -195,48 +195,254 @@
</Style> </Style>
</Style> </Style>
<Style Selector="^:open"> <!-- TOP placement -->
<Style Selector="^ /template/ Panel#PART_PaneRoot"> <Style Selector="^:top">
<Setter Property="Transitions"> <Setter Property="Template">
<Transitions> <ControlTemplate>
<DoubleTransition Property="Width" <Grid Name="Container" Background="{TemplateBinding Background}">
Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" <Grid.RowDefinitions>
Easing="{StaticResource SplitViewPaneAnimationEasing}" /> <RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneRowGridLength}"/>
</Transitions> <RowDefinition Height="*"/>
</Setter> </Grid.RowDefinitions>
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
</Style> <Panel Name="PART_PaneRoot"
<Style Selector="^ /template/ Rectangle#LightDismissLayer"> Background="{TemplateBinding PaneBackground}"
<Setter Property="Transitions"> ClipToBounds="True"
<Transitions> VerticalAlignment="Top"
<DoubleTransition Property="Opacity" ZIndex="100">
Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" <ContentPresenter x:Name="PART_PanePresenter"
Easing="{StaticResource SplitViewPaneAnimationEasing}" /> Content="{TemplateBinding Pane}"
</Transitions> ContentTemplate="{TemplateBinding PaneTemplate}" />
</Setter> <Rectangle Name="HCPaneBorder"
<Setter Property="Opacity" Value="1.0"/> Fill="{DynamicResource SystemControlForegroundTransparentBrush}"
Height="1"
VerticalAlignment="Bottom" />
</Panel>
<Panel Name="ContentRoot" Grid.Row="1">
<ContentPresenter x:Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle Name="LightDismissLayer"
Fill="Transparent"
IsVisible="False"/>
</Panel>
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^:overlay">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
<Setter Property="Grid.RowSpan" Value="1"/>
<Setter Property="Grid.Row" Value="0"/>
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Grid.RowSpan" Value="2"/>
</Style>
</Style>
<Style Selector="^:compactinline">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="1"/>
<Setter Property="Grid.Row" Value="0"/>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Grid.RowSpan" Value="1"/>
</Style>
</Style>
<Style Selector="^:compactoverlay">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="1"/>
<Setter Property="Grid.Row" Value="0"/>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Grid.RowSpan" Value="1"/>
</Style>
</Style>
<Style Selector="^:inline">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="1"/>
<Setter Property="Grid.Row" Value="0"/>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Grid.RowSpan" Value="1"/>
</Style>
</Style> </Style>
</Style> </Style>
<Style Selector="^:closed"> <!-- BOTTOM placement -->
<Style Selector="^ /template/ Panel#PART_PaneRoot"> <Style Selector="^:bottom">
<Setter Property="Transitions"> <Setter Property="Template">
<Transitions> <ControlTemplate>
<DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" /> <Grid Name="Container" Background="{TemplateBinding Background}">
</Transitions> <Grid.RowDefinitions>
</Setter> <RowDefinition Height="*"/>
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" /> <RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneRowGridLength}"/>
</Style> </Grid.RowDefinitions>
<Style Selector="^ /template/ Rectangle#LightDismissLayer">
<Setter Property="Transitions"> <Panel Name="PART_PaneRoot" Background="{TemplateBinding PaneBackground}"
<Transitions> ClipToBounds="True"
<DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" /> VerticalAlignment="Bottom"
</Transitions> ZIndex="100">
</Setter> <ContentPresenter x:Name="PART_PanePresenter"
<Setter Property="Opacity" Value="0.0"/> Content="{TemplateBinding Pane}"
ContentTemplate="{TemplateBinding PaneTemplate}"/>
<Rectangle Name="HCPaneBorder"
Fill="{DynamicResource SystemControlForegroundTransparentBrush}"
Height="1" VerticalAlignment="Top" />
</Panel>
<Panel Name="ContentRoot" Grid.Row="0">
<ContentPresenter x:Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle Name="LightDismissLayer" Fill="Transparent" IsVisible="False"/>
</Panel>
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^:overlay">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
<Setter Property="Grid.RowSpan" Value="2"/>
<Setter Property="Grid.Row" Value="1"/>
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="0"/>
<Setter Property="Grid.RowSpan" Value="2"/>
</Style>
</Style>
<Style Selector="^:compactinline">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="1"/>
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="0"/>
<Setter Property="Grid.RowSpan" Value="1"/>
</Style>
</Style>
<Style Selector="^:compactoverlay">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="2"/>
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="0"/>
<Setter Property="Grid.RowSpan" Value="1"/>
</Style>
</Style>
<Style Selector="^:inline">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="1"/>
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="0"/>
<Setter Property="Grid.RowSpan" Value="1"/>
</Style>
</Style> </Style>
</Style> </Style>
<!-- Placement-specific open/closed transitions for horizontal panes (left/right) -->
<Style Selector="^:left:open /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Width"
Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
</Style>
<Style Selector="^:right:open /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Width"
Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
</Style>
<Style Selector="^:left:closed /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style>
<Style Selector="^:right:closed /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style>
<!-- Placement-specific open/closed transitions for vertical panes (top/bottom) -->
<Style Selector="^:top:open /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Height"
Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
</Style>
<Style Selector="^:bottom:open /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Height"
Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
</Style>
<Style Selector="^:top:closed /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Height" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^:bottom:closed /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Height" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^:lightDismiss /template/ Rectangle#LightDismissLayer"> <Style Selector="^:lightDismiss /template/ Rectangle#LightDismissLayer">
<Setter Property="Fill" Value="{DynamicResource SplitViewLightDismissOverlayBackground}" /> <Setter Property="Fill" Value="{DynamicResource SplitViewLightDismissOverlayBackground}" />
</Style> </Style>

229
src/Avalonia.Themes.Simple/Controls/SplitView.xaml
View File

@ -52,7 +52,7 @@
HorizontalAlignment="Right" /> HorizontalAlignment="Right" />
</Panel> </Panel>
<Panel Name="ContentRoot"> <Panel Name="ContentRoot" Grid.Column="1">
<ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}" <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" /> ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle Name="LightDismissLayer" IsVisible="False"/> <Rectangle Name="LightDismissLayer" IsVisible="False"/>
@ -135,7 +135,7 @@
Width="1" HorizontalAlignment="Left" /> Width="1" HorizontalAlignment="Left" />
</Panel> </Panel>
<Panel Name="ContentRoot"> <Panel Name="ContentRoot" Grid.Column="0">
<ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}" <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" /> ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle Name="LightDismissLayer" IsVisible="False"/> <Rectangle Name="LightDismissLayer" IsVisible="False"/>
@ -194,8 +194,175 @@
<Setter Property="Grid.ColumnSpan" Value="1" /> <Setter Property="Grid.ColumnSpan" Value="1" />
</Style> </Style>
<!-- TOP placement -->
<Style Selector="^:top">
<Setter Property="Template">
<ControlTemplate TargetType="SplitView">
<Grid Name="Container" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneRowGridLength}" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Panel Name="PART_PaneRoot"
Background="{TemplateBinding PaneBackground}"
ClipToBounds="True"
VerticalAlignment="Top"
ZIndex="100">
<ContentPresenter x:Name="PART_PanePresenter"
Content="{TemplateBinding Pane}"
ContentTemplate="{TemplateBinding PaneTemplate}" />
<Rectangle Name="HCPaneBorder"
Fill="Transparent"
Height="1"
VerticalAlignment="Bottom" />
</Panel>
<Panel Name="ContentRoot" Grid.Row="1">
<ContentPresenter x:Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle Name="LightDismissLayer" IsVisible="False" />
</Panel>
</Grid>
</ControlTemplate>
</Setter>
</Style>
<!-- Overlay -->
<Style Selector="^:overlay:top /template/ Panel#PART_PaneRoot">
<Setter Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
<Setter Property="Grid.RowSpan" Value="1" />
<Setter Property="Grid.Row" Value="0" />
</Style>
<Style Selector="^:overlay:top /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="1" />
<Setter Property="Grid.RowSpan" Value="2" />
</Style>
<!-- CompactInline -->
<Style Selector="^:compactinline:top /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="1" />
<Setter Property="Grid.Row" Value="0" />
<Setter Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^:compactinline:top /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="1" />
<Setter Property="Grid.RowSpan" Value="1" />
</Style>
<!-- CompactOverlay -->
<Style Selector="^:compactoverlay:top /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="1" />
<Setter Property="Grid.Row" Value="0" />
<Setter Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^:compactoverlay:top /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="1" />
<Setter Property="Grid.RowSpan" Value="1" />
</Style>
<!-- Inline -->
<Style Selector="^:inline:top /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="1" />
<Setter Property="Grid.Row" Value="0" />
<Setter Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^:inline:top /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="1" />
<Setter Property="Grid.RowSpan" Value="1" />
</Style>
<!-- BOTTOM placement -->
<Style Selector="^:bottom">
<Setter Property="Template">
<ControlTemplate TargetType="SplitView">
<Grid Name="Container" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneRowGridLength}" />
</Grid.RowDefinitions>
<Panel Name="PART_PaneRoot"
Background="{TemplateBinding PaneBackground}"
ClipToBounds="True"
VerticalAlignment="Bottom"
ZIndex="100">
<ContentPresenter x:Name="PART_PanePresenter"
Content="{TemplateBinding Pane}"
ContentTemplate="{TemplateBinding PaneTemplate}" />
<Rectangle Name="HCPaneBorder"
Fill="Transparent"
Height="1"
VerticalAlignment="Top" />
</Panel>
<Panel Name="ContentRoot" Grid.Row="0">
<ContentPresenter x:Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle Name="LightDismissLayer" IsVisible="False" />
</Panel>
</Grid>
</ControlTemplate>
</Setter>
</Style>
<!-- Overlay -->
<Style Selector="^:overlay:bottom /template/ Panel#PART_PaneRoot">
<Setter Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
<Setter Property="Grid.RowSpan" Value="2" />
<Setter Property="Grid.Row" Value="1" />
</Style>
<Style Selector="^:overlay:bottom /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="0" />
<Setter Property="Grid.RowSpan" Value="2" />
</Style>
<!-- CompactInline -->
<Style Selector="^:compactinline:bottom /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="1" />
<Setter Property="Grid.Row" Value="1" />
<Setter Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^:compactinline:bottom /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="0" />
<Setter Property="Grid.RowSpan" Value="1" />
</Style>
<!-- CompactOverlay -->
<Style Selector="^:compactoverlay:bottom /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="2" />
<Setter Property="Grid.Row" Value="1" />
<Setter Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^:compactoverlay:bottom /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="0" />
<Setter Property="Grid.RowSpan" Value="1" />
</Style>
<!-- Inline -->
<Style Selector="^:inline:bottom /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.RowSpan" Value="1" />
<Setter Property="Grid.Row" Value="1" />
<Setter Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^:inline:bottom /template/ Panel#ContentRoot">
<Setter Property="Grid.Row" Value="0" />
<Setter Property="Grid.RowSpan" Value="1" />
</Style>
<!-- Open/Close Pane animation --> <!-- Open/Close Pane animation -->
<Style Selector="^:open /template/ Panel#PART_PaneRoot"> <!-- Scope width animations to horizontal placements -->
<Style Selector="^:left:open /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions"> <Setter Property="Transitions">
<Transitions> <Transitions>
<DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
@ -204,17 +371,17 @@
</Setter> </Setter>
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" /> <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
</Style> </Style>
<Style Selector="^:open /template/ Rectangle#LightDismissLayer"> <Style Selector="^:right:open /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions"> <Setter Property="Transitions">
<Transitions> <Transitions>
<DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
Easing="{StaticResource SplitViewPaneAnimationEasing}" /> Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions> </Transitions>
</Setter> </Setter>
<Setter Property="Opacity" Value="1.0" /> <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
</Style> </Style>
<Style Selector="^:closed /template/ Panel#PART_PaneRoot"> <Style Selector="^:left:closed /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions"> <Setter Property="Transitions">
<Transitions> <Transitions>
<DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}"
@ -224,14 +391,56 @@
<Setter Property="Width" <Setter Property="Width"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" /> Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style> </Style>
<Style Selector="^:closed /template/ Rectangle#LightDismissLayer"> <Style Selector="^:right:closed /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}"
Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Width"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style>
<!-- Placement-specific open/closed transitions for vertical panes (top/bottom) -->
<Style Selector="^:top:open /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Height" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
</Style>
<Style Selector="^:bottom:open /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Height" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
</Style>
<Style Selector="^:top:closed /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Height" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}"
Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions>
</Setter>
<Setter Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style>
<Style Selector="^:bottom:closed /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions"> <Setter Property="Transitions">
<Transitions> <Transitions>
<DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" <DoubleTransition Property="Height" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}"
Easing="{StaticResource SplitViewPaneAnimationEasing}" /> Easing="{StaticResource SplitViewPaneAnimationEasing}" />
</Transitions> </Transitions>
</Setter> </Setter>
<Setter Property="Opacity" Value="0.0" /> <Setter Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneHeight}" />
</Style> </Style>
<Style Selector="^ /template/ Rectangle#LightDismissLayer"> <Style Selector="^ /template/ Rectangle#LightDismissLayer">

Write Preview
Loading…
Cancel
Save