-
-
Notifications
You must be signed in to change notification settings - Fork 738
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Image Control #517
Merged
Merged
Image Control #517
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
8b2ec34
Implemented ui:Image
Aybex d1cae50
Merge branch 'development' of https://github.com/Aybex/wpfui into dev…
Aybex 64f0c09
Added doc and liscense
Aybex d4c6cc9
Added Background
Aybex 1f855a8
Updated Gallery to ui:Image
Aybex 030e025
Adding original Image example in Gallery
Aybex File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
|
|
||
| /// <summary> | ||
| /// Represents an image with additional proproties for Borders and Rounded corners | ||
| /// </summary> | ||
| public class Image : Control | ||
| { | ||
| #region DependencyPropreties | ||
| /// <summary> | ||
| /// Gets/Sets the Source on this Image. | ||
| /// The Source property is the ImageSource that holds the actual image drawn. | ||
| /// </summary> | ||
| public static readonly DependencyProperty SourceProperty = | ||
| DependencyProperty.Register(nameof(Source), typeof(ImageSource), typeof(Image), | ||
| new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender, null, null), | ||
| null); | ||
|
|
||
| /// <summary> | ||
| /// DependencyProperty for CornerRadius property. | ||
| /// </summary> | ||
| public static readonly DependencyProperty CornerRadiusProperty = | ||
| DependencyProperty.Register(nameof(CornerRadius), typeof(CornerRadius), typeof(Image), new PropertyMetadata(new CornerRadius(0), new PropertyChangedCallback(OnCornerRadiusChanged))); | ||
|
|
||
| /// <summary> | ||
| /// DependencyProperty for StretchDirection property. | ||
| /// </summary> | ||
| /// <seealso cref="Viewbox.Stretch" /> | ||
| public static readonly DependencyProperty StretchProperty = DependencyProperty.Register( | ||
| nameof(Stretch), typeof(Stretch), typeof(Image), new FrameworkPropertyMetadata(Stretch.Uniform, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender), null); | ||
|
|
||
| /// <summary> | ||
| /// DependencyProperty for Stretch property. | ||
| /// </summary> | ||
| public static readonly DependencyProperty StretchDirectionProperty = DependencyProperty.Register( | ||
| nameof(StretchDirection), typeof(StretchDirection), typeof(Image), new FrameworkPropertyMetadata(StretchDirection.Both, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender), null); | ||
|
|
||
| /// <summary> | ||
| /// DependencyPropertyKey for InnerCornerRadius property. | ||
| /// </summary> | ||
| public static readonly DependencyPropertyKey InnerCornerRadiusPropertyKey = DependencyProperty.RegisterReadOnly( | ||
| nameof(InnerCornerRadius), typeof(CornerRadius), typeof(Image), new PropertyMetadata(new CornerRadius(0))); | ||
|
|
||
| /// <summary> | ||
| /// DependencyProperty for InnerCornerRadius property. | ||
| /// </summary> | ||
| public static readonly DependencyProperty InnerCornerRadiusProperty = | ||
| InnerCornerRadiusPropertyKey.DependencyProperty; | ||
| #endregion | ||
|
|
||
| #region Propreties | ||
| /// <summary> | ||
| /// Gets/Sets the Source on this Image. | ||
| /// The Source property is the ImageSource that holds the actual image drawn. | ||
| /// </summary> | ||
| public ImageSource Source | ||
| { | ||
| get => (ImageSource)GetValue(SourceProperty); | ||
| set => SetValue(SourceProperty, value); | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Gets/Sets the Stretch on this Image. | ||
| /// The Stretch property determines how large the Image will be drawn. | ||
| /// </summary> | ||
| public Stretch Stretch | ||
| { | ||
| get => (Stretch)GetValue(StretchProperty); | ||
| set => SetValue(StretchProperty, value); | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// 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. | ||
| /// </summary> | ||
| public StretchDirection StretchDirection | ||
| { | ||
| get => (StretchDirection)GetValue(StretchDirectionProperty); | ||
| set => SetValue(StretchDirectionProperty, value); | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// 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. | ||
| /// </summary> | ||
| public CornerRadius CornerRadius | ||
| { | ||
| get => (CornerRadius)GetValue(CornerRadiusProperty); | ||
| set => SetValue(CornerRadiusProperty, value); | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// The CornerRadius for the inner image's Mask. | ||
| /// </summary> | ||
| 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 | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!-- | ||
| 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. | ||
|
|
||
| Based on Microsoft XAML for Win UI | ||
| Copyright (c) Microsoft Corporation. All Rights Reserved. | ||
| --> | ||
|
|
||
| <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:controls="clr-namespace:Wpf.Ui.Controls"> | ||
| <Style x:Key="DefaultImageStyle" TargetType="{x:Type controls:Image}"> | ||
| <Setter Property="Template"> | ||
| <Setter.Value> | ||
| <ControlTemplate TargetType="{x:Type controls:Image}"> | ||
| <Border VerticalAlignment="Center" HorizontalAlignment="Center" | ||
| BorderThickness="{TemplateBinding BorderThickness}" | ||
| BorderBrush="{TemplateBinding BorderBrush}" | ||
| CornerRadius="{TemplateBinding CornerRadius}" | ||
| Background="{TemplateBinding Background}" | ||
| ClipToBounds="True"> | ||
|
|
||
| <Image Source="{TemplateBinding Source}" | ||
| VerticalAlignment="Center" | ||
| HorizontalAlignment="Center" | ||
| Stretch="{TemplateBinding Stretch}" | ||
| StretchDirection="{TemplateBinding StretchDirection}"> | ||
| <Image.OpacityMask> | ||
| <VisualBrush> | ||
| <VisualBrush.Visual> | ||
| <Border Height="{TemplateBinding ActualHeight}" | ||
| Width="{TemplateBinding ActualWidth}" | ||
| Background="White" | ||
| CornerRadius="{TemplateBinding InnerCornerRadius}" /> | ||
| </VisualBrush.Visual> | ||
| </VisualBrush> | ||
| </Image.OpacityMask> | ||
| </Image> | ||
| </Border> | ||
| </ControlTemplate> | ||
| </Setter.Value> | ||
| </Setter> | ||
| </Style> | ||
|
|
||
| <Style BasedOn="{StaticResource DefaultImageStyle}" TargetType="{x:Type controls:Image}" /> | ||
| </ResourceDictionary> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd recommend leaving the default
Imageand adding a second one below,ui:Image, to show that there is a choice.