我在使用 Xamarin.Forms 和 MVVM 制作游戏时遇到问题。
游戏中有一艘由用户控制的潜艇,并且有水雷掉落,因此用户必须避开这些水雷。这些地雷是在运行时使用 2 个计时器生成的,因此我用 XAML 中的 CollectionView 来表示它们。
我已经使用 WPF(也使用 WinForms)制作了这个游戏,在这种情况下,我使用 Canvas 作为游戏区域(ItemsControl 用于地雷),并且绑定效果很好。
现在(使用Xamarin.Forms)我尝试使用AbsoluteLayout和RelativeLayout实现游戏区域,但总是收到例如。以下输出(相对布局):
[0:] 绑定:'160' 无法转换为类型
'Xamarin.Forms.Constraint'
当前的XAML代码:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SubmarineGame.View.GamePage"
Title="Submarine Game">
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<RelativeLayout Grid.Row="0">
<Image Source="sea.png"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Height,
Factor=1}"
Aspect="AspectFill" />
<ImageButton Command="{Binding ExitCommand}"
CornerRadius="50"
RelativeLayout.WidthConstraint="{ConstraintExpression Constant=50}"
RelativeLayout.HeightConstraint="{ConstraintExpression Constant=50}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=0.9}"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Height,
Factor=0.1}"
Source="pausebutton.png" />
<CollectionView ItemsSource="{Binding Mines}"
BackgroundColor="Transparent"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Height,
Factor=1}"
FlowDirection="MatchParent">
<CollectionView.ItemTemplate>
<DataTemplate>
<Image RelativeLayout.WidthConstraint="{ConstraintExpression Constant=64}"
RelativeLayout.HeightConstraint="{ConstraintExpression Constant=64}"
RelativeLayout.XConstraint="{Binding X}"
RelativeLayout.YConstraint="{Binding Y}"
Source="nuclearbomb.png" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Image RelativeLayout.WidthConstraint="{ConstraintExpression Constant=64}"
RelativeLayout.HeightConstraint="{ConstraintExpression Constant=64}"
RelativeLayout.XConstraint="{Binding Submarine.X}"
RelativeLayout.YConstraint="{Binding Submarine.Y}"
Source="submarine.png" />
</RelativeLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start" Grid.Row="1">
<Label Text="Game time: " />
<Label Text="{Binding GameTime}" />
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="End" Grid.Row="1">
<Label Text="Destroyed mines: " />
<Label Text="{Binding DestroyedMineCount}" />
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
ViewModel 中的潜艇和水雷:
public ObservableCollection<Shape> Mines { get; set; }
public Submarine Submarine { get; set; }
形状类:
public class Shape : ViewModelBase
{
private Int32 _x;
private Int32 _y;
public Int32 X
{
get { return _x; }
set
{
if (_x != value)
{
_x = value;
OnPropertyChanged();
}
}
}
public Int32 Y
{
get { return _y; }
set
{
if (_y != value)
{
_y = value;
OnPropertyChanged();
}
}
}
public Int32 Width { get; set; }
public Int32 Height { get; set; }
public Int32 Weight { get; set; }
}
潜艇级:
public class Submarine : Shape
{
public DelegateCommand StepCommand { get; set; }
}
那么问题来了,如何解决转换问题呢?我是否对游戏区域(甚至地雷)使用了错误的布局?在这种情况下,Xamarin 开发人员使用什么方法或模式来实现 MVVM 架构?
感谢您的宝贵时间,抱歉我的英语!