我正在制作一個簡單的記憶游戲，但由于某種原因，我無法讓卡片不像影像中那樣散開。我把卡片放在一個網格中，放在一個 3 列網格的中間，如下所示：
xml:
<Grid x:Name="mainGrid">
<Image x:Name="bgImage" Aspect="AspectFill"/>
<Grid x:Name="innerGrid" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</Grid>
CS：
Grid gr = new Grid
{
ColumnSpacing = 0,
RowSpacing = 0,
};
for (var i = 0; i < numRows; i )
{
gr.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
}
for (var i = 0; i < numCols; i )
{
gr.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
}
innerGrid.Children.Add(gr, 1,0);
var rowCount = 0;
var colCount = 0;
for (var i = 0; i < bricks.Count; i )
{
Image img = new Image
{
Source = Globals.mediaUrl bricks[i].img,
ClassId = bricks[i].img,
Margin = new Thickness(0, 0, 0, 0)
};
gr.Children.Add(img,colCount,rowCount);
colCount ;
if (colCount > numCols - 1)
{
colCount = 0;
rowCount ;
}
}
但由于某種原因，我不明白這張照片中的卡片散布在哪里：
有人可以幫我解決這個問題嗎
uj5u.com熱心網友回復：
這只是將影像的“Aspect”屬性設定為“Aspect.AspectFill”的一種情況。
我采用了您的 .xaml.cs 代碼并使用 BowView 添加了一個示例
Grid gr = new Grid
{
ColumnSpacing = 0,
RowSpacing = 0,
};
var numRows = 3;
var numCols = 4;
for (var i = 0; i < numRows; i )
{
gr.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
}
for (var i = 0; i < numCols; i )
{
gr.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
}
innerGrid.Children.Add(gr, 1,0);
var rowCount = 0;
var colCount = 0;
var randomColors = new Color[]
{
Color.Aqua,
Color.Aquamarine,
Color.Azure,
Color.Beige,
Color.Bisque,
Color.Black,
Color.Blue,
Color.Brown,
Color.Chartreuse,
Color.Chocolate,
Color.Coral,
Color.Crimson,
};
for (var i = 0; i < 12; i )
{
BoxView img = new BoxView()
{
BackgroundColor = randomColors[new Random().Next(0, randomColors.Length - 1)]
};
// Image img = new Image
// {
// Source = ImageSource.FromFile("xamarin.png"),
// Aspect = Aspect.AspectFill
// };
gr.Children.Add(img,colCount,rowCount);
colCount ;
if (colCount > numCols - 1)
{
colCount = 0;
rowCount ;
}
}
最終結果是一堆彩色方塊，它們之間沒有間距：
換出的影像（
您的布局代碼很好，問題是影像本身的方面。
uj5u.com熱心網友回復：
這太奇怪了，如果我用方形影像這樣做，我會得到如圖所示的結果，所以我不會得到像你這樣的正方形。
Grid gr = new Grid
{
ColumnSpacing = 2,
RowSpacing = 2,
};
for (var i = 0; i < numRows; i )
{
gr.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
}
for (var i = 0; i < numCols; i )
{
gr.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
}
var rowCount = 0;
var colCount = 0;
for (var i = 0; i < 12; i )
{
Image img = new Image
{
Source = "https://pbs.twimg.com/profile_images/471641515756769282/RDXWoY7W_400x400.png",//Globals.mediaUrl bricks[i].img,
ClassId = bricks[i].img,
Margin = new Thickness(0, 0, 0, 0),
Aspect = Aspect.AspectFill
};
gr.Children.Add(img,colCount,rowCount);
colCount ;
if (colCount > numCols - 1)
{
colCount = 0;
rowCount ;
}
}
innerGrid.Children.Add(gr, 1, 0);
uj5u.com熱心網友回復：
我使用系結到 ObservableCollection 的 FlexLayout。這讓我可以對影像和顯示區域的大小和形狀進行一些控制，同時也讓我可以利用 FlexLayout 的流屬性。
我意識到這與您所做的方法不同，但我希望您也可以從這種方法中獲得一些價值。
xml頁面：
<?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="XFGrid_Test.BindablePage">
<ContentPage.Content>
<StackLayout VerticalOptions="Start">
<FlexLayout BindableLayout.ItemsSource="{Binding Images}"
Wrap="Wrap"
Direction="Row"
JustifyContent="Center"
AlignItems="Center"
AlignContent="Center"
x:Name="flexLayout">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Image ClassId="{Binding ImageCode}" Source="{Binding ImageSrc}" WidthRequest="{Binding ImageWidth}" HeightRequest="{Binding ImageHeight}" Margin="2" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
</DataTemplate>
</BindableLayout.ItemTemplate>
<BindableLayout.EmptyView>
<Label Text="Nothing here."></Label>
</BindableLayout.EmptyView>
</FlexLayout>
</StackLayout>
</ContentPage.Content>
xml.cs：
public ObservableCollection<ImageModel> Images { get; set; }
int HorizontalMargin { get; set; }
int VerticalMargin { get; set; }
int VerticalAdjustment { get; set; } //adjusts for navigation and info bar
int numberOfImages = 25;
int numColumns = 6;
int MaxImageWidth;
int MaxImageHeight;
int ImageGap = 1;
public BindablePage()
{
InitializeComponent();
Images = new ObservableCollection<ImageModel>();
//Adjust the vertical display area to account for on-screen controls, etc.
//This needs refinement - or rethinking.
VerticalAdjustment = 100;
//Get the device display size (uses Xamarin.Essentials)
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
//Available horizantal screen space - x dimension
var xWidth = mainDisplayInfo.Width / mainDisplayInfo.Density;
//Available vertical screen space - y dimension
var yHeight = (mainDisplayInfo.Height / mainDisplayInfo.Density) - VerticalAdjustment;
//Determine the MaxImageWidth of the image to fit horizontally
//based on the number of rows desired and the available horizontal screen space
var numHorizontalGaps = numColumns * 2 - 1;
MaxImageWidth = (int)Math.Round(xWidth / numColumns, MidpointRounding.AwayFromZero) - numHorizontalGaps * ImageGap;
//Determine Number of image rows to fit vertically based on fixed number of columns and number of images
var nRows = numberOfImages / numColumns;
if (numberOfImages % numColumns > 0)
nRows ;
var numVerticalGaps = nRows * 2 - 1;
MaxImageHeight = (int)Math.Round(yHeight / nRows, MidpointRounding.AwayFromZero) - numVerticalGaps * ImageGap;
//Choose the dimension that is smaller (because it must fit).
var Dimension = Math.Min(MaxImageHeight, MaxImageWidth);
//Determine the left and right margins
HorizontalMargin = (int)Math.Round((xWidth - (((numColumns 1) * Dimension) (numColumns - 1) * ImageGap)), MidpointRounding.AwayFromZero) / 2;
//Determine the top and bottom margins - this will center top to bottom (set to zero for top alignment)
VerticalMargin = (int)Math.Round((yHeight - ((nRows) * Dimension) (nRows - 1) * ImageGap), MidpointRounding.AwayFromZero) / 2;
//VerticalMargin = 0;
//Set the margins of the FlexLayout named "flexLayout"
flexLayout.Margin = new Thickness(HorizontalMargin, VerticalMargin);
//Load up the ObservableCollection
for (var i = 0; i < numberOfImages; i )
{
ImageModel img = new ImageModel
{
ImageID = i,
ImageSrc = "https://pbs.twimg.com/profile_images/471641515756769282/RDXWoY7W_400x400.png",//Globals.mediaUrl bricks[i].img,
ImageCode = i.ToString(),
ImageHeight = Dimension, //Height and Width shouild be equal
ImageWidth = Dimension,
ImageName = i.ToString(),
};
Images.Add(img);
}
BindingContext = this;
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
//Handle the tap
}
影像模型類：
public class ImageModel
{
public int ImageID { get; set; }
public string ImageName { get; set; }
public string ImageSrc { get; set; }
public int ImageWidth { get; set; }
public int ImageHeight { get; set; }
public string ImageCode { get; set; }
}
結果有 12 張影像：
結果有 16 張圖片：
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/432718.html
上一篇：Xamarin.Forms/MAUI中的INotifyPropertyChangedvsBindableObjectvsObservableObject