diff --git a/src/Wpf.Ui.Gallery/Views/Pages/Media/ImagePage.xaml b/src/Wpf.Ui.Gallery/Views/Pages/Media/ImagePage.xaml index 81d08c29b..887db0bfb 100644 --- a/src/Wpf.Ui.Gallery/Views/Pages/Media/ImagePage.xaml +++ b/src/Wpf.Ui.Gallery/Views/Pages/Media/ImagePage.xaml @@ -11,7 +11,7 @@ Title="ImagePage" d:DataContext="{d:DesignInstance local:ImagePage, IsDesignTimeCreatable=False}" - d:DesignHeight="450" + d:DesignHeight="700" d:DesignWidth="800" ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}" ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}" @@ -42,7 +42,7 @@ Grid.Row="0" Margin="0" CodeText="<Image Height="100" Source="Assets\MyImage.jpg" />" - HeaderText="A basic Image from a local file"> + HeaderText="Standand Image from a local file."> + + + + + + diff --git a/src/Wpf.Ui/Controls/Image.cs b/src/Wpf.Ui/Controls/Image.cs new file mode 100644 index 000000000..6cd0b4475 --- /dev/null +++ b/src/Wpf.Ui/Controls/Image.cs @@ -0,0 +1,126 @@ +// This Source Code Form is subject to the terms of the MIT License. +// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT. +// Copyright (C) Leszek Pomianowski and WPF UI Contributors. +// All Rights Reserved. + +using System; +using System.Windows; +using System.Windows.Controls; +using System.Windows.Media; + +namespace Wpf.Ui.Controls; + +/// +/// Represents an image with additional proproties for Borders and Rounded corners +/// +public class Image : Control +{ + #region DependencyPropreties + /// + /// Gets/Sets the Source on this Image. + /// The Source property is the ImageSource that holds the actual image drawn. + /// + public static readonly DependencyProperty SourceProperty = + DependencyProperty.Register(nameof(Source), typeof(ImageSource), typeof(Image), + new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender, null, null), + null); + + /// + /// DependencyProperty for CornerRadius property. + /// + public static readonly DependencyProperty CornerRadiusProperty = + DependencyProperty.Register(nameof(CornerRadius), typeof(CornerRadius), typeof(Image), new PropertyMetadata(new CornerRadius(0), new PropertyChangedCallback(OnCornerRadiusChanged))); + + /// + /// DependencyProperty for StretchDirection property. + /// + /// + public static readonly DependencyProperty StretchProperty = DependencyProperty.Register( + nameof(Stretch), typeof(Stretch), typeof(Image), new FrameworkPropertyMetadata(Stretch.Uniform, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender), null); + + /// + /// DependencyProperty for Stretch property. + /// + public static readonly DependencyProperty StretchDirectionProperty = DependencyProperty.Register( + nameof(StretchDirection), typeof(StretchDirection), typeof(Image), new FrameworkPropertyMetadata(StretchDirection.Both, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender), null); + + /// + /// DependencyPropertyKey for InnerCornerRadius property. + /// + public static readonly DependencyPropertyKey InnerCornerRadiusPropertyKey = DependencyProperty.RegisterReadOnly( + nameof(InnerCornerRadius), typeof(CornerRadius), typeof(Image), new PropertyMetadata(new CornerRadius(0))); + + /// + /// DependencyProperty for InnerCornerRadius property. + /// + public static readonly DependencyProperty InnerCornerRadiusProperty = + InnerCornerRadiusPropertyKey.DependencyProperty; + #endregion + + #region Propreties + /// + /// Gets/Sets the Source on this Image. + /// The Source property is the ImageSource that holds the actual image drawn. + /// + public ImageSource Source + { + get => (ImageSource)GetValue(SourceProperty); + set => SetValue(SourceProperty, value); + } + + /// + /// Gets/Sets the Stretch on this Image. + /// The Stretch property determines how large the Image will be drawn. + /// + public Stretch Stretch + { + get => (Stretch)GetValue(StretchProperty); + set => SetValue(StretchProperty, value); + } + + /// + /// Gets/Sets the stretch direction of the Viewbox, which determines the restrictions on + /// scaling that are applied to the content inside the Viewbox. For instance, this property + /// can be used to prevent the content from being smaller than its native size or larger than + /// its native size. + /// + public StretchDirection StretchDirection + { + get => (StretchDirection)GetValue(StretchDirectionProperty); + set => SetValue(StretchDirectionProperty, value); + } + + /// + /// The CornerRadius property allows users to control the roundness of the corners independently by + /// setting a radius value for each corner. Radius values that are too large are scaled so that they + /// smoothly blend from corner to corner. + /// + public CornerRadius CornerRadius + { + get => (CornerRadius)GetValue(CornerRadiusProperty); + set => SetValue(CornerRadiusProperty, value); + } + + /// + /// The CornerRadius for the inner image's Mask. + /// + internal CornerRadius InnerCornerRadius => (CornerRadius)GetValue(InnerCornerRadiusProperty); + #endregion + + #region Methods + private static void OnCornerRadiusChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) + { + var thickness = (Thickness)d.GetValue(BorderThicknessProperty); + var outerRarius = (CornerRadius)e.NewValue; + + //Inner radius = Outer radius - thickenss/2 + d.SetValue(InnerCornerRadiusPropertyKey, + new CornerRadius( + topLeft: Math.Max(0, (int)Math.Round(outerRarius.TopLeft - thickness.Left / 2, 0)), + topRight: Math.Max(0, (int)Math.Round(outerRarius.TopRight - thickness.Top / 2, 0)), + bottomRight: Math.Max(0, (int)Math.Round(outerRarius.BottomRight - thickness.Right / 2, 0)), + bottomLeft: Math.Max(0, (int)Math.Round(outerRarius.BottomLeft - thickness.Bottom / 2, 0))) + ); + } + #endregion +} diff --git a/src/Wpf.Ui/Styles/Controls/Image.xaml b/src/Wpf.Ui/Styles/Controls/Image.xaml new file mode 100644 index 000000000..63e261682 --- /dev/null +++ b/src/Wpf.Ui/Styles/Controls/Image.xaml @@ -0,0 +1,48 @@ + + + + + +