我想知道如何改变选择的颜色.我读了官方文档，主题，论坛问题，但它不适合我.我尝试了2 VisualState变体，我用注解标记.我也想知道这是任何改变选择的大小和任何其他属性的方法.有时当我像微软文档说的那样设置视觉状态时，选择的颜色变得透明，我甚至看不到这一点，但所有的事件工作正常。也许你可以建议我的方式，我可以只点击collectionview项目，并转到其他页面。
下面是我的视图XAML代码：
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Bibliomatic_MAUI_App"
xmlns:viewModels="clr-namespace:Bibliomatic_MAUI_App.ViewModels"
xmlns:models="clr-namespace:Bibliomatic_MAUI_App.Models"
x:DataType="viewModels:ArticlesViewModel"
x:Class="Bibliomatic_MAUI_App.Views.ArticleView"
Title="">
<!-- I tried this -->
<ContentPage.Resources>
<Style x:Key="BorderSelectionStyle" TargetType="Border">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor"
Value="Transparent" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<StackLayout>
<ActivityIndicator HeightRequest="40"
WidthRequest="40"
IsRunning="{Binding IsBusy}"
IsVisible="{Binding IsBusy}"/>
<Border StrokeThickness="2" Padding="10" Margin="10" VerticalOptions="FillAndExpand">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10"></RoundRectangle>
</Border.StrokeShape>
<StackLayout>
<CollectionView ItemsSource ="{Binding ArticleList}"
RemainingItemsThreshold="1"
RemainingItemsThresholdReachedCommand="{Binding LoadMoreArticleDataCommand}"
VerticalOptions="FillAndExpand"
SelectionMode="Single"
SelectedItem="{Binding SelectedArticle}"
x:Name="ArticlesCollectionView">
<CollectionView.Header>
<StackLayout Margin="10">
<Label Text="Articles" FontSize="Large" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
<Label Text="Select articles which you like and start exploring" HorizontalTextAlignment="Start" FontSize="Caption"/>
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:ArticleResponce">
<Border StrokeThickness="3.5">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10"></RoundRectangle>
</Border.StrokeShape>
<Grid BackgroundColor="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="dotnet_bot.svg" Aspect="AspectFill" HeightRequest="100" Grid.RowSpan="2" Grid.Column="0" Margin="5"/>
<!-- Labels -->
<StackLayout Grid.Column="1" Spacing="2" Padding="20" HorizontalOptions="FillAndExpand" Margin="20,0,10,0">
<StackLayout Orientation="Horizontal">
<Image Source="dotnet_bot.svg" WidthRequest="20" HeightRequest="20" />
<Label Text="{Binding Title}" FontSize="15" Margin="5" LineBreakMode="WordWrap" MaxLines="3" HorizontalOptions="StartAndExpand" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Image Source="dotnet_bot.svg" WidthRequest="20" HeightRequest="20"/>
<Label Text="{Binding Author}" FontSize="15" Margin="5" LineBreakMode="WordWrap" MaxLines="1" HorizontalOptions="StartAndExpand"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Image Source="dotnet_bot.svg" WidthRequest="20" HeightRequest="20" />
<Label Text="{Binding PublishDate}" FontSize="15" Margin="5" LineBreakMode="WordWrap"/>
</StackLayout>
</StackLayout>
<!-- Second variant which I found --> <VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Yellow" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Border>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</Border>
<ActivityIndicator HeightRequest="40"
WidthRequest="40"
IsRunning="{Binding IsLoading}"
IsVisible="{Binding IsLoading}"/>
</StackLayout>
</ContentPage>还有ViewModel代码：
using Bibliomatic_MAUI_App.Models;
using Bibliomatic_MAUI_App.Services;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;
using System.Windows.Input;
namespace Bibliomatic_MAUI_App.ViewModels
{
public partial class ArticlesViewModel : ObservableObject
{
public ObservableCollection<ArticleResponce> ArticleList { get; set; }
private List<ArticleResponce> allArticlesList;
private readonly ArticleService articleService;
private int pageSize = 20;
[ObservableProperty]
public bool isBusy;
[ObservableProperty]
public bool isLoading;
private ArticleResponce selectedArticle;
public ArticleResponce SelectedArticle
{
get => selectedArticle;
set
{
if (SetProperty(ref selectedArticle, value))
{
OnItemSelected(value);
}
}
}
public ArticlesViewModel(ArticleService articleService)
{
this.articleService = articleService;
ArticleList = new ObservableCollection<ArticleResponce>();
LoadArticleDataCommand.Execute(null);
}
private async void OnItemSelected(ArticleResponce selectedArticle)
{
if (selectedArticle != null)
{
await Shell.Current.GoToAsync($"main?title={selectedArticle.Title}");
}
}
[RelayCommand]
public async Task LoadArticleData()
{
IsBusy = true;
allArticlesList = await articleService.GetAllArticles();
var articleData = allArticlesList.Take(pageSize).ToList();
foreach (var data in articleData)
ArticleList.Add(data);
IsBusy = false;
}
[RelayCommand]
public async Task LoadMoreArticleData()
{
if (IsLoading) return;
allArticlesList = await articleService.GetAllArticles();
if (allArticlesList?.Count > 0)
{
IsLoading = true;
var articleData = allArticlesList.Skip(ArticleList.Count).Take(pageSize).ToList();
foreach (var data in articleData)
ArticleList.Add(data);
IsLoading = false;
}
}
}
}
1条答案
按热度按时间xqkwcwgp1#
**首先，我注意到你有两个边界。
一个在CollectionView外部，另一个在CollectionView内部。您想应用哪个样式？如果我理解正确，您想应用到内部的样式。没关系，我们可以使用（如果您在ContentPage.Resources中定义了VisualStateManager）将样式应用到它：
<Border StrokeThickness="3.5" Style="{x:StaticResource BorderSelectionStyle}"通过这条线，我们将样式应用于内部边框。
如果在样式中删除
x:Key="BorderSelectionStyle"，默认情况下它将应用于所有边框。第二次
您在
ContentPage.Resources中定义的VisualStateManager是可以的，应该可以工作。但是第二个变体没有效果。因为您只是将VisualStateManager放在Grid中。所以它默认会应用到Grid。CollectionView DataTemplate中的外部控件是Border。当我们单击CollectionView中的项目时，外部Border将更改VisualStates为“Selected”。Border中的其他控件不会更改状态。
所以你可以改变第二个变量的位置：
如果你有什么问题，尽管问。