Skip to content

Commit

Permalink
Merge pull request #364 from trimble-oss/358-modus-listview-item-defa…
Browse files Browse the repository at this point in the history 
…ult-back-groundcolor-should-be-white

Changes of List view default background color and separator color on windows
  • Loading branch information
@rthanga1
rthanga1 committed Apr 4, 2024
2 parents 6095c0b + cdc4255 commit f199545
Show file tree
Hide file tree
Showing 10 changed files with 211 additions and 147 deletions.
28 changes: 15 additions & 13 deletions DemoApp/DemoApp/Platforms/Windows/App.xaml
View file
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
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
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
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 new IEnumerable ItemsSource
public TMListView()
{
HasUnevenRows = true;
if (DeviceInfo.Platform == DevicePlatform.WinUI)
{
SetDynamicResource(BackgroundColorProperty, "CellDefaultBackgroundColor");
}
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
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
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

0 comments on commit f199545

Please sign in to comment.