TreeViewStyles.xaml 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <Styles xmlns="https://github.com/avaloniaui"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3. xmlns:content="clr-namespace:SukiUI.Content"
  4. xmlns:theme="clr-namespace:SukiUI.Theme">
  5. <Design.PreviewWith>
  6. <Border Width="200"
  7. Padding="20"
  8. Background="{DynamicResource SukiBackground}">
  9. <TreeView>
  10. <TreeViewItem Header="blub">
  11. <TreeViewItem Header="blub" />
  12. <TreeViewItem Header="blub" />
  13. </TreeViewItem>
  14. <TreeViewItem Header="blub" />
  15. <TreeViewItem Header="blub" />
  16. </TreeView>
  17. </Border>
  18. </Design.PreviewWith>
  19. <Style Selector="TreeViewItem">
  20. <Setter Property="Template">
  21. <ControlTemplate>
  22. <StackPanel>
  23. <Border Name="SelectionBorder"
  24. Background="{TemplateBinding Background}"
  25. BorderBrush="{TemplateBinding BorderBrush}"
  26. BorderThickness="{TemplateBinding BorderThickness}"
  27. CornerRadius="{TemplateBinding CornerRadius}"
  28. Focusable="True"
  29. TemplatedControl.IsTemplateFocusTarget="True">
  30. <Grid Name="PART_Header"
  31. Margin="{TemplateBinding Level,
  32. Mode=OneWay,
  33. Converter={StaticResource LeftMarginConverter}}"
  34. ColumnDefinitions="16, *">
  35. <Grid.Styles>
  36. <Style Selector="ToggleButton:checked">
  37. <Setter Property="Background" Value="Transparent" />
  38. </Style>
  39. </Grid.Styles>
  40. <ToggleButton Name="PART_ExpandCollapseChevron"
  41. Padding="0"
  42. Background="Transparent"
  43. BorderThickness="0"
  44. Classes="Basic"
  45. Focusable="False"
  46. RenderTransformOrigin="65% 50%"
  47. IsChecked="{TemplateBinding IsExpanded,
  48. Mode=TwoWay}">
  49. <ToggleButton.Transitions>
  50. <Transitions>
  51. <TransformOperationsTransition Property="RenderTransform" Duration="0.25" />
  52. </Transitions>
  53. </ToggleButton.Transitions>
  54. <PathIcon Width="7"
  55. Height="7"
  56. Classes="Flippable"
  57. Data="{x:Static content:Icons.ChevronRight}" />
  58. </ToggleButton>
  59. <ContentPresenter Name="PART_HeaderPresenter"
  60. Grid.Column="1"
  61. Padding="{TemplateBinding Padding}"
  62. HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}"
  63. Background="Transparent"
  64. Content="{TemplateBinding Header}"
  65. ContentTemplate="{TemplateBinding HeaderTemplate}"
  66. Focusable="False" />
  67. </Grid>
  68. </Border>
  69. <ItemsPresenter Name="PART_ItemsPresenter"
  70. theme:ItemsPresenterExtensions.AnimatedScroll="True"
  71. IsVisible="{TemplateBinding IsExpanded}"
  72. ItemsPanel="{TemplateBinding ItemsPanel}" />
  73. </StackPanel>
  74. </ControlTemplate>
  75. </Setter>
  76. </Style>
  77. <Style Selector="TreeViewItem">
  78. <Setter Property="CornerRadius" Value="{DynamicResource SmallCornerRadius}" />
  79. <Setter Property="Margin" Value="1" />
  80. </Style>
  81. <Style Selector="TreeView">
  82. <Setter Property="CornerRadius" Value="{DynamicResource SmallCornerRadius}" />
  83. <Setter Property="BorderThickness" Value="0" />
  84. <Setter Property="BorderBrush" Value="#dedede" />
  85. <Setter Property="Margin" Value="0" />
  86. <Setter Property="Padding" Value="0" />
  87. </Style>
  88. <Style Selector="TreeViewItem">
  89. <Setter Property="Padding" Value="5" />
  90. </Style>
  91. <Style Selector="TreeViewItem:pointerover /template/ Border#SelectionBorder:pointerover">
  92. <Setter Property="Background" Value="{DynamicResource SukiCardBackground}" />
  93. </Style>
  94. <Style Selector="TreeViewItem:selected /template/ Border#SelectionBorder:focus">
  95. <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
  96. </Style>
  97. <Style Selector="TreeViewItem:selected /template/ Border#SelectionBorder:pointerover:focus">
  98. <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
  99. </Style>
  100. <Style Selector="TreeViewItem:selected &gt; TextBlock">
  101. <Setter Property="Foreground" Value="{DynamicResource HighlightForegroundBrush}" />
  102. </Style>
  103. <!-- <Style Selector="TreeViewItem /template/ ToggleButton#expander"> -->
  104. <!-- <Setter Property="Background" Value="Transparent" /> -->
  105. <!-- <Setter Property="Padding" Value="0" /> -->
  106. <!-- <Setter Property="BorderThickness" Value="0" /> -->
  107. <!-- <Setter Property="Template"> -->
  108. <!-- <ControlTemplate> -->
  109. <!-- <Border Width="16" -->
  110. <!-- Height="12" -->
  111. <!-- HorizontalAlignment="Center" -->
  112. <!-- VerticalAlignment="Center" -->
  113. <!-- Background="Transparent" -->
  114. <!-- BorderThickness="0"> -->
  115. <!-- <Path HorizontalAlignment="Center" -->
  116. <!-- VerticalAlignment="Center" -->
  117. <!-- Data="M 0 2 L 4 6 L 0 10 Z" -->
  118. <!-- Fill="{DynamicResource ThemeForegroundBrush}" /> -->
  119. <!-- </Border> -->
  120. <!-- </ControlTemplate> -->
  121. <!-- </Setter> -->
  122. <!-- </Style> -->
  123. <Style Selector="TreeViewItem[IsExpanded=True] /template/ ToggleButton#PART_ExpandCollapseChevron">
  124. <Setter Property="RenderTransform" Value="rotate(90deg)" />
  125. </Style>
  126. </Styles>