Update cropping UI
This commit is contained in:
TheXamlGuy
@@ -4,64 +4,43 @@
|
||||
xmlns:controls="using:Toolkit.UI.Controls.Avalonia">
|
||||
<ResourceDictionary.ThemeDictionaries>
|
||||
<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 x:Key="Dark">
|
||||
<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.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="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">
|
||||
<Setter Property="BorderThickness" Value="1" />
|
||||
<Setter Property="Background" Value="{DynamicResource ContentCropperThumbBackground}" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource ContentCropperThumbBrush}" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource ContentCropperInnerBorderBrush}" />
|
||||
<Setter Property="ClipToBounds" Value="False" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate>
|
||||
<Border
|
||||
Margin="-2"
|
||||
Background="{DynamicResource ContentCropperOuterThumbBackground}"
|
||||
Background="Transparent"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
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>
|
||||
BorderThickness="{TemplateBinding BorderThickness}" />
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</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 x:Key="{x:Type ContentCropper}" TargetType="ContentCropper">
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate>
|
||||
@@ -79,45 +58,53 @@
|
||||
<Canvas x:Name="Canvas">
|
||||
<Rectangle
|
||||
x:Name="RectangleLeft"
|
||||
Fill="{DynamicResource SmokeFillColorDefaultBrush}"
|
||||
Fill="{DynamicResource ContentCropperOverlayBrush}"
|
||||
UseLayoutRounding="True" />
|
||||
<Rectangle
|
||||
x:Name="RectangleTop"
|
||||
Fill="{DynamicResource SmokeFillColorDefaultBrush}"
|
||||
Fill="{DynamicResource ContentCropperOverlayBrush}"
|
||||
UseLayoutRounding="True" />
|
||||
<Rectangle
|
||||
x:Name="RectangleRight"
|
||||
Fill="{DynamicResource SmokeFillColorDefaultBrush}"
|
||||
Fill="{DynamicResource ContentCropperOverlayBrush}"
|
||||
UseLayoutRounding="True" />
|
||||
<Rectangle
|
||||
x:Name="RectangleBottom"
|
||||
Fill="{DynamicResource SmokeFillColorDefaultBrush}"
|
||||
Fill="{DynamicResource ContentCropperOverlayBrush}"
|
||||
UseLayoutRounding="True" />
|
||||
<Border
|
||||
x:Name="Border"
|
||||
Background="Transparent"
|
||||
BorderBrush="Transparent"
|
||||
BorderThickness="2"
|
||||
BorderBrush="{DynamicResource ContentCropperInnerBorderBrush}"
|
||||
BorderThickness="1"
|
||||
Cursor="SizeAll" />
|
||||
<Thumb
|
||||
x:Name="TopLeftButton"
|
||||
Width="{DynamicResource ContentCropperThumbWidth}"
|
||||
Height="{DynamicResource ContentCropperThumbHeight}"
|
||||
Width="{StaticResource ContentCropperThumbWidth}"
|
||||
Height="{StaticResource ContentCropperThumbHeight}"
|
||||
BorderThickness="{StaticResource ContentCropperTopLeftThumbBorderThickness}"
|
||||
Cursor="TopLeftCorner"
|
||||
Theme="{StaticResource ContentCropperThumbStyle}" />
|
||||
<Thumb
|
||||
x:Name="TopRightButton"
|
||||
Width="{DynamicResource ContentCropperThumbWidth}"
|
||||
Height="{DynamicResource ContentCropperThumbHeight}"
|
||||
Width="{StaticResource ContentCropperThumbWidth}"
|
||||
Height="{StaticResource ContentCropperThumbHeight}"
|
||||
BorderThickness="{StaticResource ContentCropperTopRightThumbBorderThickness}"
|
||||
Cursor="TopRightCorner"
|
||||
Theme="{StaticResource ContentCropperThumbStyle}" />
|
||||
<Thumb
|
||||
x:Name="BottomLeftButton"
|
||||
Width="{DynamicResource ContentCropperThumbWidth}"
|
||||
Height="{DynamicResource ContentCropperThumbHeight}"
|
||||
Width="{StaticResource ContentCropperThumbWidth}"
|
||||
Height="{StaticResource ContentCropperThumbHeight}"
|
||||
BorderThickness="{StaticResource ContentCropperBottomLeftThumbBorderThickness}"
|
||||
Cursor="BottomLeftCorner"
|
||||
Theme="{StaticResource ContentCropperThumbStyle}" />
|
||||
<Thumb
|
||||
x:Name="BottomRightButton"
|
||||
Width="{DynamicResource ContentCropperThumbWidth}"
|
||||
Height="{DynamicResource ContentCropperThumbHeight}"
|
||||
Width="{StaticResource ContentCropperThumbWidth}"
|
||||
Height="{StaticResource ContentCropperThumbHeight}"
|
||||
BorderThickness="{StaticResource ContentCropperBottomRightThumbBorderThickness}"
|
||||
Cursor="BottomRightCorner"
|
||||
Theme="{StaticResource ContentCropperThumbStyle}" />
|
||||
</Canvas>
|
||||
</Grid>
|
||||
|
||||
@@ -251,20 +251,32 @@ public class ContentCropper : ContentControl
|
||||
case "TopLeftButton":
|
||||
newWidth = Math.Max(0, border.Width - deltaX);
|
||||
newHeight = Math.Max(0, border.Height - deltaY);
|
||||
if (newWidth > 0) leftPosition += deltaX;
|
||||
if (newHeight > 0) topPosition += deltaY;
|
||||
if (newWidth > 0)
|
||||
{
|
||||
leftPosition += deltaX;
|
||||
}
|
||||
if (newHeight > 0)
|
||||
{
|
||||
topPosition += deltaY;
|
||||
}
|
||||
break;
|
||||
|
||||
case "TopRightButton":
|
||||
newWidth = Math.Max(0, border.Width + deltaX);
|
||||
newHeight = Math.Max(0, border.Height - deltaY);
|
||||
if (newHeight > 0) topPosition += deltaY;
|
||||
if (newHeight > 0)
|
||||
{
|
||||
topPosition += deltaY;
|
||||
}
|
||||
break;
|
||||
|
||||
case "BottomLeftButton":
|
||||
newWidth = Math.Max(0, border.Width - deltaX);
|
||||
newHeight = Math.Max(0, border.Height + deltaY);
|
||||
if (newWidth > 0) leftPosition += deltaX;
|
||||
if (newWidth > 0)
|
||||
{
|
||||
leftPosition += deltaX;
|
||||
}
|
||||
break;
|
||||
|
||||
case "BottomRightButton":
|
||||
@@ -301,26 +313,26 @@ public class ContentCropper : ContentControl
|
||||
|
||||
if (topLeftButton is not null)
|
||||
{
|
||||
Canvas.SetLeft(topLeftButton, borderLeft - (topLeftButton.Width / 2));
|
||||
Canvas.SetTop(topLeftButton, borderTop - (topLeftButton.Height / 2));
|
||||
Canvas.SetLeft(topLeftButton, borderLeft);
|
||||
Canvas.SetTop(topLeftButton, borderTop);
|
||||
}
|
||||
|
||||
if (topRightButton is not null)
|
||||
{
|
||||
Canvas.SetLeft(topRightButton, borderLeft + borderWidth - (topRightButton.Width / 2));
|
||||
Canvas.SetTop(topRightButton, borderTop - (topRightButton.Height / 2));
|
||||
Canvas.SetLeft(topRightButton, borderLeft + borderWidth - topRightButton.Width);
|
||||
Canvas.SetTop(topRightButton, borderTop);
|
||||
}
|
||||
|
||||
if (bottomLeftButton is not null)
|
||||
{
|
||||
Canvas.SetLeft(bottomLeftButton, borderLeft - (bottomLeftButton.Width / 2));
|
||||
Canvas.SetTop(bottomLeftButton, borderTop + borderHeight - (bottomLeftButton.Height / 2));
|
||||
Canvas.SetLeft(bottomLeftButton, borderLeft);
|
||||
Canvas.SetTop(bottomLeftButton, borderTop + borderHeight - bottomLeftButton.Height);
|
||||
}
|
||||
|
||||
if (bottomRightButton is not null)
|
||||
{
|
||||
Canvas.SetLeft(bottomRightButton, borderLeft + borderWidth - (bottomRightButton.Width / 2));
|
||||
Canvas.SetTop(bottomRightButton, borderTop + borderHeight - (bottomRightButton.Height / 2));
|
||||
Canvas.SetLeft(bottomRightButton, borderLeft + borderWidth - bottomRightButton.Width);
|
||||
Canvas.SetTop(bottomRightButton, borderTop + borderHeight - bottomRightButton.Height);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user