diff --git a/README.md b/README.md index 21190df..5c97a9f 100644 --- a/README.md +++ b/README.md @@ -1,204 +1,26 @@ ## Radial Menu -A Radial Menu for Windows UWP Applications, as made popular by the first versions of the modern OneNote App for Windows. Create radial menus floating op top of your application. The control supports variable numbers of buttons, toggle & radio buttons, a selector for long lists, and a fancy metered menu for intuitive selection of numbers. +A Radial Menu for Windows UWP Applications, as made popular by the first versions of the modern OneNote App for Windows. Create radial menus floating op top of your application. The control supports variable numbers of buttons, toggle & radio buttons, a selector for long lists, and a fancy metered +menu for intuitive selection of numbers. -!['Fancy GIF showing the control'](http://im.ezgif.com/tmp/ezgif-2737883079.gif) +!['Fancy GIF showing the control'](https://github.com/CatalystCode/radial-menu/blob/CaseStudyDemo/gif.gif) -## Usage -At the core, this control comes with three user controls: The first one is a "floating" control, enabling a child control to float on top of all other elements, which allows the user to move the control around on the screen. The second one is the RadialMenuControl itself, which is able to house a number of RadialMenuButtons. Should a button contain a submenu, the button then houses a RadialMenuControl - and so on. You can have a virtually unlimited number of submenus. +## Installation -#### Adding the Control -You can instantiate the control either using XAML or in code-behind. In both cases, buttons are added by adding instances of `RadialMenuButton` to the `Buttons` property of your radial menu. +Install this component via nuget by doing: -```c# - - - - - - - - - ``` - -## Scenarios & Use cases -Below are write-ups of how to achieve various scenarios - the control is pretty powerful and flexible, so cramming all variations and options into one demo wouldn't have been less useful. - -### Seamless Background -If you give RadialMenuButtons the same background color, you may have noticed that Windows will render a 1px thick seam between the individual buttons. Those seams show up when shapes fight for the same pixel. - -To get around this issue, you can set the option `HasBackgroundEllipse` on the `RadialMenu` to `true`. In that mode, the menu will render a full ellipse behind your whole control. Since the ellipse is one shape, no seams will be visible. Obviously, for the ellipse to function as background, you will need to set the `InnerNormalColor` of your menu and your buttons to a near invisible color (we recommend `#02FFFFFF`). - -```c# - -``` - -### Access Keys -The control comes with a number of helper properties to enable access key behaviour. To ensure that the control doesn't mess with your application, it does not access any global properties, meaning that you will have capture `KeyDown` events yourself. The good news: Helper methods on the control make enabling access keys really easy. - -To implement access keys, start with the RadialMenuButtons: Give your buttons two properties each, `InnerAccessKey` and `OuterAccessKey` (for instance `M` and `P`). To show little tooltips with the access key, call `ShowAccessKeyTooltips()` on the RadialMenu. To hide them, call `HideAccessKeyTooltips()`. In order to programmatically click either the inner or the outer portion of a RadialMenuButton, call `ClickInnerRadialMenuButton(RadialMenuButton)` or `ClickOuterRadialMenuButton(RadialMenuButton)`, To wire this all up in your application, consult the following example code: - -Add a RadialMenuButton to your RadialMenu, passing in access keys: - -```c# - -``` - -Then, wire up a KeyDown handler for your application. Depending on the key, we either display the little tooltips - or programmatically perform actions on buttons. -```c# -private void MyApp_KeyUp(CoreWindow sender, KeyEventArgs args) -{ - switch (args.VirtualKey) - { - case VirtualKey.Shift: - MyRadialMenu.HideAccessKeyTooltips(); - break; - case VirtualKey.P: - MyRadialMenu.ClickInnerRadialMenuButton(Pan); - break; - case VirtualKey.O: - MyRadialMenu.ClickOuterRadialMenuButton(Pan); - break; - }; -} +PM> Install-Package RadialMenuControl ``` -As soon as the user lifts the `Shift` key again, we hide the tooltips: -```c# -private void Melbourne_KeyDown(CoreWindow sender, KeyEventArgs args) -{ - if (args.VirtualKey == VirtualKey.Shift) MyRadialMenu.HideAccessKeyTooltips(); -} -``` - -### Adding a Third Arc to Buttons -Let's assume you don't like the buttons we gave you - and you'd rather have buttons with a third arc (right now, you have an inner and an outer arc). Scenarios like that aren't configurable with the current code, but easy to implement yourself. You will have to touch two classes: `RadialMenuButton`, which is the control you use from your application, and `PieSlice`, which is the class we instantiate using a given button. - -##### Add A Third Arc to the RadialMenuButton -In `RadialMenuButton.xaml.cs`, go and find all the dependency properties that impact the inner arc - and merely copy those, slightly changing the name. In this example, we're using `MoreInner` instead of `Inner`. Add the following dependency properties to `RadialMenuButton.xaml.cs`: - -``` -// More Inner Arc Colors -public static readonly DependencyProperty MoreInnerNormalColorProperty = - DependencyProperty.Register("MoreInnerNormalColor", typeof(Color?), typeof(RadialMenuButton), null); - -public static readonly DependencyProperty MoreInnerHoverColorProperty = - DependencyProperty.Register("MoreInnerHoverColor", typeof(Color?), typeof(RadialMenuButton), null); +Or add it to your project directly by searching for `RadialMenuControl` in Nuget Package Manager for Visual Studio. -public static readonly DependencyProperty MoreInnerTappedColorProperty = - DependencyProperty.Register("MoreInnerTappedColor", typeof(Color?), typeof(RadialMenuButton), null); +## Documentation -public static readonly DependencyProperty MoreInnerReleasedColorProperty = - DependencyProperty.Register("MoreInnerReleasedColor", typeof(Color?), typeof(RadialMenuButton), null); - -/// -/// Hover color for the inner portion of the button -/// -public Color? MoreInnerHoverColor -{ - get { return (Color?)GetValue(MoreInnerHoverColorProperty); } - set { SetValue(MoreInnerHoverColorProperty, value); } -} - -/// -/// Normal color for the inner portion of the button -/// -public Color? MoreInnerNormalColor -{ - get { return (Color?)GetValue(MoreInnerNormalColorProperty); } - set { SetValue(MoreInnerNormalColorProperty, value); } -} - -/// -/// Tapped color for the inner portion of the button -/// -public Color? MoreInnerTappedColor -{ - get { return (Color?)GetValue(MoreInnerTappedColorProperty); } - set { SetValue(MoreInnerTappedColorProperty, value); } -} - -/// -/// Released color for the inner portion of the button -/// -public Color? MoreInnerReleasedColor -{ - get { return (Color?)GetValue(MoreInnerReleasedColorProperty); } - set { SetValue(MoreInnerReleasedColorProperty, value); } -} -``` +Want to learn how to place this control into your application? It's pretty easy to do - just head over to our [documentation wiki](https://github.com/CatalystCode/radial-menu/wiki) to find out how! -Next, we need to add an event handler & delegate for the `Pressed` event - in case you want to somehow handle that the more inner arc has been pressed. - -```c# -public delegate void MoreInnerArcPressedEventHandler(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e); -/// -/// Invoked when the inner arc of the button has been pressed (mouse, touch, stylus) -/// -public event MoreInnerArcPressedEventHandler MoreInnerArcPressedEvent; - -public void OnMoreInnerArcPressed(Windows.UI.Xaml.Input.PointerRoutedEventArgs e) -{ - MoreInnerArcPressedEvent?.Invoke(this, e); -} -``` - -Now that the button has this information, we need to make sure we render it properly. Whenever the menu is given `RadialMenuButtons`, it uses `PieSlices` to actually render objects. Right now, a `PieSlice` consists of two Path objects (`InnerPieSlicePath` and `OuterPieSlicePath`), as well as icon and label objects. - -A quick word how the two pieces are drawn: The outer arc element is "thick arc", drawn using two `LineSegments` and two `ArcSegments`. The inner arc is using only three points - one arc (right below the oute arc) and two lines to the center of the control. - -To create a third arc (`MoreInnerArc`) that is able to sit on top of the `InnerArc`, we can simply reuse `InnerArc` with a smaller radius. However, nothing keeps you from creating a custom class with a custom `Redraw()` method. - -To add the third arc, open up `PieSlice.xaml`. Find the section with the two arcs and add the third arc below them: - -```c# - - - -``` - -Then, open up `PieSlice.xaml.cs`. Here, we need also need to add the above defined color dependency properties. You can simply reuse what you already added to `RadialMenuButton` - just copy in the same dependency properties. Then, go and find the `OnLoaded` method, in which we also configure and setup the two other arcs. Take a look at how we setup the other arcs and configure the third arc to your needs. In the example below, we're configuring the the third arc to have a radius that is 50px smaller than the `InnerArc`. - -```c# -private void OnLoaded(object sender, RoutedEventArgs routedEventArgs) -{ - // ... - - MoreInnerPieSlicePath.Radius = Radius - OuterArcThickness - 50; - MoreInnerPieSlicePath.StartAngle = StartAngle; - MoreInnerPieSlicePath.Angle = Angle; - MoreInnerPieSlicePath.Fill = new SolidColorBrush(MoreInnerNormalColor); - - // ... -} -``` - -Make sure to also setup event handlers. You can do that either in code-behind or in XAML, as long as you call the original method on RadialMenuButton (which is referenced in `OriginalRadialMenuButton`). If you want your third inner arc to be animated and have hover/pressed states, go checkout `PieSlice.xaml` - a bunch of visual states are defined and you can easily add additional ones. - -```c# -private void innerPieSlicePath_PointerPressed(object sender, PointerRoutedEventArgs e) -{ - OriginalRadialMenuButton.OnMoreInnerArcPressed(e); - - // The line below only works if you previously defined a "MoreInnerPressed" visual state - // in PieSlice.xaml - // VisualStateManager.GoToState(this, "MoreInnerPressed", true); - -} -``` - -Well done! Now you have successfully created a third arc inside your button :metal:! You will probably notice that the icons and labels on the inner arc may now be behind your more inner arc - obviously, you can configure those to your liking, too. +## Special Thanks +A bunch of thanks to [Jason Poon](https://github.com/jpoon), who wrote an early version of this code (and helpes us all a lot). ## License + Copyright (C) 2015 Microsoft, licensed MIT. Please check `LICENSE` for details. diff --git a/RadialMenuControl/Components/RadialMenuButton.xaml.cs b/RadialMenuControl/Components/RadialMenuButton.xaml.cs index a607cb4..51392eb 100644 --- a/RadialMenuControl/Components/RadialMenuButton.xaml.cs +++ b/RadialMenuControl/Components/RadialMenuButton.xaml.cs @@ -1,16 +1,15 @@ +using System; using System.Collections.Generic; +using System.Reflection; +using Windows.UI; +using Windows.UI.Xaml; +using Windows.UI.Xaml.Controls; +using Windows.UI.Xaml.Input; +using Windows.UI.Xaml.Media; +using RadialMenuControl.UserControl; namespace RadialMenuControl.Components { - using UserControl; - using System; - using Windows.UI; - using Windows.UI.Xaml; - using Windows.UI.Xaml.Controls; - using Windows.UI.Xaml.Media; - using System.Reflection; - using Windows.UI.Xaml.Input; - public partial class RadialMenuButton : Button { public enum ButtonType @@ -20,126 +19,165 @@ public enum ButtonType Toggle, Custom }; - + + // SubMenu + public static readonly DependencyProperty SubmenuProperty = + DependencyProperty.Register("Submenu", typeof (RadialMenu), typeof (RadialMenuButton), null); + + public RadialMenuButton() + { + InitializeComponent(); + } + + /// + /// A RadialMenu that is opened when the user presses the button + /// + public RadialMenu Submenu + { + get { return (RadialMenu) GetValue(SubmenuProperty); } + set { SetValue(SubmenuProperty, value); } + } + + /// + /// Allows the use of key/value pairs to set the colors + /// + /// Dictionary containing colors in a key/value pair + public void SetColors(Dictionary colors) + { + foreach (var colorVariable in colors) + { + if (GetType().GetProperty(colorVariable.Key) != null) + { + var prop = GetType().GetProperty(colorVariable.Key); + prop.SetValue(this, colorVariable.Value); + } + } + } + # region properties + // Label public static readonly DependencyProperty LabelProperty = - DependencyProperty.Register("Label", typeof(string), typeof(RadialMenuButton), new PropertyMetadata("")); + DependencyProperty.Register("Label", typeof (string), typeof (RadialMenuButton), new PropertyMetadata("")); public static readonly DependencyProperty LabelSizeProperty = - DependencyProperty.Register("LabelSize", typeof(int), typeof(RadialMenuButton), new PropertyMetadata(10)); + DependencyProperty.Register("LabelSize", typeof (int), typeof (RadialMenuButton), new PropertyMetadata(10)); - public static readonly DependencyProperty HideLabelProperty = - DependencyProperty.Register("IsLabelHidden", typeof(bool), typeof(RadialMenuButton), null); + public static readonly DependencyProperty IsLabelHiddenProperty = + DependencyProperty.Register("IsLabelHidden", typeof (bool), typeof (RadialMenuButton), null); public static readonly DependencyProperty IconProperty = - DependencyProperty.Register("Icon", typeof(string), typeof(RadialMenuButton), new PropertyMetadata("")); + DependencyProperty.Register("Icon", typeof (string), typeof (RadialMenuButton), new PropertyMetadata("")); public static readonly DependencyProperty IconFontFamilyProperty = - DependencyProperty.Register("IconFontFamily", typeof(FontFamily), typeof(RadialMenuButton), new PropertyMetadata(new FontFamily("Segoe UI"))); + DependencyProperty.Register("IconFontFamily", typeof (FontFamily), typeof (RadialMenuButton), + new PropertyMetadata(new FontFamily("Segoe UI"))); public static readonly DependencyProperty IconForegroundBrushProperty = - DependencyProperty.Register("IconForegroundBrush", typeof(Brush), typeof(RadialMenuButton), new PropertyMetadata(new SolidColorBrush(Colors.Black))); + DependencyProperty.Register("IconForegroundBrush", typeof (Brush), typeof (RadialMenuButton), + new PropertyMetadata(new SolidColorBrush(Colors.Black))); public static readonly DependencyProperty IconSizeProperty = - DependencyProperty.Register("IconSize", typeof(int), typeof(RadialMenuButton), new PropertyMetadata(26)); + DependencyProperty.Register("IconSize", typeof (int), typeof (RadialMenuButton), new PropertyMetadata(26)); public static readonly DependencyProperty IconImageProperty = - DependencyProperty.Register("IconImage", typeof(ImageSource), typeof(RadialMenuButton), null); + DependencyProperty.Register("IconImage", typeof (ImageSource), typeof (RadialMenuButton), null); public static readonly DependencyProperty MenuSeletedProperty = - DependencyProperty.Register("MenuSelected", typeof(bool), typeof(RadialMenuButton), null); + DependencyProperty.Register("MenuSelected", typeof (bool), typeof (RadialMenuButton), null); public static readonly DependencyProperty ButtonTypeProperty = - DependencyProperty.Register("ButtonType", typeof(ButtonType), typeof(RadialMenuButton), new PropertyMetadata(ButtonType.Simple)); + DependencyProperty.Register("ButtonType", typeof (ButtonType), typeof (RadialMenuButton), + new PropertyMetadata(ButtonType.Simple)); public static readonly DependencyProperty ValueProperty = - DependencyProperty.Register("Value", typeof(object), typeof(RadialMenuButton), null); + DependencyProperty.Register("Value", typeof (object), typeof (RadialMenuButton), null); /// - /// Label, displayed in the inner portion of the button + /// Label, displayed in the inner portion of the button /// public string Label { - get { return (string)GetValue(LabelProperty) ?? ""; } + get { return (string) GetValue(LabelProperty) ?? ""; } set { SetValue(LabelProperty, value); } } /// - /// Font Size for the label + /// Font Size for the label /// public int LabelSize { - get { return (int)GetValue(LabelSizeProperty); } + get { return (int) GetValue(LabelSizeProperty); } set { SetValue(LabelProperty, value); } } /// - /// Should the label be hidden? + /// Should the label be hidden? /// - public bool HideLabel + public bool IsLabelHidden { - get { return (bool)GetValue(HideLabelProperty); } - set { SetValue(HideLabelProperty, value); } + get { return (bool) GetValue(IsLabelHiddenProperty); } + set { SetValue(IsLabelHiddenProperty, value); } } /// - /// Text-based icon, displayed in a TextBox (usually used with icon fonts) + /// Text-based icon, displayed in a TextBox (usually used with icon fonts) /// public string Icon { - get { return (string)GetValue(IconProperty); } + get { return (string) GetValue(IconProperty); } set { SetValue(IconProperty, value); } } /// - /// Font for the text-based icon + /// Font for the text-based icon /// public FontFamily IconFontFamily { - get { return (FontFamily)GetValue(IconFontFamilyProperty); } + get { return (FontFamily) GetValue(IconFontFamilyProperty); } set { SetValue(IconFontFamilyProperty, value); } } /// - /// Font size for the text-based icon + /// Font size for the text-based icon /// public int IconSize { - get { return (int)GetValue(IconSizeProperty); } + get { return (int) GetValue(IconSizeProperty); } set { SetValue(IconProperty, value); } } /// - /// ForegroundBrush for the text-based icon + /// ForegroundBrush for the text-based icon /// public Brush IconForegroundBrush { - get { return (Brush)GetValue(IconForegroundBrushProperty); } + get { return (Brush) GetValue(IconForegroundBrushProperty); } set { SetValue(IconForegroundBrushProperty, value); } } /// - /// A ImageSource for the icon. If set, the text-based icon will be hidden. + /// A ImageSource for the icon. If set, the text-based icon will be hidden. /// public ImageSource IconImage { - get { return (ImageSource)GetValue(IconImageProperty); } + get { return (ImageSource) GetValue(IconImageProperty); } set { SetValue(IconImageProperty, value); } } // Values & Button Type /// - /// If the button is a radio button and selected on behalf of the whole RadialMenu, this value will be true (false otherwise) + /// If the button is a radio button and selected on behalf of the whole RadialMenu, this value will be true (false + /// otherwise) /// public bool MenuSelected { - get { return (bool)GetValue(MenuSeletedProperty); } + get { return (bool) GetValue(MenuSeletedProperty); } set { SetValue(MenuSeletedProperty, value); } } /// - /// Value of this button + /// Value of this button /// public object Value { @@ -150,236 +188,218 @@ public object Value { throw new Exception("A button of type SIMPLE should not have any value."); } - else - { - SetValue(ValueProperty, value); - } + SetValue(ValueProperty, value); } } /// - /// Button type, indicating the way users can interact with this button + /// Button type, indicating the way users can interact with this button /// public ButtonType Type { - get { return (ButtonType)GetValue(ButtonTypeProperty); } + get { return (ButtonType) GetValue(ButtonTypeProperty); } set { SetValue(ButtonTypeProperty, value); } } // Inner Arc Colors public static readonly DependencyProperty InnerNormalColorProperty = - DependencyProperty.Register("InnerNormalColor", typeof(Color?), typeof(RadialMenuButton), null); + DependencyProperty.Register("InnerNormalColor", typeof (Color?), typeof (RadialMenuButton), null); public static readonly DependencyProperty InnerHoverColorProperty = - DependencyProperty.Register("InnerHoverColor", typeof(Color?), typeof(RadialMenuButton), null); + DependencyProperty.Register("InnerHoverColor", typeof (Color?), typeof (RadialMenuButton), null); public static readonly DependencyProperty InnerTappedColorProperty = - DependencyProperty.Register("InnerTappedColor", typeof(Color?), typeof(RadialMenuButton), null); + DependencyProperty.Register("InnerTappedColor", typeof (Color?), typeof (RadialMenuButton), null); public static readonly DependencyProperty InnerReleasedColorProperty = - DependencyProperty.Register("InnerReleasedColor", typeof(Color?), typeof(RadialMenuButton), null); + DependencyProperty.Register("InnerReleasedColor", typeof (Color?), typeof (RadialMenuButton), null); /// - /// Hover color for the inner portion of the button + /// Hover color for the inner portion of the button /// public Color? InnerHoverColor { - get { return (Color?)GetValue(InnerHoverColorProperty); } + get { return (Color?) GetValue(InnerHoverColorProperty); } set { SetValue(InnerHoverColorProperty, value); } } /// - /// Normal color for the inner portion of the button + /// Normal color for the inner portion of the button /// public Color? InnerNormalColor { - get { return (Color?)GetValue(InnerNormalColorProperty); } + get { return (Color?) GetValue(InnerNormalColorProperty); } set { SetValue(InnerNormalColorProperty, value); } } /// - /// Tapped color for the inner portion of the button + /// Tapped color for the inner portion of the button /// public Color? InnerTappedColor { - get { return (Color?)GetValue(InnerTappedColorProperty); } + get { return (Color?) GetValue(InnerTappedColorProperty); } set { SetValue(InnerTappedColorProperty, value); } } /// - /// Released color for the inner portion of the button + /// Released color for the inner portion of the button /// public Color? InnerReleasedColor { - get { return (Color?)GetValue(InnerReleasedColorProperty); } + get { return (Color?) GetValue(InnerReleasedColorProperty); } set { SetValue(InnerReleasedColorProperty, value); } } // Outer Arc Colors public static readonly DependencyProperty OuterNormalColorProperty = - DependencyProperty.Register("OuterNormalColor", typeof(Color?), typeof(RadialMenuButton), null); + DependencyProperty.Register("OuterNormalColor", typeof (Color?), typeof (RadialMenuButton), null); public static readonly DependencyProperty OuterDisabledColorProperty = - DependencyProperty.Register("OuterDisabledColor", typeof(Color?), typeof(RadialMenuButton), null); + DependencyProperty.Register("OuterDisabledColor", typeof (Color?), typeof (RadialMenuButton), null); public static readonly DependencyProperty OuterHoverColorProperty = - DependencyProperty.Register("OuterHoverColor", typeof(Color?), typeof(RadialMenuButton), null); + DependencyProperty.Register("OuterHoverColor", typeof (Color?), typeof (RadialMenuButton), null); public static readonly DependencyProperty OuterTappedColorProperty = - DependencyProperty.Register("OuterTappedColor", typeof(Color?), typeof(RadialMenuButton), null); + DependencyProperty.Register("OuterTappedColor", typeof (Color?), typeof (RadialMenuButton), null); - public static readonly DependencyProperty OuterArcThicknessProperty = - DependencyProperty.Register("OuterArcThickness", typeof(double?), typeof(RadialMenuButton), null); + public static readonly DependencyProperty OuterThicknessProperty = + DependencyProperty.Register("OuterThickness", typeof (double?), typeof (RadialMenuButton), null); public static readonly DependencyProperty StrokeColorProperty = - DependencyProperty.Register("StrokeColor", typeof(Color?), typeof(RadialMenuButton), null); + DependencyProperty.Register("StrokeColor", typeof (Color?), typeof (RadialMenuButton), null); public static readonly DependencyProperty StrokeThicknessProperty = - DependencyProperty.Register("StrokeThickness", typeof(double?), typeof(RadialMenuButton), null); + DependencyProperty.Register("StrokeThickness", typeof (double?), typeof (RadialMenuButton), null); // Indication Arc public static readonly DependencyProperty UseIndicationArcProperty = - DependencyProperty.Register("UseIndicationArcProperty", typeof(bool?), typeof(RadialMenuButton), null); + DependencyProperty.Register("UseIndicationArcProperty", typeof (bool?), typeof (RadialMenuButton), null); public static readonly DependencyProperty IndicationArcColorProperty = - DependencyProperty.Register("IndicationArcColor", typeof(Color?), typeof(RadialMenuButton), null); + DependencyProperty.Register("IndicationArcColor", typeof (Color?), typeof (RadialMenuButton), null); public static readonly DependencyProperty IndicationArcStrokeThicknessProperty = - DependencyProperty.Register("IndicationArcStrokeThickness", typeof(double?), typeof(RadialMenuButton), null); + DependencyProperty.Register("IndicationArcStrokeThickness", typeof (double?), typeof (RadialMenuButton), + null); public static readonly DependencyProperty IndicationArcDistanceFromEdgeProperty = - DependencyProperty.Register("IndicationArcDistanceFromEdge", typeof(double?), typeof(RadialMenuButton), null); + DependencyProperty.Register("IndicationArcDistanceFromEdge", typeof (double?), typeof (RadialMenuButton), + null); /// - /// Distance from the inner part of the outer band to the indication arc + /// Distance from the inner part of the outer band to the indication arc /// public double? IndicationArcDistanceFromEdge { - get { return (double?)GetValue(IndicationArcDistanceFromEdgeProperty); } + get { return (double?) GetValue(IndicationArcDistanceFromEdgeProperty); } set { SetValue(IndicationArcDistanceFromEdgeProperty, value); } } /// - /// When set to true, an indication arc will be placed on this button + /// When set to true, an indication arc will be placed on this button /// public bool? UseIndicationArc { - get { return (bool?)GetValue(UseIndicationArcProperty); } + get { return (bool?) GetValue(UseIndicationArcProperty); } set { SetValue(UseIndicationArcProperty, value); } } + public Color? IndicationArcColor { - get { return (Color?)GetValue(IndicationArcColorProperty); } + get { return (Color?) GetValue(IndicationArcColorProperty); } set { SetValue(IndicationArcColorProperty, value); } } + /// - /// The Stroke thickness of the indication arc + /// The Stroke thickness of the indication arc /// public double? IndicationArcStrokeThickness { - get { return (double?)GetValue(IndicationArcStrokeThicknessProperty); } + get { return (double?) GetValue(IndicationArcStrokeThicknessProperty); } set { SetValue(IndicationArcStrokeThicknessProperty, value); } } /// - /// Hover color for the outer portion of the button + /// Hover color for the outer portion of the button /// public Color? OuterHoverColor { - get { return (Color?)GetValue(OuterHoverColorProperty); } + get { return (Color?) GetValue(OuterHoverColorProperty); } set { SetValue(OuterHoverColorProperty, value); } } /// - /// Normal color for the outer portion of the button + /// Normal color for the outer portion of the button /// public Color? OuterNormalColor { - get { return (Color?)GetValue(OuterNormalColorProperty); } + get { return (Color?) GetValue(OuterNormalColorProperty); } set { SetValue(OuterNormalColorProperty, value); } } /// - /// Disabled color for the outer portion of the button + /// Disabled color for the outer portion of the button /// public Color? OuterDisabledColor { - get { return (Color?)GetValue(OuterDisabledColorProperty); } + get { return (Color?) GetValue(OuterDisabledColorProperty); } set { SetValue(OuterDisabledColorProperty, value); } } /// - /// Tapped color for the outer portion of the button + /// Tapped color for the outer portion of the button /// public Color? OuterTappedColor { - get { return (Color?)GetValue(OuterTappedColorProperty); } + get { return (Color?) GetValue(OuterTappedColorProperty); } set { SetValue(OuterTappedColorProperty, value); } } // Stroke /// - /// Color of the stroke around the PieSLice + /// Color of the stroke around the PieSLice /// public Color? StrokeColor { - get { return (Color?)GetValue(StrokeColorProperty); } + get { return (Color?) GetValue(StrokeColorProperty); } set { SetValue(StrokeColorProperty, value); } } /// - /// Thickness of the stroke around the PieSlice + /// Thickness of the stroke around the PieSlice /// public double? StrokeThickness { - get { return (double?)GetValue(StrokeThicknessProperty); } + get { return (double?) GetValue(StrokeThicknessProperty); } set { SetValue(StrokeThicknessProperty, value); } } /// - /// Thickness of the outer arc, on the outer side of the button + /// Thickness of the outer arc, on the outer side of the button /// - public double? OuterArcThickness + public double? OuterThickness { - get { return (double?) GetValue(OuterArcThicknessProperty); } - set { SetValue(OuterArcThicknessProperty, value);} + get { return (double?) GetValue(OuterThicknessProperty); } + set { SetValue(OuterThicknessProperty, value); } } // CustomMenu public static readonly DependencyProperty CustomMenuProperty = - DependencyProperty.Register("Submenu", typeof(MenuBase), typeof(RadialMenuButton), null); + DependencyProperty.Register("Submenu", typeof (MenuBase), typeof (RadialMenuButton), null); /// - /// CustomMenu behind the button + /// CustomMenu behind the button /// public MenuBase CustomMenu { - get { return (MenuBase)GetValue(CustomMenuProperty); } + get { return (MenuBase) GetValue(CustomMenuProperty); } set { SetValue(CustomMenuProperty, value); } } - #endregion properties - - #region events - /// - /// Delegate for the ValueChangedEvent, fired whenever the value of this button is changed - /// - /// - /// - public delegate void ValueChangedHandler(object sender, RoutedEventArgs args); - public event ValueChangedHandler ValueChanged; - public void OnValueChanged(RoutedEventArgs e) - { - ValueChanged?.Invoke(this, e); - } - - public static readonly DependencyProperty InnerAccessKeyProperty = - DependencyProperty.Register("InnerAccessKey", typeof(string), typeof(RadialMenuButton), null); - - public static readonly DependencyProperty OuterAccessKeyProperty = - DependencyProperty.Register("OuterAccessKey", typeof(string), typeof(RadialMenuButton), null); + // Access Keys /// - /// Outer slice path access key + /// Outer slice path access key /// public string OuterAccessKey { @@ -388,7 +408,7 @@ public string OuterAccessKey } /// - /// Inner slice path access key + /// Inner slice path access key /// public string InnerAccessKey { @@ -396,49 +416,52 @@ public string InnerAccessKey set { SetValue(InnerAccessKeyProperty, value); } } - /// - /// Does this radial menu button have events on the outer arc? - /// - /// - public bool HasOuterArcEvents => (OuterArcPressedEvent != null || OuterArcReleasedEvent != null); + #endregion properties - /// - /// Does this radial menu button have events on the outer arc? - /// - /// - public bool HasOuterArcAction => (Submenu != null || CustomMenu != null || HasOuterArcEvents); + #region events - public delegate void InnerArcPressedEventHandler(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e); /// - /// Invoked when the inner arc of the button has been pressed (mouse, touch, stylus) + /// Delegate for the ValueChangedEvent, fired whenever the value of this button is changed /// - public event InnerArcPressedEventHandler InnerArcPressedEvent; + /// + /// + public delegate void ValueChangedHandler(object sender, RoutedEventArgs args); + + public event ValueChangedHandler ValueChanged; - public void OnInnerArcPressed(Windows.UI.Xaml.Input.PointerRoutedEventArgs e) + public void OnValueChanged(RoutedEventArgs e) { - InnerArcPressedEvent?.Invoke(this, e); + ValueChanged?.Invoke(this, e); } - public delegate void OuterArcPressedEventHandler(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e); + public static readonly DependencyProperty InnerAccessKeyProperty = + DependencyProperty.Register("InnerAccessKey", typeof (string), typeof (RadialMenuButton), null); + + public static readonly DependencyProperty OuterAccessKeyProperty = + DependencyProperty.Register("OuterAccessKey", typeof (string), typeof (RadialMenuButton), null); + /// - /// Invoked when the outer arc of the button has been pressed (mouse, touch, stylus) + /// Does this radial menu button have events on the outer arc? /// - public event OuterArcPressedEventHandler OuterArcPressedEvent; + /// + public bool HasOuterArcEvents => (OuterArcPressed != null || OuterArcReleased != null); - public void OnOuterArcPressed(Windows.UI.Xaml.Input.PointerRoutedEventArgs e) - { - OuterArcPressedEvent?.Invoke(this, e); - } + /// + /// Does this radial menu button have actions on the outer arc? + /// + /// + public bool HasOuterArcAction => (Submenu != null || CustomMenu != null || HasOuterArcEvents); + + public delegate void InnerArcPressedEventHandler(object sender, PointerRoutedEventArgs e); - public delegate void InnerArcReleasedEventHandler(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e); /// - /// Invoked when the inner arc of the button has been released (mouse, touch, stylus) + /// Invoked when the inner arc of the button has been pressed (mouse, touch, stylus) /// - public event InnerArcReleasedEventHandler InnerArcReleasedEvent; + public event InnerArcPressedEventHandler InnerArcPressed; - public void OnInnerArcReleased(Windows.UI.Xaml.Input.PointerRoutedEventArgs e) + public void OnInnerArcPressed(PointerRoutedEventArgs e) { - InnerArcReleasedEvent?.Invoke(this, e); + InnerArcPressed?.Invoke(this, e); if (Type != ButtonType.Simple) { @@ -446,55 +469,46 @@ public void OnInnerArcReleased(Windows.UI.Xaml.Input.PointerRoutedEventArgs e) } if (Type == ButtonType.Toggle) { - Value = (Value == null || !(bool)Value); + Value = (Value == null || !(bool) Value); } } - public delegate void OuterArcReleasedEventHandler(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e); + public delegate void OuterArcPressedEventHandler(object sender, PointerRoutedEventArgs e); + /// - /// Invoked when the outer arc of the button has been pressed (mouse, touch, stylus) + /// Invoked when the outer arc of the button has been pressed (mouse, touch, stylus) /// - public event OuterArcReleasedEventHandler OuterArcReleasedEvent; + public event OuterArcPressedEventHandler OuterArcPressed; - public void OnOuterArcReleased(Windows.UI.Xaml.Input.PointerRoutedEventArgs e) + public void OnOuterArcPressed(PointerRoutedEventArgs e) { - OuterArcReleasedEvent?.Invoke(this, e); + OuterArcPressed?.Invoke(this, e); } - #endregion + + public delegate void InnerArcReleasedEventHandler(object sender, PointerRoutedEventArgs e); /// - /// Allows the use of key/value pairs to set the colors + /// Invoked when the inner arc of the button has been released (mouse, touch, stylus) /// - /// - public void SetColors(Dictionary colors) + public event InnerArcReleasedEventHandler InnerArcReleased; + + public void OnInnerArcReleased(PointerRoutedEventArgs e) { - foreach (var colorVariable in colors) - { - if (GetType().GetProperty(colorVariable.Key) != null) - { - var prop = GetType().GetProperty(colorVariable.Key); - prop.SetValue(this, colorVariable.Value); - } - } + InnerArcReleased?.Invoke(this, e); } - // SubMenu - public static readonly DependencyProperty SubmenuProperty = - DependencyProperty.Register("Submenu", typeof(RadialMenu), typeof(RadialMenuButton), null); + public delegate void OuterArcReleasedEventHandler(object sender, PointerRoutedEventArgs e); /// - /// A RadialMenu that is opened when the user presses the button + /// Invoked when the outer arc of the button has been pressed (mouse, touch, stylus) /// - public RadialMenu Submenu - { - get { return (RadialMenu)GetValue(SubmenuProperty); } - set { SetValue(SubmenuProperty, value); } - } + public event OuterArcReleasedEventHandler OuterArcReleased; - public RadialMenuButton() + public void OnOuterArcReleased(PointerRoutedEventArgs e) { - InitializeComponent(); + OuterArcReleased?.Invoke(this, e); } - } -} + #endregion + } +} \ No newline at end of file diff --git a/RadialMenuControl/RadialMenuControl.csproj b/RadialMenuControl/RadialMenuControl.csproj index c80a16d..d34baf6 100644 --- a/RadialMenuControl/RadialMenuControl.csproj +++ b/RadialMenuControl/RadialMenuControl.csproj @@ -121,8 +121,8 @@ - - ListSubMenu .xaml + + ListSubMenu.xaml @@ -158,7 +158,7 @@ Designer MSBuild:Compile - + MSBuild:Compile Designer @@ -178,7 +178,7 @@ MSBuild:Compile Designer - + 14.0 diff --git a/RadialMenuControl/RadialMenuControl.nuspec b/RadialMenuControl/RadialMenuControl.nuspec new file mode 100644 index 0000000..9a235bb --- /dev/null +++ b/RadialMenuControl/RadialMenuControl.nuspec @@ -0,0 +1,23 @@ + + + + RadialMenuControl + 0.2.1 + Radial Menu Control + Felix Rieseberg;Steven Edouard;Rita Zhang + Felix Rieseberg;Steven Edouard;Rita Zhang + https://github.com/CatalystCode/radial-menu/blob/master/LICENSE + https://github.com/CatalystCode/radial-menu + false + A Radial Menu for Windows UWP Applications + A Radial Menu for Windows UWP Applications, as made popular by the first versions of the modern OneNote App for Windows. Create radial menus floating op top of your application. The control supports variable numbers of buttons, toggle and radio buttons, a selector for long lists, and a fancy metered menu for intuitive selection of numbers. + Initial Release! Checkout our wiki page for more details - https://github.com/CatalystCode/radial-menu/wiki. Spot a bug? Give us a hand by filing issues here: https://github.com/CatalystCode/radial-menu/issues + Copyright 2015 Microsoft + UWP RadialMenu Windows10 + + + + + + + \ No newline at end of file diff --git a/RadialMenuControl/UserControl/ListSubMenu .xaml b/RadialMenuControl/UserControl/ListSubMenu.xaml similarity index 100% rename from RadialMenuControl/UserControl/ListSubMenu .xaml rename to RadialMenuControl/UserControl/ListSubMenu.xaml diff --git a/RadialMenuControl/UserControl/ListSubMenu .xaml.cs b/RadialMenuControl/UserControl/ListSubMenu.xaml.cs similarity index 98% rename from RadialMenuControl/UserControl/ListSubMenu .xaml.cs rename to RadialMenuControl/UserControl/ListSubMenu.xaml.cs index f256ca1..274036f 100644 --- a/RadialMenuControl/UserControl/ListSubMenu .xaml.cs +++ b/RadialMenuControl/UserControl/ListSubMenu.xaml.cs @@ -1,9 +1,9 @@ using RadialMenuControl.Components; namespace RadialMenuControl.UserControl -{ - using System.Collections.Generic; - using Themes; +{ + using System.Collections.Generic; + using Themes; using Windows.UI; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; @@ -15,8 +15,8 @@ public partial class ListSubMenu : MenuBase #region properties private object _selectedValue; - /// - /// The currently selected element on this list + /// + /// The currently selected element on this list /// public object SelectedValue { @@ -29,10 +29,10 @@ public object SelectedValue return _selectedValue; } } - private Brush _backgroundFillBrush = new SolidColorBrush(Colors.WhiteSmoke); - /// - /// The selected value for the - /// + private Brush _backgroundFillBrush = new SolidColorBrush(Colors.WhiteSmoke); + /// + /// The selected value for the + /// public Brush BackgroundFillBrush { set @@ -45,10 +45,10 @@ public Brush BackgroundFillBrush } } - private Brush _selectedValueBrush = new SolidColorBrush(DefaultColors.HighlightColor); - /// - /// The brush to use for the selected element on the list - /// + private Brush _selectedValueBrush = new SolidColorBrush(DefaultColors.HighlightColor); + /// + /// The brush to use for the selected element on the list + /// public Brush SelectedValueBrush { set @@ -76,8 +76,8 @@ public List ListMenuItems private Brush _hoverValueBrush = new SolidColorBrush(DefaultColors.MeterSelectorColor); - /// - /// The brush to use when the pointer hovers over an element + /// + /// The brush to use when the pointer hovers over an element /// public Brush HoverValueBrush { @@ -91,8 +91,8 @@ public Brush HoverValueBrush } } - /// - /// The CenterButton of this control for back navigation + /// + /// The CenterButton of this control for back navigation /// public override CenterButton CenterButton { @@ -102,56 +102,56 @@ public override CenterButton CenterButton #endregion - /// - /// Draws the list menu + /// + /// Draws the list menu /// public void Draw() - { - + { + SubMenuListView.ItemsSource = null; List items = new List(); int selectedIndex = 0; int count = 0; - foreach(RadialMenuButton item in ListMenuItems) - { - items.Add(item.Label); - if (item.MenuSelected) - { - selectedIndex = count; - } - count++; - } - + foreach(RadialMenuButton item in ListMenuItems) + { + items.Add(item.Label); + if (item.MenuSelected) + { + selectedIndex = count; + } + count++; + } + SubMenuListView.ItemsSource = items; SubMenuListView.SelectedIndex = selectedIndex; //SubMenuListView.SelectionChanged += SubMenuListView_SelectionChanged; - } - - /// - /// Event Handler for selection changed event - /// - /// - /// - private void SubMenuListView_SelectionChanged(object sender, SelectionChangedEventArgs e) - { - string selectedItem = (sender as ListView).SelectedValue as string; - foreach (RadialMenuButton item in ListMenuItems) - { - if (item.Label == selectedItem) - { - item.MenuSelected = true; - SelectedValue = item.Value; - break; - } - } - - } - + } + + /// + /// Event Handler for selection changed event + /// + /// + /// + private void SubMenuListView_SelectionChanged(object sender, SelectionChangedEventArgs e) + { + string selectedItem = (sender as ListView).SelectedValue as string; + foreach (RadialMenuButton item in ListMenuItems) + { + if (item.Label == selectedItem) + { + item.MenuSelected = true; + SelectedValue = item.Value; + break; + } + } + + } + public delegate void ValueSelectedHandler(object sender, TappedRoutedEventArgs args); public event ValueSelectedHandler ValueSelected; - /// - /// Creates a ListSubMenu instance + /// + /// Creates a ListSubMenu instance /// public ListSubMenu() { @@ -161,33 +161,33 @@ public ListSubMenu() BackgroundFillBrush = new SolidColorBrush(DefaultColors.InnerNormalColor); Tapped += (sender, args) => - { - string selectedItem = SubMenuListView.SelectedValue as string; - foreach (RadialMenuButton item in ListMenuItems) - { - if (item.Label == selectedItem) - { - item.MenuSelected = true; - SelectedValue = item.Value; - } - else - { - item.MenuSelected = false; - } - } + { + string selectedItem = SubMenuListView.SelectedValue as string; + foreach (RadialMenuButton item in ListMenuItems) + { + if (item.Label == selectedItem) + { + item.MenuSelected = true; + SelectedValue = item.Value; + } + else + { + item.MenuSelected = false; + } + } ValueSelected?.Invoke(this, args); }; PropertyChanged += (sender, args) => - { + { if (args.PropertyName == "Diameter") { CenterButton.Top = Diameter / 2 - CenterButton.Width / 2; CenterButton.Left = Diameter / 2 - CenterButton.Width / 2; - } - - + } + + }; Loaded += (sender, e) => { diff --git a/RadialMenuControl/UserControl/MeterSubMenu.xaml b/RadialMenuControl/UserControl/MeterSubMenu.xaml index 30e4990..a1df60e 100644 --- a/RadialMenuControl/UserControl/MeterSubMenu.xaml +++ b/RadialMenuControl/UserControl/MeterSubMenu.xaml @@ -92,6 +92,6 @@ BorderBrush="{Binding CenterButtonBorder}" Opacity="1" Visibility="Collapsed"/> - + diff --git a/RadialMenuControl/UserControl/MeterSubmenu.xaml.cs b/RadialMenuControl/UserControl/MeterSubmenu.xaml.cs index e1d7fa2..cee4781 100644 --- a/RadialMenuControl/UserControl/MeterSubmenu.xaml.cs +++ b/RadialMenuControl/UserControl/MeterSubmenu.xaml.cs @@ -546,12 +546,12 @@ public MeterSubMenu() // hide the selection meter line MeterLinePath.Visibility = Visibility.Collapsed; // set the locked selection meter line + var point = args.GetCurrentPoint(sender as UIElement); + SetMeterPoint(point.Position, true, true); // set the locked on value LockedValue = SelectedValue; // modify the display text color - SelectedValueTextColor = SelectedValueColor; - var point = args.GetCurrentPoint(sender as UIElement); - SetMeterPoint(point.Position, true, true); + SelectedValueTextColor = SelectedValueTextColor; ValueSelected?.Invoke(this, args); }; diff --git a/RadialMenuControl/UserControl/Pie.xaml.cs b/RadialMenuControl/UserControl/Pie.xaml.cs index f12ea50..d39c65c 100644 --- a/RadialMenuControl/UserControl/Pie.xaml.cs +++ b/RadialMenuControl/UserControl/Pie.xaml.cs @@ -158,6 +158,12 @@ public Pie() /// public void Draw() { + foreach (var pieSlice in PieSlices) + { + pieSlice.ChangeMenuRequestEvent -= SourceRadialMenu.ChangeMenu; + pieSlice.ChangeSelectedEvent -= PieSlice_ChangeSelectedEvent; + } + PieSlices.Clear(); var startAngle = StartAngle; @@ -166,12 +172,11 @@ public void Draw() { BackgroundEllipse.Height = Height; BackgroundEllipse.Width = Width; - BackgroundEllipse.StrokeThickness = SourceRadialMenu.OuterArcThickness; + BackgroundEllipse.StrokeThickness = SourceRadialMenu.OuterThickness; BackgroundEllipse.Stroke = new SolidColorBrush(SourceRadialMenu.OuterDisabledColor); BackgroundEllipse.Fill = new SolidColorBrush(SourceRadialMenu.BackgroundEllipseFill); } - // Draw PieSlices for each Slice Object foreach (var slice in Slices) { @@ -186,7 +191,7 @@ public void Draw() // Arc & Stroke StrokeColor = slice.StrokeColor ?? SourceRadialMenu.InnerNormalColor, StrokeThickness = slice.StrokeThickness ?? 0, - OuterArcThickness = slice.OuterArcThickness ?? SourceRadialMenu.OuterArcThickness, + OuterArcThickness = slice.OuterThickness ?? SourceRadialMenu.OuterThickness, // The defaults below use OneNote-like purple colors InnerNormalColor = slice.InnerNormalColor ?? SourceRadialMenu.InnerNormalColor, InnerHoverColor = slice.InnerHoverColor ?? SourceRadialMenu.InnerHoverColor, @@ -207,7 +212,7 @@ public void Draw() IconForegroundBrush = slice.IconForegroundBrush, IconImage = slice.IconImage, IconImageSideLength = (Size / 2) * .25, - IsLabelHidden = slice.HideLabel, + IsLabelHidden = slice.IsLabelHidden, Label = slice.Label, LabelSize = slice.LabelSize, // Original Button diff --git a/RadialMenuControl/UserControl/PieSlice.xaml.cs b/RadialMenuControl/UserControl/PieSlice.xaml.cs index bff2e1c..910bd56 100644 --- a/RadialMenuControl/UserControl/PieSlice.xaml.cs +++ b/RadialMenuControl/UserControl/PieSlice.xaml.cs @@ -213,7 +213,7 @@ public double StrokeThickness DependencyProperty.Register("Radius", typeof(double), typeof(PieSlice), null); public static readonly DependencyProperty OuterArcThicknessProperty = - DependencyProperty.Register("OuterArcThickness", typeof(double), typeof(PieSlice), null); + DependencyProperty.Register("OuterThickness", typeof(double), typeof(PieSlice), null); /// /// Starting angle of this PieSlice (with 0 being the "north top") @@ -729,6 +729,23 @@ private void innerPieSlicePath_PointerPressed(object sender, PointerRoutedEventA { VisualStateManager.GoToState(this, "InnerPressed", true); OriginalRadialMenuButton.OnInnerArcPressed(e); + switch (OriginalRadialMenuButton.Type) + { + case RadialMenuButton.ButtonType.Toggle: + VisualStateManager.GoToState(this, + (OriginalRadialMenuButton.Value != null && ((bool)OriginalRadialMenuButton.Value)) + ? "InnerReleased" + : "InnerNormal", true); + break; + case RadialMenuButton.ButtonType.Radio: + VisualStateManager.GoToState(this, "InnerReleased", true); + // get all other menus to release now that this menu has been selected + ChangeSelectedEvent?.Invoke(sender, this); + break; + default: + VisualStateManager.GoToState(this, "InnerNormal", true); + break; + } } } @@ -740,8 +757,9 @@ private void innerPieSlicePath_PointerPressed(object sender, PointerRoutedEventA private void innerPieSlicePath_PointerReleased(object sender, PointerRoutedEventArgs e) { OriginalRadialMenuButton.OnInnerArcReleased(e); + switch (OriginalRadialMenuButton.Type) - { + { case RadialMenuButton.ButtonType.Toggle: VisualStateManager.GoToState(this, (OriginalRadialMenuButton.Value != null && ((bool) OriginalRadialMenuButton.Value)) @@ -755,7 +773,7 @@ private void innerPieSlicePath_PointerReleased(object sender, PointerRoutedEvent break; default: VisualStateManager.GoToState(this, "InnerNormal", true); - break; + break; } } diff --git a/RadialMenuControl/UserControl/RadialMenu.xaml.cs b/RadialMenuControl/UserControl/RadialMenu.xaml.cs index 040b64a..769e57b 100644 --- a/RadialMenuControl/UserControl/RadialMenu.xaml.cs +++ b/RadialMenuControl/UserControl/RadialMenu.xaml.cs @@ -1,30 +1,24 @@ -using System; +using System.Collections.Generic; +using System.Collections.ObjectModel; using System.Linq; -using Windows.Storage.Pickers; using Windows.UI; +using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; -using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Input; -using Windows.UI.Xaml.Media.Animation; +using Windows.UI.Xaml.Media; +using RadialMenuControl.Components; +using RadialMenuControl.Extensions; +using RadialMenuControl.Shims; +using RadialMenuControl.Themes; namespace RadialMenuControl.UserControl { - using Components; - using Shims; - using Extensions; - using Themes; - using System.Collections.Generic; - using Windows.UI.Xaml; - using Windows.UI.Xaml.Media; - using Windows.UI.Xaml.Input; - using System.Collections.ObjectModel; - /// - /// The base class for the Radial Menu Control - and also the user control. A RadialMenu contains - /// multiple RadialMenuButtons, which in turn can have sub-menues. + /// The base class for the Radial Menu Control - and also the user control. A RadialMenu contains + /// multiple RadialMenuButtons, which in turn can have sub-menues. /// /// - /// + /// /// var myRadialMenu = new RadialMenu /// { /// CenterButtonIcon = "F", @@ -42,20 +36,59 @@ namespace RadialMenuControl.UserControl /// } /// } /// - /// See RadialMenuDemo for complex tutorials - the menu is quite flexible and powerful, - /// meaning that it can be used in a number of ways. + /// + /// See RadialMenuDemo for complex tutorials - the menu is quite flexible and powerful, + /// meaning that it can be used in a number of ways. + /// /// public partial class RadialMenu : MenuBase { - public ObservableCollection DisplayMenus = new ObservableCollection(); - // Events public delegate void CenterButtonTappedHandler(object sender, TappedRoutedEventArgs e); - public event CenterButtonTappedHandler CenterButtonTappedEvent; + + public static readonly DependencyProperty OuterArcThicknesssProperty = + DependencyProperty.Register("OuterThickness", typeof (double), typeof (RadialMenu), + new PropertyMetadata((double) 20)); + + private IList _previousPies = new List(); + + private double _startAngle = 22.5; + public ObservableCollection DisplayMenus = new ObservableCollection(); + + /// + /// Initializes the RadialMenu. The constructrer doesn't accept any parameters. + /// + public RadialMenu() + { + InitializeComponent(); + + PropertyChanged += (sender, args) => + { + if (args.PropertyName == "Diameter") + { + Pie.Size = Diameter; + } + }; + + Loaded += (sender, args) => + { + CenterButtonTop = Diameter/2 - (CenterButton.ActualWidth/2); + CenterButtonLeft = Diameter/2 - (CenterButton.ActualHeight/2); + PieCompositeTransform.CenterX = Diameter/2; + PieCompositeTransform.CenterY = Diameter/2; + CustomPieCompositeTransform.CenterX = Diameter/2; + CustomPieCompositeTransform.CenterY = Diameter/2; + }; + CenterButton.Style = Resources["RoundedCenterButton"] as Style; + + Pie.SourceRadialMenu = this; + CenterButton.DataContext = this; + CenterButton.Tapped += OnCenterButtonTapped; + } private bool _isMenuChangeAnimated = true; /// - /// Is the transition between submenus animated? + /// Is the transition between submenus animated? /// public bool IsMenuChangeAnimated { @@ -64,8 +97,8 @@ public bool IsMenuChangeAnimated } /// - /// A public reference to the Pie used but the RadialMenu. The Pie abstracts away all the Math that has to happen - /// for the RadialMenu to be fast, pretty, and flexible. + /// A public reference to the Pie used but the RadialMenu. The Pie abstracts away all the Math that has to happen + /// for the RadialMenu to be fast, pretty, and flexible. /// public Pie Pie { @@ -73,9 +106,8 @@ public Pie Pie private set { DesignPie = value; } } - private double _startAngle = 22.5; /// - /// Start Angle + /// Start Angle for the first button. 0 is "top north". /// public double StartAngle { @@ -87,199 +119,50 @@ public double StartAngle } } - public static readonly DependencyProperty OuterArcThicknesssProperty = - DependencyProperty.Register("OuterArcThickness", typeof(double), typeof(RadialMenu), new PropertyMetadata((double)20)); - /// - /// Default for the thickness of the outer arc, if not set on a RadialMenuButton + /// Default for the thickness of the outer arc, if not set on a RadialMenuButton /// - public double OuterArcThickness + public double OuterThickness { - get { return (double)GetValue(OuterArcThicknesssProperty); } + get { return (double) GetValue(OuterArcThicknesssProperty); } set { SetValue(OuterArcThicknesssProperty, value); } } - #region Colors - - // Outer Arc Colors - public static readonly DependencyProperty OuterNormalColorProperty = - DependencyProperty.Register("OuterNormalColor", typeof(Color), typeof(RadialMenu), new PropertyMetadata(DefaultColors.OuterNormalColor, DependencyPropertyChanged)); - - public static readonly DependencyProperty OuterDisabledColorProperty = - DependencyProperty.Register("OuterDisabledColor", typeof(Color), typeof(RadialMenu), new PropertyMetadata(DefaultColors.OuterDisabledColor, DependencyPropertyChanged)); - - public static readonly DependencyProperty OuterHoverColorProperty = - DependencyProperty.Register("OuterHoverColor", typeof(Color), typeof(RadialMenu), new PropertyMetadata(DefaultColors.OuterHoverColor, DependencyPropertyChanged)); - - public static readonly DependencyProperty OuterTappedColorProperty = - DependencyProperty.Register("OuterTappedColor", typeof(Color), typeof(RadialMenu), new PropertyMetadata(DefaultColors.OuterTappedColor, DependencyPropertyChanged)); - - public Color OuterHoverColor - { - get { return (Color)GetValue(OuterHoverColorProperty); } - set { SetValue(OuterHoverColorProperty, value); } - } - - public Color OuterNormalColor - { - get { return (Color)GetValue(OuterNormalColorProperty); } - set { SetValue(OuterNormalColorProperty, value); } - } - - public Color OuterDisabledColor - { - get { return (Color)GetValue(OuterDisabledColorProperty); } - set - { - SetValue(OuterDisabledColorProperty, value); - BackgroundEllipse.Stroke = new SolidColorBrush(value); - } - } - - public SolidColorBrush OuterDisabledBrush { get; set; } - - public Color OuterTappedColor - { - get { return (Color)GetValue(OuterTappedColorProperty); } - set { SetValue(OuterTappedColorProperty, value); } - } - - // Inner Arc Colors - public static readonly DependencyProperty InnerNormalColorProperty = - DependencyProperty.Register("InnerNormalColor", typeof(Color), typeof(RadialMenu), new PropertyMetadata(DefaultColors.InnerNormalColor, DependencyPropertyChanged)); - - public static readonly DependencyProperty InnerHoverColorProperty = - DependencyProperty.Register("InnerHoverColor", typeof(Color), typeof(RadialMenu), new PropertyMetadata(DefaultColors.InnerHoverColor, DependencyPropertyChanged)); - - public static readonly DependencyProperty InnerTappedColorProperty = - DependencyProperty.Register("InnerTappedColor", typeof(Color), typeof(RadialMenu), new PropertyMetadata(DefaultColors.InnerTappedColor, DependencyPropertyChanged)); - - public static readonly DependencyProperty InnerReleasedColorProperty = - DependencyProperty.Register("InnerReleasedColor", typeof(Color), typeof(RadialMenu), new PropertyMetadata(DefaultColors.InnerReleasedColor, DependencyPropertyChanged)); - - public Color InnerHoverColor - { - get { return (Color)GetValue(InnerHoverColorProperty); } - set { SetValue(InnerHoverColorProperty, value); } - } - - public Color InnerNormalColor - { - get { return (Color)GetValue(InnerNormalColorProperty); } - set - { - SetValue(InnerNormalColorProperty, value); - BackgroundEllipse.Fill = new SolidColorBrush(value); - } - } - - public Color InnerTappedColor - { - get { return (Color)GetValue(InnerTappedColorProperty); } - set { SetValue(InnerTappedColorProperty, value); } - } - - public Color InnerReleasedColor - { - get { return (Color)GetValue(InnerReleasedColorProperty); } - set { SetValue(InnerReleasedColorProperty, value); } - } - - // Indication Arcs - public static readonly DependencyProperty UseIndicationArcsProperty = - DependencyProperty.Register("UseIndicationArcsProperty", typeof(bool), typeof(RadialMenu), new PropertyMetadata(true, DependencyPropertyChanged)); - - public static readonly DependencyProperty IndicationArcColorProperty = - DependencyProperty.Register("IndicationArcColor", typeof(Color), typeof(RadialMenu), new PropertyMetadata(DefaultColors.OuterTappedColor, DependencyPropertyChanged)); - - public static readonly DependencyProperty IndicationArcStrokeThicknessProperty = - DependencyProperty.Register("IndicationArcStrokeThickness", typeof(double), typeof(RadialMenu), new PropertyMetadata(3.0, DependencyPropertyChanged)); - - public static readonly DependencyProperty IndicationArcDistanceFromEdgeProperty = - DependencyProperty.Register("IndicationArcDistanceFromEdge", typeof(double), typeof(RadialMenu), new PropertyMetadata(10.0, DependencyPropertyChanged)); - - /// - /// Distance from the inner part of the outer band of the menu to the indication arc - /// - public double IndicationArcDistanceFromEdge - { - get { return (double)GetValue(IndicationArcDistanceFromEdgeProperty); } - set { SetValue(IndicationArcDistanceFromEdgeProperty, value); } - } - /// - /// If set to true, an idication arc will be used on all radial menu buttons - /// - public bool UseIndicationArcs - { - get { return (bool)GetValue(UseIndicationArcsProperty); } - set { SetValue(UseIndicationArcsProperty, value); } - } - /// - /// Sets the color for the indication arc - /// - public Color IndicationArcColor - { - get { return (Color)GetValue(IndicationArcColorProperty); } - set { SetValue(IndicationArcColorProperty, value); } - } - /// - /// The stroke thickness for the indication arc - /// - public double IndicationArcStrokeThickness - { - get { return (double)GetValue(IndicationArcStrokeThicknessProperty); } - set { SetValue(IndicationArcStrokeThicknessProperty, value); } - } - - // Background Ellipse - public static readonly DependencyProperty HasBackgroundEllipseProperty = - DependencyProperty.Register("HasBackgroundEllipse", typeof(bool), typeof(RadialMenu), null); - - public static readonly DependencyProperty BackgroundEllipseFillProperty = - DependencyProperty.Register("BackgroundEllipseFill", typeof(Color), typeof(RadialMenu), new PropertyMetadata(Colors.Transparent)); - /// - /// Background Ellpise, drawn behind the whole menu. Ignored if set on a submenu. + /// Previous pies (for back navigation) /// - public bool HasBackgroundEllipse + public IList PreviousPies { - get { return (bool)GetValue(HasBackgroundEllipseProperty); } - set { SetValue(HasBackgroundEllipseProperty, value); } + get { return _previousPies; } + set { SetField(ref _previousPies, value); } } /// - /// Fill color for the background ellpise + /// Previous center buttons (for back navigation) /// - public Color BackgroundEllipseFill + public Stack PreviousButtons { - get { return (Color)GetValue(BackgroundEllipseFillProperty); } - set { SetValue(BackgroundEllipseFillProperty, value); } + get { return PreviousCenterButtons; } + set { SetField(ref PreviousCenterButtons, value); } } - #endregion - - private IList _previousPies = new List(); - /// - /// Previous pies (for back navigation) + /// RadialMenuButtons on this menu. You can add buttons either in XAML or in code-behind. + /// If you change the list, the menu will be redrawn. /// - public IList PreviousPies + public IList Buttons { - get { return _previousPies; } - set { SetField(ref _previousPies, value); } + get { return Pie.Slices; } + set { Pie.Slices = value; } } /// - /// Previous center buttons (for back navigation) + /// Fired when the center button has been tapped /// - public Stack PreviousButtons - { - get { return PreviousCenterButtons; } - set { SetField(ref PreviousCenterButtons, value); } - } + public event CenterButtonTappedHandler CenterButtonTapped; /// - /// Event handler for dependency properties, asking the pie to redraw + /// Event handler for dependency properties, asking the pie to redraw /// /// /// @@ -290,7 +173,7 @@ private static void DependencyPropertyChanged(DependencyObject obj, DependencyPr } /// - /// Find a parent element by type! + /// Find a parent element by type! /// /// /// @@ -308,16 +191,16 @@ public static T FindParent(DependencyObject child) where T : DependencyObject } /// - /// Show or hide the outer wheel. This change is animated. + /// Show or hide the outer wheel. This change is animated. /// /// - /// If you want to change the animation, you can do so using the storyboards - /// OpenStoryboard and CloseStoryboard as defined in RadialMenu.xaml. + /// If you want to change the animation, you can do so using the storyboards + /// OpenStoryboard and CloseStoryboard as defined in RadialMenu.xaml. /// public async void TogglePie() { var floatingParent = FindParent(this); - var distance = Diameter / 2 - CenterButton.ActualHeight / 2; + var distance = Diameter/2 - CenterButton.ActualHeight/2; if (Pie.Visibility == Visibility.Visible) { @@ -339,8 +222,8 @@ public async void TogglePie() Height = Diameter; // Check if we're floating floatingParent?.ManipulateControlPosition(-distance, -distance, Width, Height); - Canvas.SetTop(CenterButton, Diameter / 2 - CenterButton.ActualHeight / 2); - Canvas.SetLeft(CenterButton, Diameter / 2 - CenterButton.ActualWidth / 2); + Canvas.SetTop(CenterButton, Diameter/2 - CenterButton.ActualHeight/2); + Canvas.SetLeft(CenterButton, Diameter/2 - CenterButton.ActualWidth/2); Pie.Visibility = Visibility.Visible; await OpenStoryboard.PlayAsync(); @@ -350,17 +233,7 @@ public async void TogglePie() } /// - /// RadialMenuButtons on this menu. You can add buttons either in XAML or in code-behind. - /// If you change the list, the menu will be redrawn. - /// - public IList Buttons - { - get { return Pie.Slices; } - set { Pie.Slices = value; } - } - - /// - /// Add a RadialMenuButton to the current pie + /// Adds a RadialMenuButton to the current pie /// /// RadialMenuButton to add to the current pie /// If you add a button to the currently visible Radial Menu, the menu will be redrawn. @@ -370,14 +243,14 @@ public void AddButton(RadialMenuButton button) } /// - /// Event Handler for a center button tap, calling user-registered events and handling navigation (if enabled) + /// Event Handler for a center button tap, calling user-registered events and handling navigation (if enabled) /// /// Sending object /// Event information private void OnCenterButtonTapped(object s, TappedRoutedEventArgs e) { // If an event has been registered with the center button tap, call it - CenterButtonTappedEvent?.Invoke(this, e); + CenterButtonTapped?.Invoke(this, e); if (PreviousPies.Count == 0) { @@ -385,7 +258,7 @@ private void OnCenterButtonTapped(object s, TappedRoutedEventArgs e) } if (PreviousPies.Count <= 0 || !IsCenterButtonNavigationEnabled) return; - + // a custom menu may have changed dragability. Ensure we are draggable, of using Floating var floatingParent = FindParent(this); if (floatingParent != null) floatingParent.ShouldManipulateChild = true; @@ -401,7 +274,7 @@ private void OnCenterButtonTapped(object s, TappedRoutedEventArgs e) } /// - /// Change the whole radial menu, using a new menu object. + /// Change the whole radial menu, using a new menu object. /// /// This method is used to facilitate the transition between a parent and a submenu. /// Sending object @@ -412,7 +285,8 @@ public void ChangeMenu(object s, MenuBase menu) { var radialMenu = (RadialMenu) menu; ChangePie(s, radialMenu.Pie, true); - ChangeCenterButton(s, Helpers.ButtonToShim(radialMenu.CenterButton, radialMenu.CenterButtonTappedEvent), true); + ChangeCenterButton(s, Helpers.ButtonToShim(radialMenu.CenterButton, radialMenu.CenterButtonTapped), + true); } else { @@ -425,11 +299,10 @@ public void ChangeMenu(object s, MenuBase menu) { floatingParent.ShouldManipulateChild = menu.IsDraggable; } - } /// - /// Clears the current pie, removing all currently displayed slices. + /// Clears the current pie, removing all currently displayed slices. /// /// Should we store the pie (for back navigation)? private void _clearPie(bool storePrevious) @@ -454,7 +327,7 @@ private void _clearPie(bool storePrevious) } /// - /// Change to custom MenuBase menu. + /// Change to custom MenuBase menu. /// /// Sending object /// The new submenu which will be placed in customRadialControlRoot Canvas @@ -462,7 +335,7 @@ private void _clearPie(bool storePrevious) public async void ChangeToCustomMenu(object s, MenuBase newSubMenu, bool storePrevious) { BackgroundEllipse.Visibility = Visibility.Visible; - await PieExitForChangeStoryboard.PlayAsync(); + if (IsMenuChangeAnimated) await PieExitForChangeStoryboard.PlayAsync(); _clearPie(storePrevious); @@ -482,18 +355,18 @@ public async void ChangeToCustomMenu(object s, MenuBase newSubMenu, bool storePr : new SolidColorBrush(InnerNormalColor); newMeterSubMenu.SetDefault(MeterSubMenu.BackgroundFillBrushProperty, defaultBackground); newMeterSubMenu.SetDefault(MeterSubMenu.OuterEdgeBrushProperty, new SolidColorBrush(OuterDisabledColor)); - newMeterSubMenu.SetDefault(MeterSubMenu.OuterEdgeThicknessProperty, OuterArcThickness); + newMeterSubMenu.SetDefault(MeterSubMenu.OuterEdgeThicknessProperty, OuterThickness); } newSubMenu.UpdateLayout(); - await CustomPieEnterForChangeStoryboard.PlayAsync(); + if (IsMenuChangeAnimated) await CustomPieEnterForChangeStoryboard.PlayAsync(); BackgroundEllipse.Visibility = Visibility.Collapsed; } /// - /// Change the current pie by replacing its PieSlices with new ones. If storePrevious is set to true, - /// the current pie will be stored away and restored during back navigation. + /// Change the current pie by replacing its PieSlices with new ones. If storePrevious is set to true, + /// the current pie will be stored away and restored during back navigation. /// /// This method is used to facilitate the transition between RadialMenus. /// Sending object @@ -503,19 +376,19 @@ public async void ChangePie(object s, Pie newPie, bool storePrevious) { BackgroundEllipse.Visibility = Visibility.Visible; - foreach (PieSlice ps in Pie.PieSlices) + foreach (var ps in Pie.PieSlices) { ps.OuterArcElement.Visibility = Visibility.Collapsed; } - + // Play animations, depending on what's in the control if (CustomRadialControlRoot.Children.Count > 0) { - await CustomPieExitForChangeStoryboard.PlayAsync(); + if (IsMenuChangeAnimated) await CustomPieExitForChangeStoryboard.PlayAsync(); } else { - await PieExitForChangeStoryboard.PlayAsync(); + if (IsMenuChangeAnimated) await PieExitForChangeStoryboard.PlayAsync(); } _clearPie(storePrevious); @@ -532,12 +405,13 @@ public async void ChangePie(object s, Pie newPie, bool storePrevious) // Ensure that we remember what the last selected item was Pie.SelectedItem = newPie.SelectedItem ?? null; - await PieEnterForChangeStoryboard.PlayAsync(); + if (IsMenuChangeAnimated) await PieEnterForChangeStoryboard.PlayAsync(); BackgroundEllipse.Visibility = Visibility.Collapsed; } /// - /// Change the center button using a CenterButtonShim object, which is used to store the current state of a CenterButton in a leightweight way. + /// Change the center button using a CenterButtonShim object, which is used to store the current state of a + /// CenterButton in a leightweight way. /// /// This method is used to facilitate transitions between submenus. /// Sending object @@ -556,7 +430,7 @@ public void ChangeCenterButton(object s, CenterButtonShim newButton, bool storeP FontSize = CenterButtonFontSize, Top = CenterButtonTop, Left = CenterButtonLeft, - CenterButtonTappedHandler = CenterButtonTappedEvent + CenterButtonTappedHandler = CenterButtonTapped }; PreviousButtons.Push(backupButton); @@ -568,22 +442,21 @@ public void ChangeCenterButton(object s, CenterButtonShim newButton, bool storeP CenterButtonBackgroundFill = newButton?.Background ?? CenterButtonBackgroundFill; CenterButtonIcon = (string) newButton?.Content ?? CenterButtonIcon; CenterButtonFontSize = newButton?.FontSize ?? CenterButtonFontSize; - CenterButtonTappedEvent = newButton?.CenterButtonTappedHandler ?? null; + CenterButtonTapped = newButton?.CenterButtonTappedHandler ?? null; if (newButton != null && !double.IsNaN(newButton.Top ?? 0) && !double.IsNaN(newButton.Left ?? 0)) { CenterButtonTop = newButton.Top ?? CenterButtonTop; CenterButtonLeft = newButton.Left ?? CenterButtonTop; } - } /// - /// Hide all tooltips displaying set access keys for the currently visible RadialMenuButtons. + /// Hide all tooltips displaying set access keys for the currently visible RadialMenuButtons. /// /// - /// RadialMenuButtons do not automatically generate AccessKeys - if you whish to enable keyboard navigation, - /// please consult the RadialMenuButton documentation and the "Access Keys" scenario documentation. + /// RadialMenuButtons do not automatically generate AccessKeys - if you whish to enable keyboard navigation, + /// please consult the RadialMenuButton documentation and the "Access Keys" scenario documentation. /// public void HideAccessKeyTooltips() { @@ -594,11 +467,11 @@ public void HideAccessKeyTooltips() } /// - /// Show all tooltips displaying set access keys for the currently visible RadialMenuButtons. + /// Show all tooltips displaying set access keys for the currently visible RadialMenuButtons. /// /// - /// RadialMenuButtons do not automatically generate AccessKeys - if you whish to enable keyboard navigation, - /// please consult the RadialMenuButton documentation and the "Access Keys" scenario documentation. + /// RadialMenuButtons do not automatically generate AccessKeys - if you whish to enable keyboard navigation, + /// please consult the RadialMenuButton documentation and the "Access Keys" scenario documentation. /// public void ShowAccessKeyTooltips() { @@ -609,12 +482,12 @@ public void ShowAccessKeyTooltips() } /// - /// Programmatically "click" the inner arc in a RadialMenuButton. + /// Programmatically "click" the inner arc in a RadialMenuButton. /// /// - /// This method is useful when implementing keyboard navigation. - /// RadialMenuButtons do not automatically generate AccessKeys - if you whish to enable keyboard navigation, - /// please consult the RadialMenuButton documentation and the "Access Keys" scenario documentation. + /// This method is useful when implementing keyboard navigation. + /// RadialMenuButtons do not automatically generate AccessKeys - if you whish to enable keyboard navigation, + /// please consult the RadialMenuButton documentation and the "Access Keys" scenario documentation. /// /// The RadialMenuButton to programmatically click. public void ClickInnerRadialMenuButton(RadialMenuButton rmb) @@ -626,12 +499,12 @@ public void ClickInnerRadialMenuButton(RadialMenuButton rmb) } /// - /// Programmatically "click" the outer arc in a RadialMenuButton + /// Programmatically "click" the outer arc in a RadialMenuButton /// /// - /// This method is useful when implementing keyboard navigation. - /// RadialMenuButtons do not automatically generate AccessKeys - if you whish to enable keyboard navigation, - /// please consult the RadialMenuButton documentation and the "Access Keys" scenario documentation. + /// This method is useful when implementing keyboard navigation. + /// RadialMenuButtons do not automatically generate AccessKeys - if you whish to enable keyboard navigation, + /// please consult the RadialMenuButton documentation and the "Access Keys" scenario documentation. /// /// The RadialMenuButton to programmatically click. public void ClickOuterRadialMenuButton(RadialMenuButton rmb) @@ -642,36 +515,179 @@ public void ClickOuterRadialMenuButton(RadialMenuButton rmb) } } - /// - /// Initializes the RadialMenu. The constructrer doesn't accept any parameters. - /// - public RadialMenu() + #region Colors + + // Outer Arc Colors + public static readonly DependencyProperty OuterNormalColorProperty = + DependencyProperty.Register("OuterNormalColor", typeof (Color), typeof (RadialMenu), + new PropertyMetadata(DefaultColors.OuterNormalColor, DependencyPropertyChanged)); + + public static readonly DependencyProperty OuterDisabledColorProperty = + DependencyProperty.Register("OuterDisabledColor", typeof (Color), typeof (RadialMenu), + new PropertyMetadata(DefaultColors.OuterDisabledColor, DependencyPropertyChanged)); + + public static readonly DependencyProperty OuterHoverColorProperty = + DependencyProperty.Register("OuterHoverColor", typeof (Color), typeof (RadialMenu), + new PropertyMetadata(DefaultColors.OuterHoverColor, DependencyPropertyChanged)); + + public static readonly DependencyProperty OuterTappedColorProperty = + DependencyProperty.Register("OuterTappedColor", typeof (Color), typeof (RadialMenu), + new PropertyMetadata(DefaultColors.OuterTappedColor, DependencyPropertyChanged)); + + public Color OuterHoverColor { - InitializeComponent(); + get { return (Color) GetValue(OuterHoverColorProperty); } + set { SetValue(OuterHoverColorProperty, value); } + } - PropertyChanged += (sender, args) => + public Color OuterNormalColor + { + get { return (Color) GetValue(OuterNormalColorProperty); } + set { SetValue(OuterNormalColorProperty, value); } + } + + public Color OuterDisabledColor + { + get { return (Color) GetValue(OuterDisabledColorProperty); } + set { - if (args.PropertyName == "Diameter") - { - Pie.Size = Diameter; - } + SetValue(OuterDisabledColorProperty, value); + BackgroundEllipse.Stroke = new SolidColorBrush(value); + } + } - }; + public SolidColorBrush OuterDisabledBrush { get; set; } - Loaded += (sender, args) => + public Color OuterTappedColor + { + get { return (Color) GetValue(OuterTappedColorProperty); } + set { SetValue(OuterTappedColorProperty, value); } + } + + // Inner Arc Colors + public static readonly DependencyProperty InnerNormalColorProperty = + DependencyProperty.Register("InnerNormalColor", typeof (Color), typeof (RadialMenu), + new PropertyMetadata(DefaultColors.InnerNormalColor, DependencyPropertyChanged)); + + public static readonly DependencyProperty InnerHoverColorProperty = + DependencyProperty.Register("InnerHoverColor", typeof (Color), typeof (RadialMenu), + new PropertyMetadata(DefaultColors.InnerHoverColor, DependencyPropertyChanged)); + + public static readonly DependencyProperty InnerTappedColorProperty = + DependencyProperty.Register("InnerTappedColor", typeof (Color), typeof (RadialMenu), + new PropertyMetadata(DefaultColors.InnerTappedColor, DependencyPropertyChanged)); + + public static readonly DependencyProperty InnerReleasedColorProperty = + DependencyProperty.Register("InnerReleasedColor", typeof (Color), typeof (RadialMenu), + new PropertyMetadata(DefaultColors.InnerReleasedColor, DependencyPropertyChanged)); + + public Color InnerHoverColor + { + get { return (Color) GetValue(InnerHoverColorProperty); } + set { SetValue(InnerHoverColorProperty, value); } + } + + public Color InnerNormalColor + { + get { return (Color) GetValue(InnerNormalColorProperty); } + set { - CenterButtonTop = Diameter/2 - (CenterButton.ActualWidth/2); - CenterButtonLeft = Diameter/2 - (CenterButton.ActualHeight/2); - PieCompositeTransform.CenterX = Diameter / 2; - PieCompositeTransform.CenterY = Diameter / 2; - CustomPieCompositeTransform.CenterX = Diameter / 2; - CustomPieCompositeTransform.CenterY = Diameter / 2; - }; - CenterButton.Style = Resources["RoundedCenterButton"] as Style; + SetValue(InnerNormalColorProperty, value); + BackgroundEllipse.Fill = new SolidColorBrush(value); + } + } - Pie.SourceRadialMenu = this; - CenterButton.DataContext = this; - CenterButton.Tapped += OnCenterButtonTapped; + public Color InnerTappedColor + { + get { return (Color) GetValue(InnerTappedColorProperty); } + set { SetValue(InnerTappedColorProperty, value); } + } + + public Color InnerReleasedColor + { + get { return (Color) GetValue(InnerReleasedColorProperty); } + set { SetValue(InnerReleasedColorProperty, value); } + } + + // Indication Arcs + public static readonly DependencyProperty UseIndicationArcsProperty = + DependencyProperty.Register("UseIndicationArcsProperty", typeof (bool), typeof (RadialMenu), + new PropertyMetadata(true, DependencyPropertyChanged)); + + public static readonly DependencyProperty IndicationArcColorProperty = + DependencyProperty.Register("IndicationArcColor", typeof (Color), typeof (RadialMenu), + new PropertyMetadata(DefaultColors.OuterTappedColor, DependencyPropertyChanged)); + + public static readonly DependencyProperty IndicationArcStrokeThicknessProperty = + DependencyProperty.Register("IndicationArcStrokeThickness", typeof (double), typeof (RadialMenu), + new PropertyMetadata(3.0, DependencyPropertyChanged)); + + public static readonly DependencyProperty IndicationArcDistanceFromEdgeProperty = + DependencyProperty.Register("IndicationArcDistanceFromEdge", typeof (double), typeof (RadialMenu), + new PropertyMetadata(10.0, DependencyPropertyChanged)); + + /// + /// Distance from the inner part of the outer band of the menu to the indication arc + /// + public double IndicationArcDistanceFromEdge + { + get { return (double) GetValue(IndicationArcDistanceFromEdgeProperty); } + set { SetValue(IndicationArcDistanceFromEdgeProperty, value); } } + + /// + /// If set to true, an idication arc will be used on all radial menu buttons + /// + public bool UseIndicationArcs + { + get { return (bool) GetValue(UseIndicationArcsProperty); } + set { SetValue(UseIndicationArcsProperty, value); } + } + + /// + /// Sets the color for the indication arc + /// + public Color IndicationArcColor + { + get { return (Color) GetValue(IndicationArcColorProperty); } + set { SetValue(IndicationArcColorProperty, value); } + } + + /// + /// The stroke thickness for the indication arc + /// + public double IndicationArcStrokeThickness + { + get { return (double) GetValue(IndicationArcStrokeThicknessProperty); } + set { SetValue(IndicationArcStrokeThicknessProperty, value); } + } + + // Background Ellipse + public static readonly DependencyProperty HasBackgroundEllipseProperty = + DependencyProperty.Register("HasBackgroundEllipse", typeof (bool), typeof (RadialMenu), null); + + public static readonly DependencyProperty BackgroundEllipseFillProperty = + DependencyProperty.Register("BackgroundEllipseFill", typeof (Color), typeof (RadialMenu), + new PropertyMetadata(Colors.Transparent)); + + /// + /// Background Ellpise, drawn behind the whole menu. Ignored if set on a submenu. + /// + public bool HasBackgroundEllipse + { + get { return (bool) GetValue(HasBackgroundEllipseProperty); } + set { SetValue(HasBackgroundEllipseProperty, value); } + } + + /// + /// Fill color for the background ellpise + /// + public Color BackgroundEllipseFill + { + get { return (Color) GetValue(BackgroundEllipseFillProperty); } + set { SetValue(BackgroundEllipseFillProperty, value); } + } + + #endregion } } \ No newline at end of file diff --git a/RadialMenuControl/nuget/RadialMenuControl.targets b/RadialMenuControl/nuget/RadialMenuControl.targets new file mode 100644 index 0000000..34cb172 --- /dev/null +++ b/RadialMenuControl/nuget/RadialMenuControl.targets @@ -0,0 +1,32 @@ + + + + + $(MSBuildThisFileDirectory)..\..\lib\uap10.0 + $(TargetDir.Replace("\bin\", "\obj\")) + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/RadialMenuDemo/MainPage.xaml.cs b/RadialMenuDemo/MainPage.xaml.cs index c2db519..1b4455a 100644 --- a/RadialMenuDemo/MainPage.xaml.cs +++ b/RadialMenuDemo/MainPage.xaml.cs @@ -25,7 +25,7 @@ public MainPage() }; - button1.InnerArcPressedEvent += Button1_InnerArcPressedEvent; + button1.InnerArcPressed += Button1InnerArcPressed; button1.Submenu = new RadialMenu {CenterButtonIcon = ""}; @@ -236,7 +236,7 @@ private void MeterMenu_ValueSelected(object sender, Windows.UI.Xaml.Input.Pointe Debug.WriteLine("User selected value: " + (sender as MeterSubMenu)?.SelectedValue); } - private void Button1_InnerArcPressedEvent(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e) + private void Button1InnerArcPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e) { this.Frame.Navigate(typeof (Melbourne)); } diff --git a/RadialMenuDemo/Melbourne.xaml b/RadialMenuDemo/Melbourne.xaml index 78742aa..166cf04 100644 --- a/RadialMenuDemo/Melbourne.xaml +++ b/RadialMenuDemo/Melbourne.xaml @@ -38,7 +38,7 @@ StartAngle="-22.5" HasBackgroundEllipse="True" BackgroundEllipseFill="White" - OuterArcThickness="22" + OuterThickness="22" CenterButtonBorder="Black" CenterButtonForeground="Black" CenterButtonIcon="🍩" @@ -178,7 +178,7 @@ - + diff --git a/RadialMenuDemo/Melbourne.xaml.cs b/RadialMenuDemo/Melbourne.xaml.cs index 834a113..54568e4 100644 --- a/RadialMenuDemo/Melbourne.xaml.cs +++ b/RadialMenuDemo/Melbourne.xaml.cs @@ -194,7 +194,7 @@ private void Melbourne_KeyDown(CoreWindow sender, KeyEventArgs args) if (args.VirtualKey == VirtualKey.Shift) MyRadialMenu.ShowAccessKeyTooltips(); } - private void HighlightRadialMenu_OnCenterButtonTappedEvent(object sender, TappedRoutedEventArgs e) + private void HighlightRadialMenuOnCenterButtonTapped(object sender, TappedRoutedEventArgs e) { var sendingMenu = sender as RadialMenu; if (sendingMenu != null && sendingMenu.Pie.SelectedItem != null)