如何解决当我转到上一页时,所选图像的颜色未显示在集合视图中
我有三页。所有页面都有收集视图和VieModels,在第三页上我要显示读取的数据。我创建了一个收集视图并在底部写了一个标签,以检查是否将数据读入类对象我的问题是,当我单击后退按钮返回上一页时,数据存储在一个类对象中(这很好),但是我希望所选图像的背景色有所变化,而不是返回其原始状态
第一页
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App1.Try.TryPage">
<ContentPage.Content>
<StackLayout>
<CollectionView x:Name="AddCar" ItemsSource="{Binding Hearts}"
SelectionMode="None">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="135" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Frame CornerRadius="10" BorderColor="Black" Padding="0" >
<Button
CornerRadius="10" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="135" WidthRequest="150"
BackgroundColor="{Binding CustButtonColor}" ImageSource="{Binding Image}"
Command="{ Binding BindingContext.ChangeColor,Source={x:Reference Name=AddCar} }" CommandParameter="{Binding .}"/>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Label x:Name="small12" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Start" Text="{Binding tryHeart.TypeHeart}" />
<Button Text="Navigate" Command="{Binding navigateCommand }"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
代码隐藏
namespace App1.Try
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class TryPage : ContentPage
{
public TryPage()
{
InitializeComponent();
BindingContext = new Try(Navigation);
}
}
}
查看模型第一页
namespace App1.Try
{
class Try
{
public ObservableCollection<CircleColor> Hearts { get; set; }
public ICommand ChangeColor { protected set; get;}
public TryHeart tryHeart { get; set; }
INavigation Navigation { get; set; }
public Command navigateCommand { get; set; }
public Command navigateCommand2 { get; set; }
public async Task GotoPage2()
{
if(tryHeart.TypeHeart!=null) await Navigation.PushModalAsync(new Second(tryHeart));
}
public async Task GotoPage1()
{
await Navigation.PopModalAsync();
}
public Try(INavigation navigation)
{
tryHeart = new TryHeart();
this.Navigation = navigation;
this.navigateCommand = new Command(async () => await GotoPage2());
this.navigateCommand2 = new Command(async () => await GotoPage1());
Hearts = new ObservableCollection<CircleColor>();
Hearts.Add(new CircleColor() { Name = "one",Image = "heart",CustButtonColor = Color.White });
Hearts.Add(new CircleColor() { Name = "two",CustButtonColor = Color.White });
Hearts.Add(new CircleColor() { Name = "three",CustButtonColor = Color.White });
Hearts.Add(new CircleColor() { Name = "four",CustButtonColor = Color.White });
var DefaultCars = new ObservableCollection<CircleColor>();
DefaultCars = Hearts;
ChangeColor = new Command<CircleColor>((key) =>
{
foreach (var item in Hearts)
{
item.CustButtonColor = Color.White;
item.Image = "heart";
}
var car = key as CircleColor;
car.CustButtonColor = Color.LightCoral;
tryHeart.TypeHeart = car.Name;
});
}
}
}
第二页
<ContentPage.Content>
<StackLayout>
<StackLayout>
<CollectionView x:Name="AddCar" ItemsSource="{Binding Hearts}"
SelectionMode="None">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="135" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Frame CornerRadius="10" BorderColor="Black" Padding="0" >
<Button
CornerRadius="10" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="135" WidthRequest="150"
BackgroundColor="{Binding CustButtonColor}" ImageSource="{Binding Image}"
Command="{ Binding BindingContext.ChangeColor,Source={x:Reference Name=AddCar} }" CommandParameter="{Binding .}"/>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Label x:Name="small12" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Start" Text="{Binding tryHeart.TypeHeart2}" />
<Button Text="Navigate" Command="{Binding navigateCommand }"/>
<Button Text="Back" Command="{Binding navigateCommand2 }"/>
</StackLayout>
</StackLayout>
</ContentPage.Content>
代码隐藏
namespace App1.Try
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Second : ContentPage
{
public Second( TryHeart tryHeart)
{
InitializeComponent();
BindingContext = new SSec(Navigation,tryHeart);
}
}
}
查看模型第二页
namespace App1.Try
{
class SSec
{
public ObservableCollection<CircleColor> Hearts { get; set; }
public ICommand ChangeColor { protected set; get; }
public TryHeart tryHeart { get; set; }
INavigation Navigation { get; set; }
public Command navigateCommand { get; set; }
public Command navigateCommand2 { get; set; }
public async Task GotoPage2()
{
if(tryHeart.TypeHeart2!=null) await Navigation.PushModalAsync(new Third(tryHeart));
}
public async Task GotoPage1()
{
await Navigation.PopModalAsync();
}
public SSec(INavigation navigation,TryHeart heart)
{
tryHeart = heart;
this.Navigation = navigation;
this.navigateCommand = new Command(async () => await GotoPage2());
this.navigateCommand2 = new Command(async () => await GotoPage1());
Hearts = new ObservableCollection<CircleColor>();
Hearts.Add(new CircleColor() { Name = "oneO",CustButtonColor = Color.White });
Hearts.Add(new CircleColor() { Name = "twoO",CustButtonColor = Color.White });
Hearts.Add(new CircleColor() { Name = "threeO",CustButtonColor = Color.White });
Hearts.Add(new CircleColor() { Name = "fourO",CustButtonColor = Color.White });
var DefaultCars = new ObservableCollection<CircleColor>();
DefaultCars = Hearts;
ChangeColor = new Command<CircleColor>((key) =>
{
foreach (var item in Hearts)
{
item.CustButtonColor = Color.White;
item.Image = "heart";
}
var car = key as CircleColor;
car.CustButtonColor = Color.Orange;
tryHeart.TypeHeart2 = car.Name;
});
}
}
}
第三页
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App1.Try.Third">
<ContentPage.Content>
<StackLayout>
<Label x:Name="one" Text="{Binding heart.TypeHeart}" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center" />
<Label x:Name="two" Text="{Binding heart.TypeHeart2}" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center" />
<Button Text="Back" Command="{Binding navigateCommand2 }"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
代码隐藏
namespace App1.Try
{
class Tht
{
public TryHeart heart { get; set; }
INavigation Navigation { get; set; }
public Command navigateCommand2 { get; set; }
public async Task GotoPage1()
{
await Navigation.PopModalAsync();
}
public Tht(INavigation navigation,TryHeart h)
{
heart = h;
this.Navigation = navigation;
this.navigateCommand2 = new Command(async () => await GotoPage1());
}
}
}
查看模型第三页
namespace App1.Try
{
class Tht
{
public TryHeart heart { get; set; }
INavigation Navigation { get; set; }
public Command navigateCommand2 { get; set; }
public async Task GotoPage1()
{
await Navigation.PopModalAsync();
}
public Tht(INavigation navigation,TryHeart h)
{
heart = h;
this.Navigation = navigation;
this.navigateCommand2 = new Command(async () => await GotoPage1());
}
}
}
请帮助我保存所选项目的颜色。因为在我的项目中,某人可能想返回并重新检查所有信息,并且所选元素不可见(尽管在对象中并已记录)
解决方法
当您单击后退按钮(使用Navigation.PopModalAsync()
方法)在第二页中调用GotoPage1
时,第二页将被破坏,但是数据tryHeart
仍然存在。您再次导航到第二个,您会看到显示了tryHeart.TypeHeart2
,页面已重新创建(因此您无法在UI上看到选择)。
最后,您可以确定tryHeart.TypeHeart2
是否为空,并在导航到第二页时设置选择。
例如,在第二个视图模型中:
public SSec(INavigation navigation,TryHeart heart)
{
tryHeart = heart;
this.Navigation = navigation;
this.navigateCommand = new Command(async () => await GotoPage2());
this.navigateCommand2 = new Command(async () => await GotoPage1());
Hearts = new ObservableCollection<CircleColor>();
Hearts.Add(new CircleColor() { Name = "oneO",Image = "heart",CustButtonColor = Color.White });
Hearts.Add(new CircleColor() { Name = "twoO",CustButtonColor = Color.White });
Hearts.Add(new CircleColor() { Name = "threeO",CustButtonColor = Color.White });
Hearts.Add(new CircleColor() { Name = "fourO",CustButtonColor = Color.White });
var DefaultCars = new ObservableCollection<CircleColor>();
DefaultCars = Hearts;
//determine
if(!string.IsNullOrEmpty(tryHeart.TypeHeart2)){
if(tryHeart.TypeHeart2.Equals("oneO")){
Hearts[0].CustButtonColor = Color.Orange;
}
if(tryHeart.TypeHeart2.Equals("twoO")){
Hearts[1].CustButtonColor = Color.Orange;
}
if(tryHeart.TypeHeart2.Equals("threeO")){
Hearts[2].CustButtonColor = Color.Orange;
}
if(tryHeart.TypeHeart2.Equals("fourO")){
Hearts[3].CustButtonColor = Color.Orange;
}
}
ChangeColor = new Command<CircleColor>((key) =>
{
foreach (var item in Hearts)
{
item.CustButtonColor = Color.White;
item.Image = "heart";
}
var car = key as CircleColor;
car.CustButtonColor = Color.Orange;
tryHeart.TypeHeart2 = car.Name;
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。