123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- <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:system="using:System"
- mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
- x:Class="InABox.Avalonia.Components.ImageEditor">
- <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="*"/>
- <RowDefinition Height="Auto"/>
- </Grid.RowDefinitions>
- <Canvas Name="OuterCanvas" Background="White">
- <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="1"
- BoxShadow="0 0 10 Gray"
- IsVisible="{Binding $parent[components:ImageEditor].ShowButtons}">
- <Border ClipToBounds="True"
- Background="White">
- <Border.Styles>
- <Style Selector="Button">
- <Setter Property="Background"
- Value="Transparent"/>
- <Setter Property="ClipToBounds"
- Value="False"/>
- </Style>
- <Style Selector="Button:flyout-open /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>
- </Border.Styles>
- <Grid>
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="*"/>
- <ColumnDefinition Width="Auto"/>
- <ColumnDefinition Width="*"/>
- </Grid.ColumnDefinitions>
- <StackPanel Grid.Column="1" Margin="-10"
- Orientation="Horizontal">
- <StackPanel.Styles>
- <!--
- <Style Selector="FlyoutPresenter">
- <Setter Property="Padding" Value="{StaticResource PrsControlSpacing}"/>
- <Setter Property="CornerRadius" Value="{StaticResource PrsCornerRadius}"/>
- <Setter Property="BorderBrush" Value="Black"/>
- <Setter Property="MinWidth" Value="0"/>
- <Setter Property="Background" Value="White"/>
- </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>
- </StackPanel.Styles>
- <Button Name="ShapeButton"
- Width="40" Height="40"
- Margin="10">
- <Button.Flyout>
- <Flyout Placement="Top" VerticalOffset="0">
- <Border>
- <ItemsControl ItemsSource="{Binding $parent[components:ImageEditor].ModeButtons}">
- <ItemsControl.ItemTemplate>
- <DataTemplate DataType="components:ImageEditorModeButton">
- <Button 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>
- </Border>
- </Flyout>
- </Button.Flyout>
- </Button>
-
- <Rectangle Classes="Separator"/>
-
- <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>
|