ImageEditor.axaml 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <UserControl xmlns="https://github.com/avaloniaui"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  4. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5. xmlns:components="using:InABox.Avalonia.Components"
  6. xmlns:converters="using:InABox.Avalonia.Converters"
  7. xmlns:system="using:System"
  8. mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
  9. x:Class="InABox.Avalonia.Components.ImageEditor">
  10. <UserControl.Resources>
  11. <converters:DoubleCalculator x:Key="Add1Calculator" Constants="1.0" Type="Sum"/>
  12. </UserControl.Resources>
  13. <Border CornerRadius="{Binding $parent[components:ImageEditor].CornerRadius}" ClipToBounds="True">
  14. <Grid>
  15. <Grid.RowDefinitions>
  16. <RowDefinition Height="*"/>
  17. <RowDefinition Height="Auto"/>
  18. </Grid.RowDefinitions>
  19. <Canvas Name="OuterCanvas" Background="White">
  20. <Border Name="ImageBorder" Background="White"
  21. BoxShadow="0 0 10 Gray">
  22. <Grid>
  23. <Image Name="Image" Source="{Binding $parent[components:ImageEditor].Source}"/>
  24. <Canvas Name="Canvas"
  25. Background="Transparent"
  26. PointerPressed="Canvas_PointerPressed"
  27. PointerMoved="Canvas_PointerMoved"
  28. PointerReleased="Canvas_PointerReleased"
  29. ClipToBounds="True"/>
  30. </Grid>
  31. </Border>
  32. </Canvas>
  33. <Border Grid.Row="1"
  34. BoxShadow="0 0 10 Gray"
  35. IsVisible="{Binding $parent[components:ImageEditor].ShowButtons}">
  36. <Border ClipToBounds="True"
  37. Background="White">
  38. <Border.Styles>
  39. <Style Selector="Button">
  40. <Setter Property="Background"
  41. Value="Transparent"/>
  42. <Setter Property="ClipToBounds"
  43. Value="False"/>
  44. </Style>
  45. <Style Selector="Button:flyout-open /template/ ContentPresenter">
  46. <Setter Property="BoxShadow"
  47. Value="0 0 10 DarkGray"/>
  48. </Style>
  49. <Style Selector="Button:disabled">
  50. <Setter Property="Foreground"
  51. Value="#909090"/>
  52. </Style>
  53. <Style Selector="Button:disabled /template/ ContentPresenter">
  54. <Setter Property="Background"
  55. Value="Transparent"/>
  56. </Style>
  57. <Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
  58. <Setter Property="BorderBrush" Value="{Binding $parent[Button].BorderBrush}" />
  59. <Setter Property="BorderThickness" Value="{Binding $parent[Button].BorderThickness}" />
  60. <Setter Property="Background" Value="{Binding $parent[Button].Background}" />
  61. <Setter Property="Foreground" Value="{Binding $parent[Button].Foreground}" />
  62. </Style>
  63. </Border.Styles>
  64. <Grid>
  65. <Grid.ColumnDefinitions>
  66. <ColumnDefinition Width="*"/>
  67. <ColumnDefinition Width="Auto"/>
  68. <ColumnDefinition Width="*"/>
  69. </Grid.ColumnDefinitions>
  70. <StackPanel Grid.Column="1" Margin="-10"
  71. Orientation="Horizontal">
  72. <StackPanel.Styles>
  73. <!--
  74. <Style Selector="FlyoutPresenter">
  75. <Setter Property="Padding" Value="{StaticResource PrsControlSpacing}"/>
  76. <Setter Property="CornerRadius" Value="{StaticResource PrsCornerRadius}"/>
  77. <Setter Property="BorderBrush" Value="Black"/>
  78. <Setter Property="MinWidth" Value="0"/>
  79. <Setter Property="Background" Value="White"/>
  80. </Style>
  81. -->
  82. <Style Selector="FlyoutPresenter">
  83. <Setter Property="Padding" Value="5"/>
  84. <Setter Property="Background" Value="Transparent"/>
  85. <Setter Property="BorderThickness" Value="0"/>
  86. <Setter Property="CornerRadius" Value="0"/>
  87. <Setter Property="ClipToBounds" Value="False"/>
  88. </Style>
  89. <Style Selector="FlyoutPresenter > Border">
  90. <Setter Property="Padding" Value="{StaticResource PrsControlSpacing}"/>
  91. <Setter Property="BorderBrush" Value="Black"/>
  92. <Setter Property="BorderThickness" Value="0"/>
  93. <Setter Property="Background" Value="White"/>
  94. <Setter Property="BoxShadow" Value="0 0 10 Gray"/>
  95. </Style>
  96. <Style Selector="Rectangle.Separator">
  97. <Setter Property="Fill" Value="Gray"/>
  98. <Setter Property="Width" Value="1"/>
  99. <Setter Property="VerticalAlignment" Value="Stretch"/>
  100. <Setter Property="Margin" Value="0,10"/>
  101. </Style>
  102. </StackPanel.Styles>
  103. <Button Name="ShapeButton"
  104. Width="40" Height="40"
  105. Margin="10">
  106. <Button.Flyout>
  107. <Flyout Placement="Top" VerticalOffset="0">
  108. <Border>
  109. <ItemsControl ItemsSource="{Binding $parent[components:ImageEditor].ModeButtons}">
  110. <ItemsControl.ItemTemplate>
  111. <DataTemplate DataType="components:ImageEditorModeButton">
  112. <Button Width="40" Height="40" Margin="10"
  113. CommandParameter="{Binding Mode}"
  114. Command="{Binding $parent[components:ImageEditor].SetModeCommand}"
  115. Content="{Binding Content}"/>
  116. </DataTemplate>
  117. </ItemsControl.ItemTemplate>
  118. <ItemsControl.ItemsPanel>
  119. <ItemsPanelTemplate>
  120. <UniformGrid Margin="-10" Rows="1"/>
  121. </ItemsPanelTemplate>
  122. </ItemsControl.ItemsPanel>
  123. </ItemsControl>
  124. </Border>
  125. </Flyout>
  126. </Button.Flyout>
  127. </Button>
  128. <Rectangle Classes="Separator"/>
  129. <Button Name="LineThicknessButton" Width="40" Height="40"
  130. Margin="10">
  131. <Canvas Width="25" Height="21"
  132. HorizontalAlignment="Center" VerticalAlignment="Center">
  133. <Line StrokeThickness="0.5"
  134. Stroke="Black"
  135. StartPoint="0,0"
  136. EndPoint="25,0"/>
  137. <Line StrokeThickness="1"
  138. Stroke="Black"
  139. StartPoint="0,3"
  140. EndPoint="25,3"/>
  141. <Line StrokeThickness="2"
  142. Stroke="Black"
  143. StartPoint="0,7"
  144. EndPoint="25,7"/>
  145. <Line StrokeThickness="3"
  146. Stroke="Black"
  147. StartPoint="0,12.5"
  148. EndPoint="25,12.5"/>
  149. <Line StrokeThickness="5"
  150. Stroke="Black"
  151. StartPoint="0,19.5"
  152. EndPoint="25,19.5"/>
  153. </Canvas>
  154. <Button.Flyout>
  155. <Flyout Placement="Top" VerticalOffset="0">
  156. <Border>
  157. <Grid>
  158. <Grid.RowDefinitions>
  159. <RowDefinition Height="20"/>
  160. <RowDefinition Height="Auto"/>
  161. </Grid.RowDefinitions>
  162. <Line Grid.Row="0"
  163. Margin="20"
  164. StartPoint="0,0"
  165. EndPoint="150,0"
  166. StrokeLineCap="Round"
  167. Stroke="Black">
  168. <Line.StrokeThickness>
  169. <MultiBinding Converter="{StaticResource Add1Calculator}">
  170. <Binding Path="$parent[components:ImageEditor].LineThickness"/>
  171. </MultiBinding>
  172. </Line.StrokeThickness>
  173. </Line>
  174. <Line Grid.Row="0"
  175. Margin="20"
  176. StartPoint="0,0"
  177. EndPoint="150,0"
  178. StrokeThickness="{Binding $parent[components:ImageEditor].LineThickness}"
  179. StrokeLineCap="Round"
  180. Stroke="{Binding $parent[components:ImageEditor].PrimaryBrush}"/>
  181. <Slider Value="{Binding $parent[components:ImageEditor].LineThickness}"
  182. Grid.Row="1"
  183. Minimum="1.0"
  184. Maximum="30.0"
  185. Width="150"/>
  186. </Grid>
  187. </Border>
  188. </Flyout>
  189. </Button.Flyout>
  190. </Button>
  191. <Button Name="PrimaryColour" Width="40" Height="40"
  192. Margin="10">
  193. <Ellipse Width="25" Height="25"
  194. Margin="10"
  195. HorizontalAlignment="Center" VerticalAlignment="Center"
  196. Fill="{Binding $parent[components:ImageEditor].PrimaryBrush,Converter={x:Static components:ImageEditorTransparentImageBrushConverter.Instance}}"
  197. Stroke="Black" StrokeThickness="1"/>
  198. <Button.Flyout>
  199. <Flyout Placement="Top" VerticalOffset="0">
  200. <Border>
  201. <ColorView Color="{Binding $parent[components:ImageEditor].PrimaryBrush,Converter={x:Static converters:BrushToColorConverter.Instance}}"/>
  202. </Border>
  203. </Flyout>
  204. </Button.Flyout>
  205. </Button>
  206. <Button Name="SecondaryColour" Width="40" Height="40"
  207. Margin="10">
  208. <Ellipse Width="25" Height="25"
  209. Margin="10"
  210. HorizontalAlignment="Center" VerticalAlignment="Center"
  211. Fill="{Binding $parent[components:ImageEditor].SecondaryBrush,Converter={x:Static components:ImageEditorTransparentImageBrushConverter.Instance}}"
  212. Stroke="Black" StrokeThickness="1"/>
  213. <Button.Flyout>
  214. <Flyout Placement="Top" VerticalOffset="0">
  215. <Border>
  216. <ColorView Color="{Binding $parent[components:ImageEditor].SecondaryBrush,Converter={x:Static converters:BrushToColorConverter.Instance}}"/>
  217. </Border>
  218. </Flyout>
  219. </Button.Flyout>
  220. </Button>
  221. <Rectangle Classes="Separator"/>
  222. <Button Name="UndoButton" Width="40" Height="40"
  223. Margin="10"
  224. Command="{Binding $parent[components:ImageEditor].UndoCommand}"
  225. IsEnabled="False">
  226. <Canvas Width="25" Height="25">
  227. <Path Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2">
  228. <Path.Data>
  229. <PathGeometry>
  230. <PathFigure StartPoint="4,9" IsClosed="False">
  231. <LineSegment Point="10,3"/>
  232. <ArcSegment Point="18,17" Size="8,8"/>
  233. <LineSegment Point="11,24"/>
  234. </PathFigure>
  235. </PathGeometry>
  236. </Path.Data>
  237. </Path>
  238. <Line StartPoint="4,10" EndPoint="13,10"
  239. Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2"
  240. StrokeLineCap="Round"/>
  241. <Line StartPoint="3,10" EndPoint="3,1"
  242. Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2"
  243. StrokeLineCap="Round"/>
  244. </Canvas>
  245. </Button>
  246. <Button Name="RedoButton" Width="40" Height="40"
  247. Margin="10"
  248. Command="{Binding $parent[components:ImageEditor].RedoCommand}"
  249. IsEnabled="False">
  250. <Canvas Width="25" Height="25">
  251. <Path Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2">
  252. <Path.Data>
  253. <PathGeometry>
  254. <PathFigure StartPoint="21,9" IsClosed="False">
  255. <LineSegment Point="15,3"/>
  256. <ArcSegment Point="7,17" Size="8,8" SweepDirection="CounterClockwise"/>
  257. <LineSegment Point="14,24"/>
  258. </PathFigure>
  259. </PathGeometry>
  260. </Path.Data>
  261. </Path>
  262. <Line StartPoint="21,10" EndPoint="12,10"
  263. Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2"
  264. StrokeLineCap="Round"/>
  265. <Line StartPoint="22,10" EndPoint="22,1"
  266. Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2"
  267. StrokeLineCap="Round"/>
  268. </Canvas>
  269. </Button>
  270. </StackPanel>
  271. </Grid>
  272. </Border>
  273. </Border>
  274. </Grid>
  275. </Border>
  276. </UserControl>