New expander control.

2024-08-26 01:07:51 +02:00
parent 31c7c8b46f
commit f4bbf6eb73
9 changed files with 176 additions and 45 deletions
--- a/Wino.Mail/App.xaml
+++ b/Wino.Mail/App.xaml
@@ -19,7 +19,9 @@
                <ResourceDictionary Source="/Styles/CommandBarItems.xaml" />
                <ResourceDictionary Source="/Styles/ItemContainerStyles.xaml" />
                <ResourceDictionary Source="/Styles/WinoInfoBar.xaml" />
+
                <styles:CustomMessageDialogStyles />
+                <styles:WinoExpanderStyle />

                <ResourceDictionary>

--- a/Wino.Mail/Controls/Advanced/WinoListView.cs
+++ b/Wino.Mail/Controls/Advanced/WinoListView.cs
@@ -2,7 +2,6 @@
 using System.Linq;
 using System.Windows.Input;
 using CommunityToolkit.Mvvm.Messaging;
-using Microsoft.UI.Xaml.Controls;
 using MoreLinq;
 using Serilog;
 using Windows.UI.Xaml;
@@ -356,7 +355,7 @@ namespace Wino.Controls.Advanced

            if (itemContainer is ListViewItem listItem)
            {
-                var expander = listItem.GetChildByName<Expander>("ThreadExpander");
+                var expander = listItem.GetChildByName<WinoExpander>("ThreadExpander");

                if (expander != null)
                    return expander.Content as WinoListView;
--- a/Wino.Mail/Controls/MailItemDisplayInformationControl.xaml
+++ b/Wino.Mail/Controls/MailItemDisplayInformationControl.xaml
@@ -3,14 +3,18 @@
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Wino.Controls"
-    xmlns:enums="using:Wino.Core.Domain.Enums"
    xmlns:domain="using:Wino.Core.Domain"
+    xmlns:enums="using:Wino.Core.Domain.Enums"
+    xmlns:helpers="using:Wino.Helpers"
+    HorizontalAlignment="Stretch"
+    VerticalAlignment="Stretch"
+    HorizontalContentAlignment="Stretch"
+    VerticalContentAlignment="Stretch"
    FocusVisualMargin="8"
    FocusVisualPrimaryBrush="{StaticResource SystemControlRevealFocusVisualBrush}"
    FocusVisualPrimaryThickness="2"
    FocusVisualSecondaryBrush="{StaticResource SystemControlFocusVisualSecondaryBrush}"
    FocusVisualSecondaryThickness="1"
-    xmlns:helpers="using:Wino.Helpers"
    PointerEntered="ControlPointerEntered"
    PointerExited="ControlPointerExited">

@@ -25,26 +29,24 @@
        </Style>
    </UserControl.Resources>

-    <Grid Background="Transparent" Tapped="ThreadHeaderTapped">
-        <Grid.RowDefinitions>
-            <RowDefinition x:Name="ContainerHeight" Height="Auto" />
-        </Grid.RowDefinitions>
-
+    <Grid>
        <Grid
            x:Name="RootContainer"
            Padding="0,1"
+            HorizontalAlignment="Stretch"
+            VerticalAlignment="Stretch"
            x:DefaultBindMode="OneWay">

            <!--  Custom Interaction Focus Indicator  -->
            <Ellipse
                Width="8"
                Height="8"
-                Canvas.ZIndex="9999"
                Margin="0,12,8,0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
-                Visibility="{x:Bind IsCustomFocused, Mode=OneWay}"
-                Fill="{ThemeResource SystemAccentColor}" />
+                Canvas.ZIndex="9999"
+                Fill="{ThemeResource SystemAccentColor}"
+                Visibility="{x:Bind IsCustomFocused, Mode=OneWay}" />

            <Border
                x:Name="RootContainerVisualWrapper"
@@ -66,9 +68,9 @@
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    FontSize="14"
-                    SenderContactPicture="{x:Bind MailItem.SenderContact.Base64ContactPicture}"
                    FromAddress="{x:Bind MailItem.FromAddress, Mode=OneWay}"
                    FromName="{x:Bind MailItem.FromName, Mode=OneWay}"
+                    SenderContactPicture="{x:Bind MailItem.SenderContact.Base64ContactPicture}"
                    Visibility="{x:Bind IsAvatarVisible, Mode=OneWay}" />

                <Grid
@@ -231,7 +233,7 @@
            <VisualStateGroup x:Name="SizingStates">
                <VisualState x:Name="Compact">
                    <VisualState.Setters>
-                        <Setter Target="ContainerHeight.Height" Value="50" />
+                        <Setter Target="RootContainer.Height" Value="50" />
                        <Setter Target="ContentGrid.Padding" Value="8,0" />
                        <Setter Target="PreviewTextContainer.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
@@ -243,7 +245,7 @@
                <!--  Medium  -->
                <VisualState x:Name="Medium">
                    <VisualState.Setters>
-                        <Setter Target="ContainerHeight.Height" Value="65" />
+                        <Setter Target="RootContainer.Height" Value="65" />
                        <Setter Target="ContentGrid.Padding" Value="6,0" />
                        <Setter Target="PreviewTextContainer.Visibility" Value="Visible" />
                    </VisualState.Setters>
@@ -255,7 +257,7 @@
                <!--  Spacious  -->
                <VisualState x:Name="Spacious">
                    <VisualState.Setters>
-                        <Setter Target="ContainerHeight.Height" Value="Auto" />
+                        <Setter Target="RootContainer.Height" Value="Auto" />
                        <Setter Target="ContentGrid.Padding" Value="12,12,6,12" />
                        <Setter Target="PreviewTextContainer.Visibility" Value="Visible" />
                    </VisualState.Setters>
--- a/Wino.Mail/Controls/MailItemDisplayInformationControl.xaml.cs
+++ b/Wino.Mail/Controls/MailItemDisplayInformationControl.xaml.cs
@@ -1,6 +1,5 @@
 using System.Numerics;
 using System.Windows.Input;
-using Microsoft.UI.Xaml.Controls;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Input;
@@ -21,7 +20,7 @@ namespace Wino.Controls
        public static readonly DependencyProperty IsCustomFocusedProperty = DependencyProperty.Register(nameof(IsCustomFocused), typeof(bool), typeof(MailItemDisplayInformationControl), new PropertyMetadata(false));
        public static readonly DependencyProperty IsAvatarVisibleProperty = DependencyProperty.Register(nameof(IsAvatarVisible), typeof(bool), typeof(MailItemDisplayInformationControl), new PropertyMetadata(true));
        public static readonly DependencyProperty IsSubjectVisibleProperty = DependencyProperty.Register(nameof(IsSubjectVisible), typeof(bool), typeof(MailItemDisplayInformationControl), new PropertyMetadata(true));
-        public static readonly DependencyProperty ConnectedExpanderProperty = DependencyProperty.Register(nameof(ConnectedExpander), typeof(Expander), typeof(MailItemDisplayInformationControl), new PropertyMetadata(null));
+        public static readonly DependencyProperty ConnectedExpanderProperty = DependencyProperty.Register(nameof(ConnectedExpander), typeof(WinoExpander), typeof(MailItemDisplayInformationControl), new PropertyMetadata(null));
        public static readonly DependencyProperty LeftHoverActionProperty = DependencyProperty.Register(nameof(LeftHoverAction), typeof(MailOperation), typeof(MailItemDisplayInformationControl), new PropertyMetadata(MailOperation.None));
        public static readonly DependencyProperty CenterHoverActionProperty = DependencyProperty.Register(nameof(CenterHoverAction), typeof(MailOperation), typeof(MailItemDisplayInformationControl), new PropertyMetadata(MailOperation.None));
        public static readonly DependencyProperty RightHoverActionProperty = DependencyProperty.Register(nameof(RightHoverAction), typeof(MailOperation), typeof(MailItemDisplayInformationControl), new PropertyMetadata(MailOperation.None));
@@ -73,9 +72,9 @@ namespace Wino.Controls
        }


-        public Expander ConnectedExpander
+        public WinoExpander ConnectedExpander
        {
-            get { return (Expander)GetValue(ConnectedExpanderProperty); }
+            get { return (WinoExpander)GetValue(ConnectedExpanderProperty); }
            set { SetValue(ConnectedExpanderProperty, value); }
        }

@@ -167,16 +166,16 @@ namespace Wino.Controls
            // Also hover action button clicks will be delegated here after the execution runs.
            // We should not expand the thread if the reason we are here is for hover actions.

-            if (tappedHandlingFlag)
-            {
-                tappedHandlingFlag = false;
-                e.Handled = true;
-                return;
-            }
+            //if (tappedHandlingFlag)
+            //{
+            //    tappedHandlingFlag = false;
+            //    e.Handled = true;
+            //    return;
+            //}

-            if (ConnectedExpander == null) return;
+            //if (ConnectedExpander == null) return;

-            ConnectedExpander.IsExpanded = !ConnectedExpander.IsExpanded;
+            //ConnectedExpander.IsExpanded = !ConnectedExpander.IsExpanded;
        }

        private void FirstActionClicked(object sender, RoutedEventArgs e)
--- a/Wino.Mail/Controls/WinoExpander.cs
+++ b/Wino.Mail/Controls/WinoExpander.cs
@@ -1,17 +1,43 @@
-using Microsoft.UI.Xaml.Controls;
-using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Markup;

 namespace Wino.Controls
 {
-    public class WinoExpander : Expander
+    [ContentProperty(Name = nameof(Content))]
+    public class WinoExpander : Control
    {
-        protected override void OnApplyTemplate()
+        public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(nameof(Header), typeof(UIElement), typeof(WinoExpander), new PropertyMetadata(null));
+        public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(nameof(Content), typeof(UIElement), typeof(WinoExpander), new PropertyMetadata(null));
+        public static readonly DependencyProperty IsExpandedProperty = DependencyProperty.Register(nameof(IsExpanded), typeof(bool), typeof(WinoExpander), new PropertyMetadata(false, new PropertyChangedCallback(OnIsExpandedChanged)));
+
+        public bool IsExpanded
        {
-            base.OnApplyTemplate();
-            if (GetTemplateChild("ExpanderHeader") is ToggleButton toggleButton)
-            {
-                toggleButton.Padding = new Windows.UI.Xaml.Thickness(0, 4, 0, 4);
-            }
+            get { return (bool)GetValue(IsExpandedProperty); }
+            set { SetValue(IsExpandedProperty, value); }
+        }
+
+        public UIElement Content
+        {
+            get { return (UIElement)GetValue(ContentProperty); }
+            set { SetValue(ContentProperty, value); }
+        }
+
+        public UIElement Header
+        {
+            get { return (UIElement)GetValue(HeaderProperty); }
+            set { SetValue(HeaderProperty, value); }
+        }
+
+        private static void OnIsExpandedChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
+        {
+            if (obj is WinoExpander control)
+                control.UpdateVisualStates();
+        }
+
+        private void UpdateVisualStates()
+        {
+            VisualStateManager.GoToState(this, IsExpanded ? "Expanded" : "Collapsed", true);
        }
    }
 }
--- a/Wino.Mail/Styles/WinoExpanderStyle.xaml
+++ b/Wino.Mail/Styles/WinoExpanderStyle.xaml
@@ -0,0 +1,86 @@
+<ResourceDictionary
+    x:Class="Wino.Styles.WinoExpanderStyle"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
+    xmlns:controls="using:Wino.Controls"
+    xmlns:local="using:Wino.Styles"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls">
+
+    <ControlTemplate x:Key="DefaultWinoThreadControlTemplate" TargetType="controls:WinoExpander">
+        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+            <!--  Header  -->
+            <Grid Background="{TemplateBinding Background}">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+
+                <muxc:AnimatedIcon
+                    xmlns:local="using:Microsoft.UI.Xaml.Controls"
+                    x:Name="ExpandCollapseChevron"
+                    Width="{StaticResource ExpanderChevronGlyphSize}"
+                    Height="{StaticResource ExpanderChevronGlyphSize}"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    local:AnimatedIcon.State="NormalOff"
+                    AutomationProperties.AccessibilityView="Raw"
+                    Foreground="{ThemeResource ExpanderChevronForeground}"
+                    RenderTransformOrigin="0.5, 0.5"
+                    Visibility="Collapsed">
+                    <animatedvisuals:AnimatedChevronRightDownSmallVisualSource />
+                    <muxc:AnimatedIcon.FallbackIconSource>
+                        <muxc:FontIconSource
+                            FontFamily="{StaticResource SymbolThemeFontFamily}"
+                            FontSize="12"
+                            Glyph="{StaticResource ExpanderChevronDownGlyph}"
+                            IsTextScaleFactorEnabled="False" />
+                    </muxc:AnimatedIcon.FallbackIconSource>
+                    <muxc:AnimatedIcon.RenderTransform />
+                </muxc:AnimatedIcon>
+
+
+                <ContentControl
+                    x:Name="HeaderGrid"
+                    Grid.Column="1"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    Content="{TemplateBinding Header}" />
+            </Grid>
+
+            <ContentControl
+                x:Name="ContentArea"
+                Grid.Row="1"
+                HorizontalAlignment="Stretch"
+                VerticalAlignment="Stretch"
+                HorizontalContentAlignment="Stretch"
+                VerticalContentAlignment="Stretch"
+                Content="{TemplateBinding Content}"
+                Visibility="Collapsed" />
+
+            <VisualStateManager.VisualStateGroups>
+                <VisualStateGroup x:Name="OpenCloseStates">
+                    <VisualState x:Name="Collapsed" />
+                    <VisualState x:Name="Expanded">
+                        <VisualState.Setters>
+                            <Setter Target="ExpandCollapseChevron.(controls:AnimatedIcon.State)" Value="NormalOn" />
+                            <Setter Target="ContentArea.Visibility" Value="Visible" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateManager.VisualStateGroups>
+        </Grid>
+    </ControlTemplate>
+
+    <Style TargetType="controls:WinoExpander">
+        <Setter Property="Background" Value="{ThemeResource AppBarItemBackgroundThemeBrush}" />
+        <Setter Property="Template" Value="{StaticResource DefaultWinoThreadControlTemplate}" />
+    </Style>
+
+</ResourceDictionary>
--- a/Wino.Mail/Styles/WinoExpanderStyle.xaml.cs
+++ b/Wino.Mail/Styles/WinoExpanderStyle.xaml.cs
@@ -0,0 +1,12 @@
+using Windows.UI.Xaml;
+
+namespace Wino.Styles
+{
+    partial class WinoExpanderStyle : ResourceDictionary
+    {
+        public WinoExpanderStyle()
+        {
+            this.InitializeComponent();
+        }
+    }
+}
--- a/Wino.Mail/Views/MailListPage.xaml
+++ b/Wino.Mail/Views/MailListPage.xaml
@@ -158,18 +158,14 @@
                <DataTemplate x:DataType="viewModelData:ThreadMailItemViewModel">
                    <controls:WinoExpander
                        x:Name="ThreadExpander"
-                        Padding="0"
                        HorizontalAlignment="Stretch"
                        HorizontalContentAlignment="Stretch"
-                        BackgroundSizing="InnerBorderEdge"
-                        BorderThickness="0"
                        IsExpanded="{x:Bind IsThreadExpanded, Mode=TwoWay}">
-                        <muxc:Expander.Header>
+                        <controls:WinoExpander.Header>
                            <controls:MailItemDisplayInformationControl
                                x:DefaultBindMode="OneWay"
                                Background="Transparent"
                                BorderThickness="0"
-                                CanDrag="True"
                                CenterHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.CenterHoverAction, Mode=OneWay}"
                                ConnectedExpander="{Binding ElementName=ThreadExpander}"
                                ContextRequested="MailItemContextRequested"
@@ -185,8 +181,8 @@
                                Prefer24HourTimeFormat="{Binding ElementName=root, Path=ViewModel.PreferencesService.Prefer24HourTimeFormat, Mode=OneWay}"
                                RightHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.RightHoverAction, Mode=OneWay}"
                                ShowPreviewText="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsShowPreviewEnabled, Mode=OneWay}" />
-                        </muxc:Expander.Header>
-                        <muxc:Expander.Content>
+                        </controls:WinoExpander.Header>
+                        <controls:WinoExpander.Content>
                            <listview:WinoListView
                                x:Name="ThreadItemsList"
                                ui:ListViewExtensions.ItemContainerStretchDirection="Horizontal"
@@ -201,7 +197,7 @@
                                    </TransitionCollection>
                                </ListView.ItemContainerTransitions>
                            </listview:WinoListView>
-                        </muxc:Expander.Content>
+                        </controls:WinoExpander.Content>
                    </controls:WinoExpander>
                </DataTemplate>
            </selectors:MailItemDisplaySelector.ThreadMailItemTemplate>
@@ -273,6 +269,7 @@
            x:Name="MailListContainer"
            Grid.Column="0"
            Padding="5,0,0,0"
+            HorizontalAlignment="Stretch"
            Background="{ThemeResource WinoContentZoneBackgroud}"
            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
            BorderThickness="1"
@@ -570,6 +567,7 @@
                        <SemanticZoom.ZoomedInView>
                            <listview:WinoListView
                                x:Name="MailListView"
+                                HorizontalAlignment="Stretch"
                                HorizontalContentAlignment="Stretch"
                                ui:ListViewExtensions.ItemContainerStretchDirection="Horizontal"
                                ui:ScrollViewerExtensions.EnableMiddleClickScrolling="True"
--- a/Wino.Mail/Wino.Mail.csproj
+++ b/Wino.Mail/Wino.Mail.csproj
@@ -309,6 +309,9 @@
    <Compile Include="Styles\CustomMessageDialogStyles.xaml.cs">
      <DependentUpon>CustomMessageDialogStyles.xaml</DependentUpon>
    </Compile>
+    <Compile Include="Styles\WinoExpanderStyle.xaml.cs">
+      <DependentUpon>WinoExpanderStyle.xaml</DependentUpon>
+    </Compile>
    <Compile Include="Views\Abstract\AboutPageAbstract.cs" />
    <Compile Include="Views\Abstract\AccountDetailsPageAbstract.cs" />
    <Compile Include="Views\Abstract\AccountManagementPageAbstract.cs" />
@@ -529,6 +532,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="Styles\WinoExpanderStyle.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="Styles\WinoInfoBar.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>