Skip to content

Commit

Permalink
added ShowOptionsButton proeprty for TableView
Browse files Browse the repository at this point in the history
  • Loading branch information
@w-ahmad
w-ahmad committed May 5, 2024
1 parent e865b9d commit 8a4bab5
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 26 deletions.
7 changes: 7 additions & 0 deletions src/WinUI.TableView/TableView.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,13 +405,20 @@ public bool IsReadOnly
set => SetValue(IsReadOnlyProperty, value);
}

public bool ShowOptionsButton
{
get => (bool)GetValue(ShowOptionsButtonProperty);
set => SetValue(ShowOptionsButtonProperty, value);
}

public static readonly new DependencyProperty ItemsSourceProperty = DependencyProperty.Register(nameof(ItemsSource), typeof(IList), typeof(TableView), new PropertyMetadata(null, OnItemsSourceChanged));
public static readonly DependencyProperty ColumnsProperty = DependencyProperty.Register(nameof(Columns), typeof(TableViewColumnsCollection), typeof(TableView), new PropertyMetadata(null));
public static readonly DependencyProperty RowHeightProperty = DependencyProperty.Register(nameof(RowHeight), typeof(double), typeof(TableView), new PropertyMetadata(40d));
public static readonly DependencyProperty RowMaxHeightProperty = DependencyProperty.Register(nameof(RowMaxHeight), typeof(double), typeof(TableView), new PropertyMetadata(double.PositiveInfinity));
public static readonly DependencyProperty ShowExportOptionsProperty = DependencyProperty.Register(nameof(ShowExportOptions), typeof(bool), typeof(TableView), new PropertyMetadata(false));
public static readonly DependencyProperty AutoGenerateColumnsProperty = DependencyProperty.Register(nameof(AutoGenerateColumns), typeof(bool), typeof(TableView), new PropertyMetadata(true, OnAutoGenerateColumnsChanged));
public static readonly DependencyProperty IsReadOnlyProperty = DependencyProperty.Register(nameof(IsReadOnly), typeof(bool), typeof(TableView), new PropertyMetadata(false));
public static readonly DependencyProperty ShowOptionsButtonProperty = DependencyProperty.Register(nameof(ShowOptionsButton), typeof(bool), typeof(TableView), new PropertyMetadata(true));

public event EventHandler<TableViewAutoGeneratingColumnEventArgs>? AutoGeneratingColumn;
public event EventHandler<TableViewExportRowsContentEventArgs>? ExportAllRowsContent;
Expand Down
45 changes: 29 additions & 16 deletions src/WinUI.TableView/TableViewHeaderRow.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@

namespace WinUI.TableView;

[TemplateVisualState(Name = VisualStates.StateNormal, GroupName = VisualStates.GroupCommon)]
[TemplateVisualState(Name = VisualStates.StateSelectAllButton, GroupName = VisualStates.GroupSelectAllButton)]
[TemplateVisualState(Name = VisualStates.StateSelectAllCheckBox, GroupName = VisualStates.GroupSelectAllButton)]
[TemplateVisualState(Name = VisualStates.StateOptionsButton, GroupName = VisualStates.GroupSelectAllButton)]
public partial class TableViewHeaderRow : Control
{
private Button? _optionsButton;
Expand All @@ -26,9 +30,10 @@ protected override void OnApplyTemplate()
{
base.OnApplyTemplate();

_optionsButton = GetTemplateChild("OptionsButton") as Button;
_selectAllCheckBox = GetTemplateChild("SelectAllCheckBox") as CheckBox;
TableView?.RegisterPropertyChangedCallback(ListViewBase.SelectionModeProperty, delegate { OnTableViewSelectionModeChanged(); });
_optionsButton = GetTemplateChild("optionsButton") as Button;
_selectAllCheckBox = GetTemplateChild("selectAllCheckBox") as CheckBox;
TableView?.RegisterPropertyChangedCallback(ListViewBase.SelectionModeProperty, delegate { SetSelectAllButtonState(); });
TableView?.RegisterPropertyChangedCallback(TableView.ShowOptionsButtonProperty, delegate { SetSelectAllButtonState(); });
TableView?.RegisterPropertyChangedCallback(TableView.ItemsSourceProperty, delegate { OnTableViewSelectionChanged(); });

if (TableView is null)
Expand All @@ -47,12 +52,20 @@ protected override void OnApplyTemplate()
ShowAndHidOptionsFlyout();
async void ShowAndHidOptionsFlyout()
{
_optionsButton.Flyout.ShowAt(_optionsButton);
await Task.Delay(5);
_optionsButton.Flyout.Hide();
if (_optionsButton.Visibility == Visibility.Visible)
{
_optionsButton.Flyout.ShowAt(_optionsButton);
await Task.Delay(5);
_optionsButton.Flyout.Hide();
}
}
}

if (GetTemplateChild("selectAllButton") is Button selectAllButton)
{
selectAllButton.Tapped += delegate { TableView.SelectAllSafe(); };
}

if (_selectAllCheckBox is not null)
{
_selectAllCheckBox.Tapped += OnSelectAllCheckBoxTapped;
Expand All @@ -66,8 +79,7 @@ async void ShowAndHidOptionsFlyout()
}

SetExportOptionsVisibility();
OnTableViewSelectionModeChanged();

SetSelectAllButtonState();
}

private void OnTableViewColumnsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
Expand Down Expand Up @@ -180,18 +192,19 @@ private void OnTableViewSelectionChanged()
}
}

private void OnTableViewSelectionModeChanged()
private void SetSelectAllButtonState()
{
if (_optionsButton is not null)
if (TableView.SelectionMode == ListViewSelectionMode.Multiple)
{
_optionsButton.Visibility = TableView?.SelectionMode == ListViewSelectionMode.Multiple &&
TableView?.IsMultiSelectCheckBoxEnabled == true ? Visibility.Collapsed : Visibility.Visible;
VisualStates.GoToState(this, false, VisualStates.StateSelectAllCheckBox);
}

if (_selectAllCheckBox is not null)
else if (TableView.ShowOptionsButton)
{
VisualStates.GoToState(this, false, VisualStates.StateOptionsButton);
}
else
{
_selectAllCheckBox.Visibility = TableView?.SelectionMode == ListViewSelectionMode.Multiple &&
TableView?.IsMultiSelectCheckBoxEnabled == true ? Visibility.Visible : Visibility.Collapsed;
VisualStates.GoToState(this, false, VisualStates.StateSelectAllButton);
}
}

Expand Down
68 changes: 58 additions & 10 deletions src/WinUI.TableView/Themes/TableViewHeaderRow.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
ResourceKey="ControlStrokeColorDefaultBrush" />

<x:String x:Key="OptionsButtonIcon">&#xe712;</x:String>
<x:String x:Key="SelectAllButtonIcon">&#xE936;</x:String>

<Style x:Key="DefaultTableViewHeaderRowStyle"
TargetType="local:TableViewHeaderRow">
Expand All @@ -16,16 +17,44 @@
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TableViewHeaderRow">
<Border Background="{TemplateBinding Background}">
<Grid>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
</VisualStateGroup>
<VisualStateGroup x:Name="SelectAllButtonStates">
<VisualState x:Name="SelectAllButton" />
<VisualState x:Name="OptionsButton">
<VisualState.Setters>
<Setter Target="optionsButton.Visibility"
Value="Visible" />
<Setter Target="selectAllButton.Visibility"
Value="Collapsed" />
<Setter Target="selectAllCheckBox.Visibility"
Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SelectAllCheckBox">
<VisualState.Setters>
<Setter Target="selectAllCheckBox.Visibility"
Value="Visible" />
<Setter Target="selectAllButton.Visibility"
Value="Collapsed" />
<Setter Target="optionsButton.Visibility"
Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Button x:Name="OptionsButton"
<Button x:Name="selectAllButton"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
BorderThickness="0,0,1,1"
Background="Transparent"
Padding="0"
Expand All @@ -34,10 +63,29 @@
Visibility="Visible"
IsTabStop="False"
BorderBrush="{ThemeResource TableViewGridLinesBrush}">
<FontIcon Grid.Row="1"
FontSize="12"
<FontIcon FontSize="12"
Margin="6,20,0,0"
Opacity="0.5"
Glyph="{ThemeResource SelectAllButtonIcon}"
RenderTransformOrigin="0.5,0.5">
<FontIcon.RenderTransform>
<RotateTransform Angle="-45" />
</FontIcon.RenderTransform>
</FontIcon>
</Button>

<Button x:Name="optionsButton"
VerticalAlignment="Stretch"
BorderThickness="0,0,1,1"
Background="Transparent"
Padding="0"
CornerRadius="4,0,0,0"
Width="16"
Visibility="Collapsed"
IsTabStop="False"
BorderBrush="{ThemeResource TableViewGridLinesBrush}">
<FontIcon FontSize="12"
Margin="4,0,0,0"
Grid.ColumnSpan="2"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Glyph="{ThemeResource OptionsButtonIcon}"
Expand Down Expand Up @@ -100,7 +148,7 @@
</Button.Flyout>
</Button>

<CheckBox x:Name="SelectAllCheckBox"
<CheckBox x:Name="selectAllCheckBox"
Margin="14,0,2,0"
MinWidth="0"
IsTabStop="False"
Expand All @@ -115,10 +163,10 @@
BorderThickness="0,0,0,1"
BorderBrush="{ThemeResource TableViewGridLinesBrush}" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

</ResourceDictionary>
22 changes: 22 additions & 0 deletions src/WinUI.TableView/VisualStates.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,28 @@ internal static class VisualStates
/// </summary>
public const string GroupScrollBars = "ScrollBarsStates";

// GroupSelectAllButton

/// <summary>
/// Select all button state
/// </summary>
public const string StateSelectAllButton = "SelectAllButton";

/// <summary>
/// Select all checkbox state
/// </summary>
public const string StateSelectAllCheckBox = "SelectAllCheckBox";

/// <summary>
/// Options button state
/// </summary>
public const string StateOptionsButton = "OptionsButton";

/// <summary>
/// Select all button state group
/// </summary>
public const string GroupSelectAllButton = "SelectAllButtonStates";

/// <summary>
/// Use VisualStateManager to change the visual state of the control.
/// </summary>
Expand Down

0 comments on commit 8a4bab5

Please sign in to comment.