Skip to content

Commit

Permalink
Changes of List view default background color on windows
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sofiya-kumar
Sofiya-kumar committed Mar 27, 2024
1 parent aba9775 commit 1b7285f
Show file tree
Hide file tree
Showing 6 changed files with 176 additions and 127 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>
21 changes: 12 additions & 9 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,11 +128,11 @@ 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)
Expand Down
17 changes: 9 additions & 8 deletions Trimble.Modus.Components/Controls/ListView/TemplateCell.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
<?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">
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 Content="{Binding Source={x:Reference CustomViewCell}, Path=Content}">
</ContentView>
</Grid>
</Grid>
</ViewCell>

75 changes: 45 additions & 30 deletions Trimble.Modus.Components/Controls/ListView/TextCell.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,57 @@
<?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"
xmlns:converters="clr-namespace:Trimble.Modus.Components.Converters"
xmlns:constant="clr-namespace:Trimble.Modus.Components.Constant"
xmlns:helpers="clr-namespace:Trimble.Modus.Components.Helpers"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Name="textCell"
x:Class="Trimble.Modus.Components.TextCell">

<Grid x:Name="grid" >
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:Trimble.Modus.Components.Converters"
xmlns:constant="clr-namespace:Trimble.Modus.Components.Constant"
xmlns:helpers="clr-namespace:Trimble.Modus.Components.Helpers"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Name="textCell"
x:Class="Trimble.Modus.Components.TextCell">
<Grid x:Name="grid"
BindingContext="{Binding Source={x:Reference textCell}}"
HeightRequest="{Binding Description, Converter={StaticResource DescriptionToRowHeightConverter}}"
ColumnSpacing="12"
ColumnDefinitions="auto,*,auto"
Padding="12,6">
<Grid.Resources>
<ResourceDictionary>
<toolkit:IsNotNullConverter x:Key="ImageNullOrEmptyBoolConverter" />
<toolkit:IsStringNotNullOrEmptyConverter x:Key="IsStringNotNullOrEmptyConverter" />
<converters:DescriptionToRowHeightConverter x:Key="DescriptionToRowHeightConverter" />
</ResourceDictionary>
</Grid.Resources>

<Grid BindingContext="{Binding Source={x:Reference textCell}}" HeightRequest="{Binding Description, Converter={StaticResource DescriptionToRowHeightConverter}}" ColumnSpacing="12" Padding="12,6" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</ResourceDictionary>
</Grid.Resources>

<Image Source="{Binding LeftIconSource}" IsVisible="{Binding LeftIconSource, Converter={StaticResource ImageNullOrEmptyBoolConverter}}"
WidthRequest="24" HeightRequest="24" VerticalOptions="Center" HorizontalOptions="Start"/>
<Image Source="{Binding LeftIconSource}"
IsVisible="{Binding LeftIconSource, Converter={StaticResource ImageNullOrEmptyBoolConverter}}"
WidthRequest="24"
HeightRequest="24"
VerticalOptions="Center"
HorizontalOptions="Start" />

<StackLayout Grid.Column="1" Spacing="4" HorizontalOptions="Start" VerticalOptions="Center" Orientation="Vertical">
<Label Text="{Binding Title}" FontFamily="OpenSansRegular" IsVisible="{Binding Title, Converter={StaticResource IsStringNotNullOrEmptyConverter}}"
FontSize="16" VerticalOptions="StartAndExpand" />
<Label Text="{Binding Description}" FontFamily="OpenSansRegular" IsVisible="{Binding Description, Converter={StaticResource IsStringNotNullOrEmptyConverter}}"
FontSize="14" LineBreakMode="TailTruncation" MaxLines="1" />
</StackLayout>
<StackLayout Grid.Column="1"
Spacing="4"
HorizontalOptions="Start"
VerticalOptions="Center"
Orientation="Vertical">
<Label Text="{Binding Title}"
FontFamily="OpenSansRegular"
IsVisible="{Binding Title, Converter={StaticResource IsStringNotNullOrEmptyConverter}}"
FontSize="16"
VerticalOptions="StartAndExpand" />
<Label Text="{Binding Description}"
FontFamily="OpenSansRegular"
IsVisible="{Binding Description, Converter={StaticResource IsStringNotNullOrEmptyConverter}}"
FontSize="14"
LineBreakMode="TailTruncation"
MaxLines="1" />
</StackLayout>

<Image Grid.Column="2" Source="{Binding RightIconSource}" HorizontalOptions="End" IsVisible="{Binding RightIconSource, Converter={StaticResource ImageNullOrEmptyBoolConverter}}"
WidthRequest="24" HeightRequest="24" VerticalOptions="Center"/>
</Grid>
<Image Grid.Column="2"
Source="{Binding RightIconSource}"
HorizontalOptions="End"
IsVisible="{Binding RightIconSource, Converter={StaticResource ImageNullOrEmptyBoolConverter}}"
WidthRequest="24"
HeightRequest="24"
VerticalOptions="Center" />
</Grid>

</ViewCell>
Loading

0 comments on commit 1b7285f

Please sign in to comment.