New expander control.

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>
 

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;

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>
-        <Grid.RowDefinitions>
-            <RowDefinition x:Name="ContainerHeight" Height="Auto" />
-        </Grid.RowDefinitions>
-
         <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}"
+                Canvas.ZIndex="9999"
-                Fill="{ThemeResource SystemAccentColor}" />
+                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>

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)
+            //if (tappedHandlingFlag)
-            {
+            //{
-                tappedHandlingFlag = false;
+            //    tappedHandlingFlag = false;
-                e.Handled = true;
+            //    e.Handled = true;
-                return;
+            //    return;
-            }
+            //}
 
-            if (ConnectedExpander == null) return;
+            //if (ConnectedExpander == null) return;
 
-            ConnectedExpander.IsExpanded = !ConnectedExpander.IsExpanded;
+            //ConnectedExpander.IsExpanded = !ConnectedExpander.IsExpanded;
         }
 
         private void FirstActionClicked(object sender, RoutedEventArgs e)

Wino.Mail/Controls/WinoExpander.cs

@@ -1,17 +1,43 @@
-using Microsoft.UI.Xaml.Controls;
+using Windows.UI.Xaml;
-using Windows.UI.Xaml.Controls.Primitives;
+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();
+            get { return (bool)GetValue(IsExpandedProperty); }
-            if (GetTemplateChild("ExpanderHeader") is ToggleButton toggleButton)
+            set { SetValue(IsExpandedProperty, value); }
-            {
+        }
-                toggleButton.Padding = new Windows.UI.Xaml.Thickness(0, 4, 0, 4);
+
-            }
+        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);
         }
     }
 }

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>

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();
+        }
+    }
+}

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>
+                        </controls:WinoExpander.Header>
-                        <muxc:Expander.Content>
+                        <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"

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>