SukiSideMenu.axaml 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <ResourceDictionary xmlns="https://github.com/avaloniaui"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3. xmlns:content="clr-namespace:SukiUI.Content"
  4. xmlns:suki="clr-namespace:SukiUI.Controls"
  5. xmlns:theme="clr-namespace:SukiUI.Theme">
  6. <Design.PreviewWith>
  7. <suki:SukiSideMenu></suki:SukiSideMenu>
  8. </Design.PreviewWith>
  9. <ControlTheme x:Key="SukiSideMenuStyle" TargetType="suki:SukiSideMenu">
  10. <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
  11. <Setter Property="Template">
  12. <ControlTemplate>
  13. <SplitView DisplayMode="CompactInline"
  14. IsPaneOpen="{TemplateBinding IsMenuExpanded}"
  15. OpenPaneLength="{TemplateBinding OpenPaneLength}">
  16. <SplitView.Pane>
  17. <Border>
  18. <Grid Background="Transparent">
  19. <suki:GlassCard Name="Glass" Classes=""
  20. BorderThickness="0,0,1,0"
  21. CornerRadius="0"
  22. IsAnimated="False" />
  23. <DockPanel>
  24. <Button Name="PART_SidebarToggleButton"
  25. Margin="7"
  26. HorizontalAlignment="{TemplateBinding TogglePaneButtonPosition}"
  27. VerticalAlignment="Top"
  28. Classes="Basic"
  29. Cursor="Hand"
  30. DockPanel.Dock="Top"
  31. IsVisible="{TemplateBinding SidebarToggleEnabled}">
  32. <Panel>
  33. <PathIcon Name="PART_ExpandIcon"
  34. Classes="Flippable"
  35. Width="12"
  36. Height="12"
  37. Data="{x:Static content:Icons.ChevronLeft}"
  38. Foreground="{DynamicResource SukiText}">
  39. <PathIcon.Transitions>
  40. <Transitions>
  41. <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource MediumAnimationDuration}" />
  42. </Transitions>
  43. </PathIcon.Transitions>
  44. </PathIcon>
  45. </Panel>
  46. </Button>
  47. <Grid MinHeight="{TemplateBinding HeaderMinHeight}"
  48. DockPanel.Dock="Top"
  49. IsVisible="{TemplateBinding IsMenuExpanded}">
  50. <ContentPresenter Content="{TemplateBinding HeaderContent}" />
  51. </Grid>
  52. <ContentControl Margin="0,0,0,12"
  53. Content="{TemplateBinding FooterContent}"
  54. DockPanel.Dock="Bottom"
  55. IsVisible="{TemplateBinding IsMenuExpanded}" />
  56. <Grid Name="PART_Spacer"
  57. Height="15"
  58. DockPanel.Dock="Top" />
  59. <DockPanel>
  60. <StackPanel IsVisible="{TemplateBinding IsSearchEnabled}" DockPanel.Dock="Top">
  61. <StackPanel.Styles>
  62. <Style Selector="suki|GlassCard.Search:pointerover, suki|GlassCard.Search:focus-within">
  63. <Setter Property="Width" Value="190"></Setter>
  64. <Setter Property="CornerRadius" Value="12" />
  65. </Style>
  66. </StackPanel.Styles>
  67. <suki:GlassCard Classes="Search" HorizontalAlignment="Right" IsAnimated="False" Width="42" Margin="15,10,15,15" CornerRadius="22" Height="42">
  68. <suki:GlassCard.Transitions>
  69. <Transitions>
  70. <CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.35"></CornerRadiusTransition>
  71. <DoubleTransition Property="Width" Duration="0:0:0.35"></DoubleTransition>
  72. </Transitions>
  73. </suki:GlassCard.Transitions>
  74. <DockPanel Margin="-3,-1,0,0">
  75. <PathIcon Width="13" DockPanel.Dock="Left" VerticalAlignment="Center" Foreground="{DynamicResource SukiLowText}"
  76. Height="13"
  77. Data="{x:Static content:Icons.Search}" />
  78. <TextBox theme:TextBoxExtensions.AddDeleteButton="True" Classes="NoShadow" Text="{TemplateBinding SearchText, Mode=TwoWay}" BorderThickness="0" Watermark="Search"/>
  79. </DockPanel>
  80. </suki:GlassCard>
  81. <!-- <Border Height="1" Margin="20,0,20,15" Background="{DynamicResource SukiBorderBrush}"/> -->
  82. </StackPanel>
  83. <ScrollViewer Name="PART_ScrollViewer"
  84. AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
  85. Background="{TemplateBinding Background}"
  86. BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}"
  87. Classes="Stack"
  88. HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
  89. HorizontalSnapPointsType="{TemplateBinding (ScrollViewer.HorizontalSnapPointsType)}"
  90. IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
  91. VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
  92. VerticalSnapPointsType="{TemplateBinding (ScrollViewer.VerticalSnapPointsType)}">
  93. <StackPanel theme:StackPanelExtensions.AnimatedScroll="True">
  94. <ItemsPresenter Name="PART_ItemsPresenter"
  95. Margin="{TemplateBinding Padding}"
  96. theme:ItemsPresenterExtensions.AnimatedScroll="True"
  97. ItemsPanel="{TemplateBinding ItemsPanel}" />
  98. </StackPanel>
  99. </ScrollViewer>
  100. </DockPanel>
  101. </DockPanel>
  102. </Grid>
  103. </Border>
  104. </SplitView.Pane>
  105. <Border Name="ContentBorder"
  106. Margin="0,0,0,0"
  107. Background="{DynamicResource SukiBackground}"
  108. BorderBrush="{DynamicResource SukiBorderBrush}"
  109. BorderThickness="0,0,0,0">
  110. <suki:SukiTransitioningContentControl Name="PART_TransitioningContentControl" />
  111. </Border>
  112. </SplitView>
  113. </ControlTemplate>
  114. </Setter>
  115. <Style Selector="^[IsToggleButtonVisible=False]">
  116. <Style Selector="^[IsMenuExpanded=False]">
  117. <Style Selector="^ /template/ Button#PART_SidebarToggleButton">
  118. <Setter Property="Opacity" Value="0" />
  119. <Setter Property="IsVisible" Value="False" />
  120. </Style>
  121. </Style>
  122. <Style Selector="^[IsMenuExpanded=True]">
  123. <Style Selector="^ /template/ Button#PART_SidebarToggleButton">
  124. <Setter Property="Opacity" Value="0" />
  125. <Setter Property="IsHitTestVisible" Value="False" />
  126. </Style>
  127. </Style>
  128. </Style>
  129. <Style Selector="^[IsMenuExpanded=False]">
  130. <Style Selector="^ /template/ PathIcon#PART_ExpandIcon">
  131. <Setter Property="RenderTransform" Value="rotate(-180deg)" />
  132. </Style>
  133. <Style Selector="^ /template/ Grid#PART_Spacer">
  134. <Setter Property="Height" Value="0" />
  135. </Style>
  136. </Style>
  137. </ControlTheme>
  138. <ControlTheme x:Key="{x:Type suki:SukiSideMenu}"
  139. BasedOn="{StaticResource SukiSideMenuStyle}"
  140. TargetType="suki:SukiSideMenu" />
  141. </ResourceDictionary>