Add SettingsExpander

samples/SettingsNavigationTest/MainPage.xaml

@@ -32,6 +32,71 @@
  <ComboBoxItem Content="Yandex"/>
  </ComboBox>
  </ui:SettingsCard>
+
+ <ui:SettingsExpander x:Name="settingsCard"
+ Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
+ Header="SettingsExpander">
+ <ui:SettingsExpander.HeaderIcon>
+ <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Home}"/>
+ </ui:SettingsExpander.HeaderIcon>
+ <!-- TODO: This should be TwoWay bound but throws compile error in Uno. -->
+ <ComboBox SelectedIndex="0">
+ <ComboBoxItem>Option 1</ComboBoxItem>
+ <ComboBoxItem>Option 2</ComboBoxItem>
+ <ComboBoxItem>Option 3</ComboBoxItem>
+ </ComboBox>
+
+ <ui:SettingsExpander.Items>
+ <ui:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
+ <Button Content="Button" />
+ </ui:SettingsCard>
+ <ui:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
+ Header="This item can be clicked"
+ IsClickEnabled="True" />
+
+ <ui:SettingsCard ContentAlignment="Left">
+ <CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
+ </ui:SettingsCard>
+
+ <ui:SettingsCard HorizontalContentAlignment="Left"
+ ContentAlignment="Vertical"
+ Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!"
+ Header="Vertically aligned">
+ <ui:GridView SelectedIndex="1">
+ <ui:GridViewItem>
+ <Border Width="64"
+ Height="64"
+ Background="#0078D4"
+ CornerRadius="4" />
+ </ui:GridViewItem>
+ <ui:GridViewItem>
+ <Border Width="64"
+ Height="64"
+ Background="#005EB7"
+ CornerRadius="4" />
+ </ui:GridViewItem>
+ <ui:GridViewItem>
+ <Border Width="64"
+ Height="64"
+ Background="#003D92"
+ CornerRadius="4" />
+ </ui:GridViewItem>
+ <ui:GridViewItem>
+ <Border Width="64"
+ Height="64"
+ Background="#001968"
+ CornerRadius="4" />
+ </ui:GridViewItem>
+ </ui:GridView>
+ </ui:SettingsCard>
+ <ui:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention"
+ Header="Customization">
+
+ </ui:SettingsCard>
+ </ui:SettingsExpander.Items>
+ </ui:SettingsExpander>
+
+
  <ui:SettingsCard Header="Sidebar"
  Description="Provides many useful tools.">
  <ui:SettingsCard.HeaderIcon>
@@ -46,5 +111,6 @@
  </ui:SettingsCard.HeaderIcon>
  <ui:ToggleSwitch HorizontalContentAlignment="Right"/>
  </ui:SettingsCard>
+
  </ikw:SimpleStackPanel>
 </Page>

source/iNKORE.UI.WPF.Modern.Controls/Controls/SettingsControls/SettingsCard.cs → source/iNKORE.UI.WPF.Modern.Controls/Controls/SettingsControls/SettingsCard/SettingsCard.cs

@@ -136,6 +136,22 @@ private void DisableButtonInteraction()
  //PreviewKeyUp -= Control_PreviewKeyUp;
  }
 
+ protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
+ {
+ base.OnMouseLeftButtonDown(e);
+
+ if (!this.IsClickEnabled)
+ e.Handled = false;
+ }
+ protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
+ {
+ base.OnMouseLeftButtonUp(e);
+
+ if (!this.IsClickEnabled)
+ e.Handled = false;
+ }
+
+
  //private void Control_PreviewKeyUp(object sender, KeyEventArgs e)
  //{
  // if (e.Key == Key.Enter || e.Key == Key.Space) // || e.Key == Key.GamepadA
@@ -168,7 +184,7 @@ private void DisableButtonInteraction()
  //protected override void OnMouseDown(MouseButtonEventArgs e)
  //{
  // base.OnMouseDown(e);
- 
+
  // if (IsClickEnabled && IsEnabled)
  // {
  // this.IsPressed = true;
@@ -196,7 +212,7 @@ private void DisableButtonInteraction()
  //protected override void OnMouseLeave(MouseEventArgs e)
  //{
  // base.OnMouseLeave(e);
- 
+
  // if (IsClickEnabled && IsEnabled)
  // VisualStateManager.GoToState(this, NormalState, true);
  //}

source/iNKORE.UI.WPF.Modern.Controls/Controls/SettingsControls/SettingsExpander/SettingsExpander.Events.cs

@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace iNKORE.UI.WPF.Modern.Controls
+{
+ public partial class SettingsExpander
+ {
+ /// <summary>
+ /// Fires when the SettingsExpander is opened
+ /// </summary>
+ public event EventHandler? Expanded;
+
+ /// <summary>
+ /// Fires when the expander is closed
+ /// </summary>
+ public event EventHandler? Collapsed;
+ }
+}

source/iNKORE.UI.WPF.Modern.Controls/Controls/SettingsControls/SettingsExpander/SettingsExpander.ItemsControl.cs

@@ -0,0 +1,79 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Controls;
+using System.Windows;
+using System.Windows.Markup;
+using System.Collections;
+
+namespace iNKORE.UI.WPF.Modern.Controls
+{
+
+ //// Implement properties for ItemsControl like behavior.
+ public partial class SettingsExpander
+ {
+ public IList Items
+ {
+ get { return (IList)GetValue(ItemsProperty); }
+ set { SetValue(ItemsProperty, value); }
+ }
+
+ public static readonly DependencyProperty ItemsProperty =
+ DependencyProperty.Register(nameof(Items), typeof(IList), typeof(SettingsExpander), new PropertyMetadata(null, OnItemsConnectedPropertyChanged));
+
+ public object ItemsSource
+ {
+ get { return (object)GetValue(ItemsSourceProperty); }
+ set { SetValue(ItemsSourceProperty, value); }
+ }
+
+ public static readonly DependencyProperty ItemsSourceProperty =
+ DependencyProperty.Register(nameof(ItemsSource), typeof(object), typeof(SettingsExpander), new PropertyMetadata(null, OnItemsConnectedPropertyChanged));
+
+ public object ItemTemplate
+ {
+ get { return (object)GetValue(ItemTemplateProperty); }
+ set { SetValue(ItemTemplateProperty, value); }
+ }
+
+ public static readonly DependencyProperty ItemTemplateProperty =
+ DependencyProperty.Register(nameof(ItemTemplate), typeof(object), typeof(SettingsExpander), new PropertyMetadata(null));
+
+ public StyleSelector ItemContainerStyleSelector
+ {
+ get { return (StyleSelector)GetValue(ItemContainerStyleSelectorProperty); }
+ set { SetValue(ItemContainerStyleSelectorProperty, value); }
+ }
+
+ public static readonly DependencyProperty ItemContainerStyleSelectorProperty =
+ DependencyProperty.Register(nameof(ItemContainerStyleSelector), typeof(StyleSelector), typeof(SettingsExpander), new PropertyMetadata(null));
+
+ private static void OnItemsConnectedPropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs args)
+ {
+ if (dependencyObject is SettingsExpander expander && expander._itemsRepeater is not null)
+ {
+ var datasource = expander.ItemsSource;
+
+ if (datasource is null)
+ {
+ datasource = expander.Items;
+ }
+
+ expander._itemsRepeater.ItemsSource = datasource;
+ }
+ }
+
+ private void ItemsRepeater_ElementPrepared(ItemsRepeater sender, ItemsRepeaterElementPreparedEventArgs args)
+ {
+ if (ItemContainerStyleSelector != null &&
+ args.Element is FrameworkElement element &&
+ element.ReadLocalValue(FrameworkElement.StyleProperty) == DependencyProperty.UnsetValue)
+ {
+ // TODO: Get item from args.Index?
+ element.Style = ItemContainerStyleSelector.SelectStyle(null, element);
+ }
+ }
+ }
+}

source/iNKORE.UI.WPF.Modern.Controls/Controls/SettingsControls/SettingsExpander/SettingsExpander.Properties.cs

@@ -0,0 +1,170 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Controls;
+using System.Windows.Markup;
+using System.Windows;
+
+namespace iNKORE.UI.WPF.Modern.Controls
+{
+ // Licensed to the .NET Foundation under one or more agreements.
+ // The .NET Foundation licenses this file to you under the MIT license.
+ // See the LICENSE file in the project root for more information.
+
+ [ContentProperty(name:nameof(Content))]
+ public partial class SettingsExpander
+ {
+ /// <summary>
+ /// The backing <see cref="DependencyProperty"/> for the <see cref="CornerRadius"/> property.
+ /// </summary>
+ public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register(
+ nameof(CornerRadius), typeof(CornerRadius), typeof(SettingsExpander), new PropertyMetadata(default(CornerRadius)));
+
+
+ /// <summary>
+ /// The backing <see cref="DependencyProperty"/> for the <see cref="Header"/> property.
+ /// </summary>
+ public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(
+ nameof(Header),
+ typeof(object),
+ typeof(SettingsExpander),
+ new PropertyMetadata(defaultValue: null));
+
+ /// <summary>
+ /// The backing <see cref="DependencyProperty"/> for the <see cref="Description"/> property.
+ /// </summary>
+ public static readonly DependencyProperty DescriptionProperty = DependencyProperty.Register(
+ nameof(Description),
+ typeof(object),
+ typeof(SettingsExpander),
+ new PropertyMetadata(defaultValue: null));
+
+ /// <summary>
+ /// The backing <see cref="DependencyProperty"/> for the <see cref="HeaderIcon"/> property.
+ /// </summary>
+ public static readonly DependencyProperty HeaderIconProperty = DependencyProperty.Register(
+ nameof(HeaderIcon),
+ typeof(IconElement),
+ typeof(SettingsExpander),
+ new PropertyMetadata(defaultValue: null));
+
+
+ /// <summary>
+ /// The backing <see cref="DependencyProperty"/> for the <see cref="Content"/> property.
+ /// </summary>
+ public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(
+ nameof(Content),
+ typeof(object),
+ typeof(SettingsExpander),
+ new PropertyMetadata(defaultValue: null));
+
+ /// <summary>
+ /// The backing <see cref="DependencyProperty"/> for the <see cref="Content"/> property.
+ /// </summary>
+ public static readonly DependencyProperty ItemsHeaderProperty = DependencyProperty.Register(
+ nameof(ItemsHeader),
+ typeof(UIElement),
+ typeof(SettingsExpander),
+ new PropertyMetadata(defaultValue: null));
+
+ /// <summary>
+ /// The backing <see cref="DependencyProperty"/> for the <see cref="Content"/> property.
+ /// </summary>
+ public static readonly DependencyProperty ItemsFooterProperty = DependencyProperty.Register(
+ nameof(ItemsFooter),
+ typeof(UIElement),
+ typeof(SettingsExpander),
+ new PropertyMetadata(defaultValue: null));
+
+ /// <summary>
+ /// The backing <see cref="DependencyProperty"/> for the <see cref="IsExpanded"/> property.
+ /// </summary>
+ public static readonly DependencyProperty IsExpandedProperty = DependencyProperty.Register(
+ nameof(IsExpanded),
+ typeof(bool),
+ typeof(SettingsExpander),
+ new PropertyMetadata(defaultValue: false, (d, e) => ((SettingsExpander)d).OnIsExpandedPropertyChanged((bool)e.OldValue, (bool)e.NewValue)));
+
+ /// <summary>
+ /// 
+ /// <summary>
+ /// Gets or sets the Header.
+ /// </summary>
+ public object Header
+ {
+ get => (object)GetValue(HeaderProperty);
+ set => SetValue(HeaderProperty, value);
+ }
+
+ /// <summary>
+ /// Gets or sets the Description.
+ /// </summary>
+#pragma warning disable CS0109 // Member does not hide an inherited member; new keyword is not required
+ public new object Description
+#pragma warning restore CS0109 // Member does not hide an inherited member; new keyword is not required
+ {
+ get => (object)GetValue(DescriptionProperty);
+ set => SetValue(DescriptionProperty, value);
+ }
+
+ /// <summary>
+ /// Gets or sets the HeaderIcon.
+ /// </summary>
+ public IconElement HeaderIcon
+ {
+ get => (IconElement)GetValue(HeaderIconProperty);
+ set => SetValue(HeaderIconProperty, value);
+ }
+
+ /// <summary>
+ /// Gets or sets the Content.
+ /// </summary>
+ public object Content
+ {
+ get => (object)GetValue(ContentProperty);
+ set => SetValue(ContentProperty, value);
+ }
+
+ /// <summary>
+ /// Gets or sets the ItemsFooter.
+ /// </summary>
+ public UIElement ItemsHeader
+ {
+ get => (UIElement)GetValue(ItemsHeaderProperty);
+ set => SetValue(ItemsHeaderProperty, value);
+ }
+
+ /// <summary>
+ /// Gets or sets the ItemsFooter.
+ /// </summary>
+ public UIElement ItemsFooter
+ {
+ get => (UIElement)GetValue(ItemsFooterProperty);
+ set => SetValue(ItemsFooterProperty, value);
+ }
+
+ /// <summary>
+ /// Gets or sets the IsExpanded state.
+ /// </summary>
+ public bool IsExpanded
+ {
+ get => (bool)GetValue(IsExpandedProperty);
+ set => SetValue(IsExpandedProperty, value);
+ }
+ protected virtual void OnIsExpandedPropertyChanged(bool oldValue, bool newValue)
+ {
+ OnIsExpandedChanged(oldValue, newValue);
+
+ if (newValue)
+ {
+ Expanded?.Invoke(this, EventArgs.Empty);
+ }
+ else
+ {
+ Collapsed?.Invoke(this, EventArgs.Empty);
+ }
+ }
+ }
+}