inabox/InABox.Avalonia/Components/ImageEditor/ImageEditor.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
			 xmlns:components="using:InABox.Avalonia.Components"
			 xmlns:converters="using:InABox.Avalonia.Converters"
			 xmlns:image="using:InABox.Avalonia.Components.ImageEditing"
			 xmlns:system="using:System"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="InABox.Avalonia.Components.ImageEditor">
	<UserControl.Styles>
		<Style Selector="Button">
			<Setter Property="Background"
					Value="Transparent"/>
			<Setter Property="ClipToBounds"
					Value="False"/>
			<Setter Property="CornerRadius" Value="3"/>
		</Style>
		<Style Selector="Button:flyout-open /template/ ContentPresenter">
			<Setter Property="BoxShadow"
					Value="0 0 10 DarkGray"/>
		</Style>
		<Style Selector="Button.active /template/ ContentPresenter">
			<Setter Property="BoxShadow"
					Value="0 0 10 DarkGray"/>
		</Style>
		<Style Selector="Button:disabled">
			<Setter Property="Foreground"
					Value="#909090"/>
		</Style>
		<Style Selector="Button:disabled /template/ ContentPresenter">
			<Setter Property="Background"
					Value="Transparent"/>
		</Style>
		<Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
			<Setter Property="BorderBrush" Value="{Binding $parent[Button].BorderBrush}" />
			<Setter Property="BorderThickness" Value="{Binding $parent[Button].BorderThickness}" />
			<Setter Property="Background" Value="{Binding $parent[Button].Background}" />
			<Setter Property="Foreground" Value="{Binding $parent[Button].Foreground}" />
		</Style>
		
		<Style Selector="FlyoutPresenter">
			<Setter Property="Padding" Value="5"/>
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="0"/>
			<Setter Property="CornerRadius" Value="0"/>
			<Setter Property="ClipToBounds" Value="False"/>
		</Style>
		<Style Selector="FlyoutPresenter > Border">
			<Setter Property="Padding" Value="{StaticResource PrsControlSpacing}"/>
			<Setter Property="BorderBrush" Value="Black"/>
			<Setter Property="BorderThickness" Value="0"/>
			<Setter Property="Background" Value="White"/>
			<Setter Property="BoxShadow" Value="0 0 10 Gray"/>
		</Style>
		<Style Selector="Rectangle.Separator">
			<Setter Property="Fill" Value="Gray"/>
			<Setter Property="Width" Value="1"/>
			<Setter Property="VerticalAlignment" Value="Stretch"/>
			<Setter Property="Margin" Value="0,10"/>
		</Style>
	</UserControl.Styles>
	<UserControl.Resources>
		<converters:DoubleCalculator x:Key="Add1Calculator" Constants="1.0" Type="Sum"/>
	</UserControl.Resources>
	<Border CornerRadius="{Binding $parent[components:ImageEditor].CornerRadius}" ClipToBounds="True">
		<Grid>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto"/>
				<RowDefinition Height="*"/>
				<RowDefinition Height="Auto"/>
			</Grid.RowDefinitions>
			<Canvas Name="OuterCanvas" Grid.Row="1" Background="White" PointerWheelChanged="OuterCanvas_PointerWheelChanged">
				<Canvas.GestureRecognizers>
					<components:PanAndZoomGestureRecognizer Name="GestureRecognizer"/>
				</Canvas.GestureRecognizers>
				<Canvas.Styles>
					<Style Selector="Thumb">
						<Setter Property="Template">
							<ControlTemplate>
								<Border Background="LightGray"
										BorderBrush="Black"
										BorderThickness="{TemplateBinding BorderThickness}"
										CornerRadius="3"/>
							</ControlTemplate>
						</Setter>
					</Style>
				</Canvas.Styles>
				<Border Name="ImageBorder" Background="White"
						BoxShadow="0 0 10 Gray">
					<Grid>
						<Image Name="Image" Source="{Binding $parent[components:ImageEditor].Source}"/>
						<Canvas Name="Canvas"
								Background="Transparent"
								PointerPressed="Canvas_PointerPressed"
								PointerMoved="Canvas_PointerMoved"
								PointerReleased="Canvas_PointerReleased"
								ClipToBounds="True"/>
					</Grid>
				</Border>
			</Canvas>
			<Border Grid.Row="0"
					BoxShadow="0 0 10 Gray"
					IsVisible="{Binding $parent[components:ImageEditor].ShowButtons}">
				<Border ClipToBounds="True"
						Background="White">
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="*"/>
							<ColumnDefinition Width="Auto"/>
							<ColumnDefinition Width="*"/>
						</Grid.ColumnDefinitions>
						<ItemsControl Grid.Column="1" ItemsSource="{Binding $parent[components:ImageEditor].ModeButtons}">
							<ItemsControl.ItemTemplate>
								<DataTemplate DataType="components:ImageEditorModeButton">
									<Button Classes.active="{Binding Active}"
											Width="40" Height="40" Margin="10"
											CommandParameter="{Binding Mode}"
											Command="{Binding $parent[components:ImageEditor].SetModeCommand}"
											Content="{Binding Content}"/>
								</DataTemplate>
							</ItemsControl.ItemTemplate>
							<ItemsControl.ItemsPanel>
								<ItemsPanelTemplate>
									<UniformGrid Margin="-10" Rows="1"/>
								</ItemsPanelTemplate>
							</ItemsControl.ItemsPanel>
						</ItemsControl>
					</Grid>
				</Border>
			</Border>
			<Border Grid.Row="2"
					BoxShadow="0 0 10 Gray"
					IsVisible="{Binding $parent[components:ImageEditor].ShowButtons}">
				<Border ClipToBounds="True"
						Background="White">
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="*"/>
							<ColumnDefinition Width="Auto"/>
							<ColumnDefinition Width="*"/>
						</Grid.ColumnDefinitions>
						<StackPanel Grid.Column="1" Margin="-10"
									Orientation="Horizontal">
							<Button Name="FontSizeButton" Width="40" Height="40"
									Margin="10">
								<Canvas Width="25" Height="25"
										HorizontalAlignment="Center" VerticalAlignment="Center">
									<TextBlock Text="A" FontSize="20"
											   Canvas.Left="2"
											   Canvas.Bottom="1"/>
									<TextBlock Text="A" FontSize="10"
											   Canvas.Left="15"
											   Canvas.Bottom="3"/>
								</Canvas>
								<Button.Flyout>
									<Flyout Placement="Top" VerticalOffset="0">
										<Border>
											<Grid>
												<Grid.RowDefinitions>
													<RowDefinition Height="40"/>
													<RowDefinition Height="Auto"/>
												</Grid.RowDefinitions>
												<TextBlock FontSize="{Binding $parent[components:ImageEditor].FontSize}"
														   Text="Aa"
														   VerticalAlignment="Center"
														   TextAlignment="Center"/>
												<Slider Value="{Binding $parent[components:ImageEditor].FontSize}"
														Grid.Row="1"
														Minimum="5.0"
														Maximum="40.0"
														Width="150"/>
											</Grid>
										</Border>
									</Flyout>
								</Button.Flyout>
							</Button>
							<Button Name="LineThicknessButton" Width="40" Height="40"
									Margin="10">
								<Canvas Width="25" Height="21"
										HorizontalAlignment="Center" VerticalAlignment="Center">
									<Line StrokeThickness="0.5"
										  Stroke="Black"
										  StartPoint="0,0"
										  EndPoint="25,0"/>
									<Line StrokeThickness="1"
										  Stroke="Black"
										  StartPoint="0,3"
										  EndPoint="25,3"/>
									<Line StrokeThickness="2"
										  Stroke="Black"
										  StartPoint="0,7"
										  EndPoint="25,7"/>
									<Line StrokeThickness="3"
										  Stroke="Black"
										  StartPoint="0,12.5"
										  EndPoint="25,12.5"/>
									<Line StrokeThickness="5"
										  Stroke="Black"
										  StartPoint="0,19.5"
										  EndPoint="25,19.5"/>
								</Canvas>
								<Button.Flyout>
									<Flyout Placement="Top" VerticalOffset="0">
										<Border>
											<Grid>
												<Grid.RowDefinitions>
													<RowDefinition Height="20"/>
													<RowDefinition Height="Auto"/>
												</Grid.RowDefinitions>
												<Line Grid.Row="0"
													  Margin="20"
													  StartPoint="0,0"
													  EndPoint="150,0"
													  StrokeLineCap="Round"
													  Stroke="Black">
													<Line.StrokeThickness>
														<MultiBinding Converter="{StaticResource Add1Calculator}">
															<Binding Path="$parent[components:ImageEditor].LineThickness"/>
														</MultiBinding>
													</Line.StrokeThickness>
												</Line>
												<Line Grid.Row="0"
													  Margin="20"
													  StartPoint="0,0"
													  EndPoint="150,0"
													  StrokeThickness="{Binding $parent[components:ImageEditor].LineThickness}"
													  StrokeLineCap="Round"
													  Stroke="{Binding $parent[components:ImageEditor].PrimaryBrush}"/>
												<Slider Value="{Binding $parent[components:ImageEditor].LineThickness}"
														Grid.Row="1"
														Minimum="1.0"
														Maximum="30.0"
														Width="150"/>
											</Grid>
										</Border>
									</Flyout>
								</Button.Flyout>
							</Button>
							<Button Name="PrimaryColour" Width="40" Height="40"
									Margin="10">
								<Ellipse Width="25" Height="25"
										 Margin="10"
										 HorizontalAlignment="Center" VerticalAlignment="Center"
										 Fill="{Binding $parent[components:ImageEditor].PrimaryBrush,Converter={x:Static components:ImageEditorTransparentImageBrushConverter.Instance}}"
										 Stroke="Black" StrokeThickness="1"/>
								<Button.Flyout>
									<Flyout Placement="Top" VerticalOffset="0">
										<Border>
											<ColorView Color="{Binding $parent[components:ImageEditor].PrimaryBrush,Converter={x:Static converters:BrushToColorConverter.Instance}}"/>
										</Border>
									</Flyout>
								</Button.Flyout>
							</Button>
							<Button Name="SecondaryColour" Width="40" Height="40"
									Margin="10">
								<Ellipse Width="25" Height="25"
										 Margin="10"
										 HorizontalAlignment="Center" VerticalAlignment="Center"
										 Fill="{Binding $parent[components:ImageEditor].SecondaryBrush,Converter={x:Static components:ImageEditorTransparentImageBrushConverter.Instance}}"
										 Stroke="Black" StrokeThickness="1"/>
								<Button.Flyout>
									<Flyout Placement="Top" VerticalOffset="0">
										<Border>
											<ColorView Color="{Binding $parent[components:ImageEditor].SecondaryBrush,Converter={x:Static converters:BrushToColorConverter.Instance}}"/>
										</Border>
									</Flyout>
								</Button.Flyout>
							</Button>

							<Rectangle Classes="Separator"/>

							<Button Name="UndoButton" Width="40" Height="40"
									Margin="10"
									Command="{Binding $parent[components:ImageEditor].UndoCommand}"
									IsEnabled="False">
								<Canvas Width="25" Height="25">
									<Path Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2">
										<Path.Data>
											<PathGeometry>
												<PathFigure StartPoint="4,9" IsClosed="False">
													<LineSegment Point="10,3"/>
													<ArcSegment Point="18,17" Size="8,8"/>
													<LineSegment Point="11,24"/>
												</PathFigure>
											</PathGeometry>
										</Path.Data>
									</Path>
									<Line StartPoint="4,10" EndPoint="13,10"
										  Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2"
										  StrokeLineCap="Round"/>
									<Line StartPoint="3,10" EndPoint="3,1"
										  Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2"
										  StrokeLineCap="Round"/>
								</Canvas>
							</Button>
							<Button Name="RedoButton" Width="40" Height="40"
									Margin="10"
									Command="{Binding $parent[components:ImageEditor].RedoCommand}"
									IsEnabled="False">
								<Canvas Width="25" Height="25">
									<Path Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2">
										<Path.Data>
											<PathGeometry>
												<PathFigure StartPoint="21,9" IsClosed="False">
													<LineSegment Point="15,3"/>
													<ArcSegment Point="7,17" Size="8,8" SweepDirection="CounterClockwise"/>
													<LineSegment Point="14,24"/>
												</PathFigure>
											</PathGeometry>
										</Path.Data>
									</Path>
									<Line StartPoint="21,10" EndPoint="12,10"
										  Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2"
										  StrokeLineCap="Round"/>
									<Line StartPoint="22,10" EndPoint="22,1"
										  Stroke="{Binding $parent[Button].Foreground}" StrokeThickness="2"
										  StrokeLineCap="Round"/>
								</Canvas>
							</Button>
						</StackPanel>
					</Grid>
				</Border>
			</Border>
		</Grid>
	</Border>
</UserControl>