dan/Toolkit2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update cropping UI

Browse Source
This commit is contained in:
TheXamlGuy
2024-10-11 09:35:28 +01:00
parent cf53327142
commit 11c81cc247
2 changed files with 65 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Toolkit.UI.Controls.Avalonia/ContentCropper/ContentCropper.axaml
+41 -54
View File
@@ -4,64 +4,43 @@
xmlns:controls="using:Toolkit.UI.Controls.Avalonia"> xmlns:controls="using:Toolkit.UI.Controls.Avalonia">
<ResourceDictionary.ThemeDictionaries> <ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light"> <ResourceDictionary x:Key="Light">
<StaticResource x:Key="ContentCropperThumbBackground" ResourceKey="AccentFillColorDefaultBrush" />
<StaticResource x:Key="ContentCropperThumbBrush" ResourceKey="ControlElevationBorderBrush" />
<StaticResource x:Key="ContentCropperOuterThumbBackground" ResourceKey="ControlSolidFillColorDefaultBrush" /> <StaticResource x:Key="ContentCropperOverlayBrush" ResourceKey="SmokeFillColorDefaultBrush" />
<StaticResource x:Key="ContentCropperInnerBorderBrush" ResourceKey="FocusStrokeColorOuter" />
</ResourceDictionary> </ResourceDictionary>
<ResourceDictionary x:Key="Dark"> <ResourceDictionary x:Key="Dark">
<StaticResource x:Key="ContentCropperThumbBackground" ResourceKey="AccentFillColorDefaultBrush" />
<StaticResource x:Key="ContentCropperThumbBrush" ResourceKey="ControlElevationBorderBrush" />
<StaticResource x:Key="ContentCropperOuterThumbBackground" ResourceKey="ControlSolidFillColorDefaultBrush" /> <StaticResource x:Key="ContentCropperOuterThumbBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
<StaticResource x:Key="ContentCropperOverlayBrush" ResourceKey="SmokeFillColorDefaultBrush" />
<StaticResource x:Key="ContentCropperInnerBorderBrush" ResourceKey="FocusStrokeColorOuter" />
</ResourceDictionary> </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries> </ResourceDictionary.ThemeDictionaries>
<CornerRadius x:Key="ContentCropperThumbCornerRadius">10</CornerRadius>
<x:Double x:Key="ContentCropperInnerThumbWidth">12</x:Double>
<x:Double x:Key="ContentCropperInnerThumbHeight">12</x:Double>
<x:Double x:Key="ContentCropperThumbWidth">18</x:Double> <x:Double x:Key="ContentCropperThumbWidth">18</x:Double>
<x:Double x:Key="ContentCropperThumbHeight">18</x:Double> <x:Double x:Key="ContentCropperThumbHeight">18</x:Double>
<Thickness x:Key="ContentCropperTopLeftThumbBorderThickness">3,3,0,0</Thickness>
<Thickness x:Key="ContentCropperTopRightThumbBorderThickness">0,3,3,0</Thickness>
<Thickness x:Key="ContentCropperBottomRightThumbBorderThickness">0,0,3,3</Thickness>
<Thickness x:Key="ContentCropperBottomLeftThumbBorderThickness">3,0,0,3</Thickness>
<ControlTheme x:Key="ContentCropperThumbStyle" TargetType="Thumb"> <ControlTheme x:Key="ContentCropperThumbStyle" TargetType="Thumb">
<Setter Property="BorderThickness" Value="1" /> <Setter Property="BorderBrush" Value="{DynamicResource ContentCropperInnerBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ContentCropperThumbBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ContentCropperThumbBrush}" />
<Setter Property="ClipToBounds" Value="False" /> <Setter Property="ClipToBounds" Value="False" />
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate> <ControlTemplate>
<Border <Border
Margin="-2" Background="Transparent"
Background="{DynamicResource ContentCropperOuterThumbBackground}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}" />
CornerRadius="{DynamicResource ContentCropperOuterThumbCornerRadius}">
<Ellipse
Name="InnerThumb"
Width="{DynamicResource ContentCropperInnerThumbWidth}"
Height="{DynamicResource ContentCropperInnerThumbHeight}"
Fill="{TemplateBinding Background}"
RenderTransform="scaleX(0.86) scaleY(0.86)">
<Ellipse.Transitions>
<Transitions>
<TransformOperationsTransition
Easing="0,0 0,1"
Property="RenderTransform"
Duration="00:00:00.167" />
</Transitions>
</Ellipse.Transitions>
</Ellipse>
</Border>
</ControlTemplate> </ControlTemplate>
</Setter.Value> </Setter.Value>
</Setter> </Setter>
<Style Selector="^:pointerover /template/ Ellipse#InnerThumb">
<Setter Property="RenderTransform" Value="scaleX(1.167) scaleY(1.167)" />
</Style>
<Style Selector="^:pressed /template/ Ellipse#InnerThumb">
<Setter Property="RenderTransform" Value="scaleX(0.71) scaleY(0.71)" />
</Style>
<Style Selector="^:disabled /template/ Ellipse#InnerThumb">
<Setter Property="RenderTransform" Value="scaleX(1.167) scaleY(1.167)" />
</Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="{x:Type ContentCropper}" TargetType="ContentCropper"> <ControlTheme x:Key="{x:Type ContentCropper}" TargetType="ContentCropper">
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
@@ -79,45 +58,53 @@
<Canvas x:Name="Canvas"> <Canvas x:Name="Canvas">
<Rectangle <Rectangle
x:Name="RectangleLeft" x:Name="RectangleLeft"
Fill="{DynamicResource SmokeFillColorDefaultBrush}" Fill="{DynamicResource ContentCropperOverlayBrush}"
UseLayoutRounding="True" /> UseLayoutRounding="True" />
<Rectangle <Rectangle
x:Name="RectangleTop" x:Name="RectangleTop"
Fill="{DynamicResource SmokeFillColorDefaultBrush}" Fill="{DynamicResource ContentCropperOverlayBrush}"
UseLayoutRounding="True" /> UseLayoutRounding="True" />
<Rectangle <Rectangle
x:Name="RectangleRight" x:Name="RectangleRight"
Fill="{DynamicResource SmokeFillColorDefaultBrush}" Fill="{DynamicResource ContentCropperOverlayBrush}"
UseLayoutRounding="True" /> UseLayoutRounding="True" />
<Rectangle <Rectangle
x:Name="RectangleBottom" x:Name="RectangleBottom"
Fill="{DynamicResource SmokeFillColorDefaultBrush}" Fill="{DynamicResource ContentCropperOverlayBrush}"
UseLayoutRounding="True" /> UseLayoutRounding="True" />
<Border <Border
x:Name="Border" x:Name="Border"
Background="Transparent" Background="Transparent"
BorderBrush="Transparent" BorderBrush="{DynamicResource ContentCropperInnerBorderBrush}"
BorderThickness="2" BorderThickness="1"
Cursor="SizeAll" /> Cursor="SizeAll" />
<Thumb <Thumb
x:Name="TopLeftButton" x:Name="TopLeftButton"
Width="{DynamicResource ContentCropperThumbWidth}" Width="{StaticResource ContentCropperThumbWidth}"
Height="{DynamicResource ContentCropperThumbHeight}" Height="{StaticResource ContentCropperThumbHeight}"
BorderThickness="{StaticResource ContentCropperTopLeftThumbBorderThickness}"
Cursor="TopLeftCorner"
Theme="{StaticResource ContentCropperThumbStyle}" /> Theme="{StaticResource ContentCropperThumbStyle}" />
<Thumb <Thumb
x:Name="TopRightButton" x:Name="TopRightButton"
Width="{DynamicResource ContentCropperThumbWidth}" Width="{StaticResource ContentCropperThumbWidth}"
Height="{DynamicResource ContentCropperThumbHeight}" Height="{StaticResource ContentCropperThumbHeight}"
BorderThickness="{StaticResource ContentCropperTopRightThumbBorderThickness}"
Cursor="TopRightCorner"
Theme="{StaticResource ContentCropperThumbStyle}" /> Theme="{StaticResource ContentCropperThumbStyle}" />
<Thumb <Thumb
x:Name="BottomLeftButton" x:Name="BottomLeftButton"
Width="{DynamicResource ContentCropperThumbWidth}" Width="{StaticResource ContentCropperThumbWidth}"
Height="{DynamicResource ContentCropperThumbHeight}" Height="{StaticResource ContentCropperThumbHeight}"
BorderThickness="{StaticResource ContentCropperBottomLeftThumbBorderThickness}"
Cursor="BottomLeftCorner"
Theme="{StaticResource ContentCropperThumbStyle}" /> Theme="{StaticResource ContentCropperThumbStyle}" />
<Thumb <Thumb
x:Name="BottomRightButton" x:Name="BottomRightButton"
Width="{DynamicResource ContentCropperThumbWidth}" Width="{StaticResource ContentCropperThumbWidth}"
Height="{DynamicResource ContentCropperThumbHeight}" Height="{StaticResource ContentCropperThumbHeight}"
BorderThickness="{StaticResource ContentCropperBottomRightThumbBorderThickness}"
Cursor="BottomRightCorner"
Theme="{StaticResource ContentCropperThumbStyle}" /> Theme="{StaticResource ContentCropperThumbStyle}" />
</Canvas> </Canvas>
</Grid> </Grid>
Toolkit.UI.Controls.Avalonia/ContentCropper/ContentCropper.cs
+24 -12
View File
@@ -251,20 +251,32 @@ public class ContentCropper : ContentControl
case "TopLeftButton": case "TopLeftButton":
newWidth = Math.Max(0, border.Width - deltaX); newWidth = Math.Max(0, border.Width - deltaX);
newHeight = Math.Max(0, border.Height - deltaY); newHeight = Math.Max(0, border.Height - deltaY);
if (newWidth > 0) leftPosition += deltaX; if (newWidth > 0)
if (newHeight > 0) topPosition += deltaY; {
leftPosition += deltaX;
}
if (newHeight > 0)
{
topPosition += deltaY;
}
break; break;
case "TopRightButton": case "TopRightButton":
newWidth = Math.Max(0, border.Width + deltaX); newWidth = Math.Max(0, border.Width + deltaX);
newHeight = Math.Max(0, border.Height - deltaY); newHeight = Math.Max(0, border.Height - deltaY);
if (newHeight > 0) topPosition += deltaY; if (newHeight > 0)
{
topPosition += deltaY;
}
break; break;
case "BottomLeftButton": case "BottomLeftButton":
newWidth = Math.Max(0, border.Width - deltaX); newWidth = Math.Max(0, border.Width - deltaX);
newHeight = Math.Max(0, border.Height + deltaY); newHeight = Math.Max(0, border.Height + deltaY);
if (newWidth > 0) leftPosition += deltaX; if (newWidth > 0)
{
leftPosition += deltaX;
}
break; break;
case "BottomRightButton": case "BottomRightButton":
@@ -301,26 +313,26 @@ public class ContentCropper : ContentControl
if (topLeftButton is not null) if (topLeftButton is not null)
{ {
Canvas.SetLeft(topLeftButton, borderLeft - (topLeftButton.Width / 2)); Canvas.SetLeft(topLeftButton, borderLeft);
Canvas.SetTop(topLeftButton, borderTop - (topLeftButton.Height / 2)); Canvas.SetTop(topLeftButton, borderTop);
} }
if (topRightButton is not null) if (topRightButton is not null)
{ {
Canvas.SetLeft(topRightButton, borderLeft + borderWidth - (topRightButton.Width / 2)); Canvas.SetLeft(topRightButton, borderLeft + borderWidth - topRightButton.Width);
Canvas.SetTop(topRightButton, borderTop - (topRightButton.Height / 2)); Canvas.SetTop(topRightButton, borderTop);
} }
if (bottomLeftButton is not null) if (bottomLeftButton is not null)
{ {
Canvas.SetLeft(bottomLeftButton, borderLeft - (bottomLeftButton.Width / 2)); Canvas.SetLeft(bottomLeftButton, borderLeft);
Canvas.SetTop(bottomLeftButton, borderTop + borderHeight - (bottomLeftButton.Height / 2)); Canvas.SetTop(bottomLeftButton, borderTop + borderHeight - bottomLeftButton.Height);
} }
if (bottomRightButton is not null) if (bottomRightButton is not null)
{ {
Canvas.SetLeft(bottomRightButton, borderLeft + borderWidth - (bottomRightButton.Width / 2)); Canvas.SetLeft(bottomRightButton, borderLeft + borderWidth - bottomRightButton.Width);
Canvas.SetTop(bottomRightButton, borderTop + borderHeight - (bottomRightButton.Height / 2)); Canvas.SetTop(bottomRightButton, borderTop + borderHeight - bottomRightButton.Height);
} }
} }