Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes of List view default background color and separator color on windows #364

Merged
merged 3 commits into from
Apr 4, 2024
Merged

Changes of List view default background color and separator color on windows #364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b7285f
Changes of List view default background color on windows
Sofiya-kumar Mar 27, 2024
ab97151
Changes for template cell background color
Sofiya-kumar Mar 27, 2024
cdc4255
Changes for separator color.
Sofiya-kumar Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 15 additions & 13 deletions DemoApp/DemoApp/Platforms/Windows/App.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
<maui:MauiWinUIApplication
x:Class="DemoApp.WinUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:maui="using:Microsoft.Maui"
xmlns:local="using:DemoApp.WinUI">
<maui:MauiWinUIApplication.Resources>
<StaticResource x:Key="ListViewItemBackgroundSelectedPointerOver" ResourceKey="ListViewItemBackgroundColor" />
<StaticResource x:Key="ListViewItemBackgroundSelected" ResourceKey="ListViewItemBackgroundColor" />
<SolidColorBrush x:Key="ListViewItemBackgroundColor" Color="#DCEDF9" />
<Thickness x:Key="TextControlBorderThemeThickness">0</Thickness>
<Thickness x:Key="TextControlBorderThemeThicknessFocused">0</Thickness>
</maui:MauiWinUIApplication.Resources>
<maui:MauiWinUIApplication x:Class="DemoApp.WinUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:maui="using:Microsoft.Maui"
xmlns:local="using:DemoApp.WinUI">
<maui:MauiWinUIApplication.Resources>
<StaticResource x:Key="ListViewItemBackgroundSelectedPointerOver"
ResourceKey="ListViewItemBackgroundColor" />
<StaticResource x:Key="ListViewItemBackgroundSelected"
ResourceKey="ListViewItemBackgroundColor" />
<SolidColorBrush x:Key="ListViewItemBackgroundColor"
Color="#DCEDF9" />
<Thickness x:Key="TextControlBorderThemeThickness">0</Thickness>
<Thickness x:Key="TextControlBorderThemeThicknessFocused">0</Thickness>
</maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>
135 changes: 77 additions & 58 deletions DemoApp/DemoApp/Views/ListViewSamplePage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,28 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoApp.Views.ListViewSamplePage"
xmlns:local ="clr-namespace:DemoApp.Views"
xmlns:local="clr-namespace:DemoApp.Views"
xmlns:constants="clr-namespace:DemoApp.Constant"
xmlns:modus="http://modus.trimble.com/components"
Title="ListViewSamplePage">
<ContentPage.Resources>
<DataTemplate x:Name="TextCell" x:Key="textCellKey">
<modus:TextCell
Title="{Binding Name}"
Description="{Binding Address}"
LeftIconSource="{Binding ProfilePic}"
RightIconSource="{Binding ProfilePic}">
<DataTemplate x:Name="TextCell"
x:Key="textCellKey">
<modus:TextCell Title="{Binding Name}"
Description="{Binding Address}"
LeftIconSource="{Binding ProfilePic}"
RightIconSource="{Binding ProfilePic}">
</modus:TextCell>
</DataTemplate>
<DataTemplate x:Name="ViewCell" x:Key="viewCellKey">
<DataTemplate x:Name="ViewCell"
x:Key="viewCellKey">
<modus:TemplateCell>
<modus:TemplateCell.Content>
<Grid RowSpacing="10" Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Border HeightRequest="80"
<Grid RowSpacing="10"
RowDefinitions="auto,auto,auto,auto"
ColumnDefinitions="auto,*,*"
Padding="10">
<Border HeightRequest="80"
WidthRequest="80"
VerticalOptions="Center"
Stroke="{Binding Color}"
Expand All @@ -41,16 +33,39 @@
Margin="0,0,0,0">
<Image Source="{Binding ProfilePic}"
Margin="10,0,10,0"
VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="80" WidthRequest="80"/>
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="80"
WidthRequest="80" />

</Border>

<Label Text="{Binding Name}" Grid.Row="0" Grid.Column="1" FontSize="Medium"/>
<Label Text="{Binding DateofBirth, StringFormat='DateofBirth: {0:dd/MM/yyyy}'}" Grid.Row="1" Grid.Column="1" FontSize="Small"/>
<Label Text="{Binding Address}" Grid.Row="2" Grid.Column="1" FontSize="Micro"/>
<StackLayout Grid.Column="2" Grid.Row="1" HorizontalOptions="Center" Orientation="Horizontal" Spacing="5" VerticalOptions="Center" >
<ImageButton Source="{x:Static constants:ImageConstants.Email}" HeightRequest="20" WidthRequest="20" Command="{Binding EmailClickedCommand}"/>
<ImageButton Source="{x:Static constants:ImageConstants.Phone}" HeightRequest="20" WidthRequest="20" Command="{Binding PhoneClickedCommand}"/>
<Label Text="{Binding Name}"
Grid.Row="0"
Grid.Column="1"
FontSize="Medium" />
<Label Text="{Binding DateofBirth, StringFormat='DateofBirth: {0:dd/MM/yyyy}'}"
Grid.Row="1"
Grid.Column="1"
FontSize="Small" />
<Label Text="{Binding Address}"
Grid.Row="2"
Grid.Column="1"
FontSize="Micro" />
<StackLayout Grid.Column="2"
Grid.Row="1"
HorizontalOptions="Center"
Orientation="Horizontal"
Spacing="5"
VerticalOptions="Center">
<ImageButton Source="{x:Static constants:ImageConstants.Email}"
HeightRequest="20"
WidthRequest="20"
Command="{Binding EmailClickedCommand}" />
<ImageButton Source="{x:Static constants:ImageConstants.Phone}"
HeightRequest="20"
WidthRequest="20"
Command="{Binding PhoneClickedCommand}" />
</StackLayout>

</Grid>
Expand All @@ -59,34 +74,38 @@
</DataTemplate>

</ContentPage.Resources>
<StackLayout Orientation="Vertical">
<Label Text="Select View Type" FontSize="Medium" Padding="10"></Label>
<modus:TMRadioButtonGroup x:Name="CellGroup"
Padding="10"
SelectedIndex="0"
HorizontalOptions="Center"
SelectedRadioButtonChanged="OnCellGroupButtonChanged"
Orientation="Horizontal">
<modus:TMRadioButton Text="Text Cell" />
<modus:TMRadioButton Text="Template Cell" />
</modus:TMRadioButtonGroup>
<Label Text="Selection Mode" FontSize="Medium" Padding="10"></Label>
<modus:TMRadioButtonGroup x:Name="SelectionGroup"
Padding="10"
SelectedIndex="0"
HorizontalOptions="Center"
SelectedRadioButtonChangedCommand="{Binding SelectionGroupCommand}"
Orientation="Horizontal">
<modus:TMRadioButton Text="Single" />
<modus:TMRadioButton Text="Multiple" />
<modus:TMRadioButton Text="None" />
</modus:TMRadioButtonGroup>
<modus:TMListView x:Name="textCellList"
IsVisible="True"
SelectionMode="{Binding SelectionMode}"
SelectionChangedCommand="{Binding ItemSelectedCommand}"
ItemsSource="{Binding ItemSource}">
</modus:TMListView>
<StackLayout Orientation="Vertical">
<Label Text="Select View Type"
FontSize="Medium"
Padding="10"></Label>
<modus:TMRadioButtonGroup x:Name="CellGroup"
Padding="10"
SelectedIndex="0"
HorizontalOptions="Center"
SelectedRadioButtonChanged="OnCellGroupButtonChanged"
Orientation="Horizontal">
<modus:TMRadioButton Text="Text Cell" />
<modus:TMRadioButton Text="Template Cell" />
</modus:TMRadioButtonGroup>
<Label Text="Selection Mode"
FontSize="Medium"
Padding="10"></Label>
<modus:TMRadioButtonGroup x:Name="SelectionGroup"
Padding="10"
SelectedIndex="0"
HorizontalOptions="Center"
SelectedRadioButtonChangedCommand="{Binding SelectionGroupCommand}"
Orientation="Horizontal">
<modus:TMRadioButton Text="Single" />
<modus:TMRadioButton Text="Multiple" />
<modus:TMRadioButton Text="None" />
</modus:TMRadioButtonGroup>
<modus:TMListView x:Name="textCellList"
IsVisible="True"
SelectionMode="{Binding SelectionMode}"
SelectionChangedCommand="{Binding ItemSelectedCommand}"
ItemsSource="{Binding ItemSource}">
</modus:TMListView>

</StackLayout>
</StackLayout>
</ContentPage>
11 changes: 7 additions & 4 deletions DemoApp/DemoApp/Views/ListViewSamplePage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,14 @@ public ListViewSamplePage()
#region Private Methods
private void OnCellGroupButtonChanged(object sender, TMRadioButtonEventArgs e)
{
textCellList.ItemTemplate = e.RadioButtonIndex switch
if (e.RadioButtonIndex == 0)
{
1 => ViewCell,
_ => TextCell
};
textCellList.ItemTemplate = TextCell;
}
else
{
textCellList.ItemTemplate = ViewCell;
}
}
#endregion
}
Expand Down
25 changes: 14 additions & 11 deletions Trimble.Modus.Components/Controls/ListView/TMListView.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
using System.Collections;
using System.Windows.Input;
using Trimble.Modus.Components.Constant;
using Trimble.Modus.Components.Enums;
using Trimble.Modus.Components.Helpers;

namespace Trimble.Modus.Components;

Expand All @@ -13,13 +11,13 @@ public partial class TMListView : ListView
#endregion
#region Bindable Properties
public static new readonly BindableProperty SelectionModeProperty =
BindableProperty.Create(nameof(SelectionMode), typeof(ListSelectionMode), typeof(TMListView),propertyChanged: OnSelectionModeChanged);
BindableProperty.Create(nameof(SelectionMode), typeof(ListSelectionMode), typeof(TMListView), propertyChanged: OnSelectionModeChanged);

public static readonly BindableProperty SelectionChangedCommandProperty =
BindableProperty.Create(nameof(SelectionChangedCommand), typeof(ICommand), typeof(TMListView));

public static readonly BindableProperty SelectableItemsProperty =
BindableProperty.Create(nameof(SelectableItems), typeof(List<object>), typeof(TMListView),propertyChanged: OnSelectableItemsChanged);
BindableProperty.Create(nameof(SelectableItems), typeof(List<object>), typeof(TMListView), propertyChanged: OnSelectableItemsChanged);

#endregion
#region Public properties
Expand All @@ -33,13 +31,13 @@ public List<object> SelectableItems
{
get => (List<object>)GetValue(SelectableItemsProperty);
set => SetValue(SelectableItemsProperty, value);

}
public new ListSelectionMode SelectionMode
{
get => (ListSelectionMode)GetValue(SelectionModeProperty);
set => SetValue(SelectionModeProperty, value);

}
public new IEnumerable ItemsSource
{
Expand All @@ -51,8 +49,13 @@ public List<object> SelectableItems
public TMListView()
{
HasUnevenRows = true;
if (DeviceInfo.Platform == DevicePlatform.WinUI)
{
SetDynamicResource(BackgroundColorProperty, "CellDefaultBackgroundColor");
rthanga1 marked this conversation as resolved.
Show resolved Hide resolved
}
SeparatorVisibility = SeparatorVisibility.None;
ItemTapped += ListViewItemTapped;
(this as ListView)?.SetValue(ListView.SelectionModeProperty, ListViewSelectionMode.Single);
(this as ListView)?.SetValue(ListView.SelectionModeProperty, ListViewSelectionMode.Single);
SelectableItems = new List<object> { };
}
#endregion
Expand Down Expand Up @@ -125,22 +128,22 @@ private void UpdateCellColor()
{
if (SelectableItems.Contains(textCell.BindingContext))
{
textCell.SetDynamicResource(TextCell.BackgrondColorProperty, "CellSelectedBackgroundColor");
textCell.SetDynamicResource(TextCell.BackgroundColorProperty, "CellSelectedBackgroundColor");
}
else
{
textCell.SetDynamicResource(TextCell.BackgrondColorProperty, "CellDefaultBackgroundColor");
textCell.SetDynamicResource(TextCell.BackgroundColorProperty, "CellDefaultBackgroundColor");
}
}
else if (item is TemplateCell templateCell)
{
if (SelectableItems.Contains(templateCell.BindingContext))
{
templateCell.SetDynamicResource(TemplateCell.BackgrondColorProperty, "CellSelectedBackgroundColor");
templateCell.SetDynamicResource(TemplateCell.BackgroundColorProperty, "CellSelectedBackgroundColor");
}
else
{
templateCell.SetDynamicResource(TemplateCell.BackgrondColorProperty, "CellDefaultBackgroundColor");
templateCell.SetDynamicResource(TemplateCell.BackgroundColorProperty, "CellDefaultBackgroundColor");
}
}
}
Expand Down
27 changes: 16 additions & 11 deletions Trimble.Modus.Components/Controls/ListView/TemplateCell.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
<?xml version="1.0" encoding="utf-8" ?>
<ViewCell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Name="CustomViewCell"
xmlns:constant="clr-namespace:Trimble.Modus.Components.Constant"
x:Class="Trimble.Modus.Components.TemplateCell">
<Grid x:Name="grid" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentView
Content="{Binding Source={x:Reference CustomViewCell}, Path=Content}">
</ContentView>
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Name="CustomViewCell"
xmlns:constant="clr-namespace:Trimble.Modus.Components.Constant"
x:Class="Trimble.Modus.Components.TemplateCell">
<VerticalStackLayout>
<Grid x:Name="grid"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentView Content="{Binding Source={x:Reference CustomViewCell}, Path=Content}">
</ContentView>
</Grid>
<BoxView HeightRequest="0.4"
Color="{DynamicResource SeparatorColor}" />
</VerticalStackLayout>
</ViewCell>

12 changes: 7 additions & 5 deletions Trimble.Modus.Components/Controls/ListView/TemplateCell.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,28 @@ public partial class TemplateCell : ViewCell
#region Bindable Properties
public static readonly BindableProperty ContentProperty =
BindableProperty.Create(nameof(Content), typeof(View), typeof(TemplateCell));
public static readonly BindableProperty BackgrondColorProperty =
BindableProperty.Create(nameof(BackgrondColor), typeof(Color), typeof(TextCell), Colors.White,
public static readonly BindableProperty BackgroundColorProperty =
BindableProperty.Create(nameof(BackgroundColor), typeof(Color), typeof(TextCell), Colors.White,
propertyChanged: OnBackgroundColorChanged);

public View Content
{
get => (View)GetValue(ContentProperty);
set => SetValue(ContentProperty, value);
}
public Color BackgrondColor
public Color BackgroundColor
{
get => (Color)GetValue(BackgrondColorProperty);
set => SetValue(BackgrondColorProperty, value);
get => (Color)GetValue(BackgroundColorProperty);
set => SetValue(BackgroundColorProperty, value);
}
#endregion

#region Constructor
public TemplateCell()
{
InitializeComponent();

grid.BackgroundColor = BackgroundColor;
}
#endregion
#region Private Methods
Expand Down
Loading
Loading