Replace WinoPivot with segmented

This commit is contained in:
Aleh Khantsevich
2024-08-26 17:27:27 +02:00
parent b64cc44531
commit f002ccfa3a
4 changed files with 25 additions and 346 deletions

View File

@@ -1,123 +0,0 @@
<UserControl
x:Class="Wino.Controls.WinoPivotControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
Loaded="ControlLoaded"
Unloaded="ControlUnloaded"
mc:Ignorable="d">
<UserControl.Resources>
<Style x:Key="WinoPivotControlListViewItemStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
<Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="True" />
<Setter Property="Padding" Value="12,4" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
<Setter Property="AllowDrop" Value="False" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
x:Name="Root"
Margin="0,0,6,0"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
CheckBrush="{ThemeResource ListViewItemCheckBrush}"
CheckMode="{ThemeResource ListViewItemCheckMode}"
ContentMargin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Control.IsTemplateFocusTarget="True"
CornerRadius="6"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackground}"
DragForeground="{ThemeResource ListViewItemDragForeground}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
PressedBackground="Transparent"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
RevealBackground="Transparent"
RevealBorderBrush="Transparent"
RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
SelectedBackground="Transparent"
SelectedForeground="{ThemeResource ApplicationForegroundThemeBrush}"
SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
SelectedPressedBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="PointerOverSelected" />
<VisualState x:Name="PointerOverPressed" />
<VisualState x:Name="Pressed" />
<VisualState x:Name="PressedSelected" />
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView
x:Name="PivotHeaders"
ItemContainerStyle="{StaticResource WinoPivotControlListViewItemStyle}"
ItemTemplate="{x:Bind DataTemplate, Mode=OneWay}"
ItemsSource="{x:Bind ItemsSource, Mode=OneWay}"
Transitions="{x:Null}"
ItemContainerTransitions="{x:Null}"
SelectedItem="{x:Bind SelectedItem, Mode=TwoWay}"
SelectionChanged="PivotHeaders_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<Grid
x:Name="SelectorPipe"
Grid.Row="1"
Width="1"
Height="3"
Margin="0,6,0,0"
HorizontalAlignment="Left"
SizeChanged="SelectorPipeSizeChanged">
<Grid.TranslationTransition>
<Vector3Transition Duration="0:0:0.5" />
</Grid.TranslationTransition>
</Grid>
</Grid>
</UserControl>

View File

@@ -1,195 +0,0 @@
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Numerics;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.Composition;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Wino.Extensions;
namespace Wino.Controls
{
// TODO: Memory leak with FolderPivot bindings.
public sealed partial class WinoPivotControl : UserControl
{
private Compositor _compositor;
private ShapeVisual _shapeVisual;
private CompositionSpriteShape _spriteShape;
private CompositionRoundedRectangleGeometry _roundedRectangle;
public event EventHandler<SelectionChangedEventArgs> SelectionChanged;
public static readonly DependencyProperty SelectedItemProperty = DependencyProperty.Register(nameof(SelectedItem), typeof(object), typeof(WinoPivotControl), new PropertyMetadata(null));
public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register(nameof(ItemsSource), typeof(object), typeof(WinoPivotControl), new PropertyMetadata(null));
public static readonly DependencyProperty SelectorPipeColorProperty = DependencyProperty.Register(nameof(SelectorPipeColor), typeof(SolidColorBrush), typeof(WinoPivotControl), new PropertyMetadata(Colors.Transparent, OnSelectorPipeColorChanged));
public static readonly DependencyProperty DataTemplateProperty = DependencyProperty.Register(nameof(DataTemplate), typeof(DataTemplate), typeof(WinoPivotControl), new PropertyMetadata(null));
public DataTemplate DataTemplate
{
get { return (DataTemplate)GetValue(DataTemplateProperty); }
set { SetValue(DataTemplateProperty, value); }
}
public SolidColorBrush SelectorPipeColor
{
get { return (SolidColorBrush)GetValue(SelectorPipeColorProperty); }
set { SetValue(SelectorPipeColorProperty, value); }
}
public object SelectedItem
{
get { return (object)GetValue(SelectedItemProperty); }
set { SetValue(SelectedItemProperty, value); }
}
public object ItemsSource
{
get { return (object)GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
private static void OnSelectorPipeColorChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
if (obj is WinoPivotControl control)
{
control.UpdateSelectorPipeColor();
}
}
private void UpdateSelectorPipeColor()
{
if (_spriteShape != null && _compositor != null)
{
_spriteShape.FillBrush = _compositor.CreateColorBrush(SelectorPipeColor.Color);
}
}
private void CreateSelectorVisuals()
{
_compositor = this.Visual().Compositor;
_roundedRectangle = _compositor.CreateRoundedRectangleGeometry();
_roundedRectangle.CornerRadius = new Vector2(3, 3);
_spriteShape = _compositor.CreateSpriteShape(_roundedRectangle);
_spriteShape.CenterPoint = new Vector2(100, 100);
_shapeVisual = _compositor.CreateShapeVisual();
_shapeVisual.Shapes.Clear();
_shapeVisual.Shapes.Add(_spriteShape);
SelectorPipe.SetChildVisual(_shapeVisual);
_shapeVisual.EnableImplicitAnimation(VisualPropertyType.Size, 400);
}
public WinoPivotControl()
{
this.InitializeComponent();
CreateSelectorVisuals();
}
private bool IsContainerPresent()
{
return SelectedItem != null && PivotHeaders.ContainerFromItem(SelectedItem) != null;
}
private void PivotHeaders_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
UpdateVisuals();
SelectionChanged?.Invoke(sender, e);
}
private void UpdateVisuals()
{
MoveSelector();
}
private void UpdateSelectorVisibility()
{
SelectorPipe.Visibility = IsContainerPresent() ? Visibility.Visible : Visibility.Collapsed;
}
private async void MoveSelector()
{
if (PivotHeaders.SelectedItem != null)
{
// Get selected item container position
// TODO: It's bad...
while(PivotHeaders.ContainerFromItem(PivotHeaders.SelectedItem) == null)
{
await Task.Delay(100);
}
UpdateSelectorVisibility();
var container = PivotHeaders.ContainerFromItem(PivotHeaders.SelectedItem) as FrameworkElement;
if (container != null)
{
var transformToVisual = container.TransformToVisual(this);
Point screenCoords = transformToVisual.TransformPoint(new Point(0, 0));
float actualWidth = 0, leftMargin = 0, translateX = 0;
leftMargin = (float)(screenCoords.X);
if (PivotHeaders.Items.Count > 1)
{
// Multiple items, pipe is centered.
actualWidth = (float)(container.ActualWidth + 12) / 2;
translateX = leftMargin - 10 + (actualWidth / 2);
}
else
{
actualWidth = (float)(container.ActualWidth) - 12;
translateX = leftMargin + 4;
}
SelectorPipe.Width = actualWidth;
SelectorPipe.Translation = new Vector3(translateX, 0, 0);
}
else
{
Debug.WriteLine("Container null");
}
}
}
private void SelectorPipeSizeChanged(object sender, SizeChangedEventArgs e)
{
_roundedRectangle.Size = e.NewSize.ToVector2();
_shapeVisual.Size = e.NewSize.ToVector2();
}
private void ControlUnloaded(object sender, RoutedEventArgs e)
{
//PivotHeaders.SelectionChanged -= PivotHeaders_SelectionChanged;
//PivotHeaders.SelectedItem = null;
//SelectedItem = null;
//ItemsSource = null;
}
private void ControlLoaded(object sender, RoutedEventArgs e)
{
// Bindings.Update();
}
}
}

View File

@@ -5,7 +5,6 @@
xmlns:abstract="using:Wino.Views.Abstract"
xmlns:collections="using:CommunityToolkit.Mvvm.Collections"
xmlns:controls="using:Wino.Controls"
xmlns:controls1="using:CommunityToolkit.WinUI.Controls"
xmlns:converters="using:Wino.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:domain="using:Wino.Core.Domain"
@@ -18,6 +17,7 @@
xmlns:menuflyouts="using:Wino.MenuFlyouts"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:selectors="using:Wino.Selectors"
xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
xmlns:viewModelData="using:Wino.Mail.ViewModels.Data"
xmlns:wino="using:Wino"
@@ -45,19 +45,6 @@
<SolidColorBrush x:Key="SystemControlRevealFocusVisualBrush" Color="#FF4C4A48" />
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="#FFFFFFFF" />
<DataTemplate x:Key="FolderPivotTemplate" x:DataType="viewModelData:FolderPivotViewModel">
<StackPanel Orientation="Horizontal" Spacing="4">
<TextBlock Text="{x:Bind FolderTitle}" />
<TextBlock
x:Name="CountTextBlock"
VerticalAlignment="Center"
FontWeight="SemiBold"
Visibility="{x:Bind ShouldDisplaySelectedItemCount, Mode=OneWay}">
<Run Text="(" /><Run Text="{x:Bind SelectedItemCount, Mode=OneWay}" /><Run Text=")" />
</TextBlock>
</StackPanel>
</DataTemplate>
<!-- Header Templates -->
<DataTemplate x:Key="MailGroupHeaderDefaultTemplate" x:DataType="collections:IReadOnlyObservableGroup">
<Grid
@@ -471,17 +458,31 @@
Visibility="{x:Bind helpers:XamlHelpers.IsSelectionModeMultiple(MailListView.SelectionMode), Mode=OneWay}" />
<!-- Folders -->
<controls:WinoPivotControl
x:Name="WinoPivot"
<toolkit:Segmented
Grid.Row="1"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
DataTemplate="{StaticResource FolderPivotTemplate}"
ItemsSource="{x:Bind ViewModel.PivotFolders, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.SelectedFolderPivot, Mode=TwoWay}"
SelectionChanged="FolderPivotChanged"
SelectorPipeColor="{ThemeResource NavigationViewSelectionIndicatorForeground}" />
Style="{StaticResource PivotSegmentedStyle}">
<toolkit:Segmented.ItemTemplate>
<DataTemplate x:DataType="viewModelData:FolderPivotViewModel">
<StackPanel Orientation="Horizontal" Spacing="4">
<TextBlock Text="{x:Bind FolderTitle}" />
<TextBlock
x:Name="CountTextBlock"
VerticalAlignment="Center"
FontWeight="SemiBold"
Visibility="{x:Bind ShouldDisplaySelectedItemCount, Mode=OneWay}">
<Run Text="(" /><Run Text="{x:Bind SelectedItemCount, Mode=OneWay}" /><Run Text=")" />
</TextBlock>
</StackPanel>
</DataTemplate>
</toolkit:Segmented.ItemTemplate>
<toolkit:Segmented.Resources>
<ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.Segmented/Segmented/Segmented.xaml" />
</toolkit:Segmented.Resources>
</toolkit:Segmented>
<!-- Filtering -->
<muxc:DropDownButton
@@ -649,7 +650,7 @@
</Grid>
</Border>
<controls1:PropertySizer
<toolkit:PropertySizer
x:Name="MailListSizer"
Grid.Column="1"
Width="16"

View File

@@ -141,6 +141,9 @@
<PackageReference Include="CommunityToolkit.Uwp.Behaviors">
<Version>8.1.240821</Version>
</PackageReference>
<PackageReference Include="CommunityToolkit.Uwp.Controls.Segmented">
<Version>8.1.240821</Version>
</PackageReference>
<PackageReference Include="CommunityToolkit.Uwp.Controls.SettingsControls">
<Version>8.1.240821</Version>
</PackageReference>
@@ -265,9 +268,6 @@
<Compile Include="MenuFlyouts\WinoOperationFlyout.cs" />
<Compile Include="MenuFlyouts\WinoOperationFlyoutItem.cs" />
<Compile Include="Controls\RendererCommandBar.cs" />
<Compile Include="Controls\WinoPivotControl.xaml.cs">
<DependentUpon>WinoPivotControl.xaml</DependentUpon>
</Compile>
<Compile Include="Converters\ReverseBooleanConverter.cs" />
<Compile Include="Dialogs\AccountCreationDialog.xaml.cs">
<DependentUpon>AccountCreationDialog.xaml</DependentUpon>
@@ -456,10 +456,6 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Controls\WinoPivotControl.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Dialogs\AccountEditDialog.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>