0
我想創建具有不同單元大小的網格視圖。但由於內嵌的窗口功能,單元格可以在行中自行調整,所以我得到了以下結果。在C#中使用不同的單元格大小創建一個動態網格視圖
但我希望得到一個網格類似於Android的交錯網格功能在這個環節給出:
https://dzone.com/articles/how-implement-staggered-grid
是否有WP8做到這一點的方法。 1編程?
我想創建具有不同單元大小的網格視圖。但由於內嵌的窗口功能,單元格可以在行中自行調整,所以我得到了以下結果。在C#中使用不同的單元格大小創建一個動態網格視圖
但我希望得到一個網格類似於Android的交錯網格功能在這個環節給出:
https://dzone.com/articles/how-implement-staggered-grid
是否有WP8做到這一點的方法。 1編程?
在xaml中使用ItemsControl表示可用於呈現項目集合的控件。
創建一個新面板,我們可以使用任何ItemsControl。欲瞭解更多信息,請參閱此鏈接:http://www.visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx
在xaml.cs中編寫一個類,如下所示。
public class WrapPanel : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
// Just take up all of the width
Size finalSize = new Size { Width = availableSize.Width };
double x = 0;
double rowHeight = 0d;
foreach (var child in Children)
{
// Tell the child control to determine the size needed
child.Measure(availableSize);
x += child.DesiredSize.Width;
if (x > availableSize.Width)
{
// this item will start the next row
x = child.DesiredSize.Width;
// adjust the height of the panel
finalSize.Height += rowHeight;
rowHeight = child.DesiredSize.Height;
}
else
{
// Get the tallest item
rowHeight = Math.Max(child.DesiredSize.Height, rowHeight);
}
}
// Just in case we only had one row
if (finalSize.Height == 0)
{
finalSize.Height = rowHeight;
}
return finalSize;
}
protected override Size ArrangeOverride(Size finalSize)
{
Rect finalRect = new Rect(0, 0, (finalSize.Width/2) - 10, finalSize.Height);
double EvenItemHeight = 0;
double OddItemHeight = 0;
int itemNumber = 1;
foreach (var child in Children)
{
if (itemNumber % 2 == 0)
{
finalRect.X = (finalSize.Width/2);
finalRect.Y = EvenItemHeight;
EvenItemHeight += Children[itemNumber - 1].DesiredSize.Height;
}
else
{
finalRect.X = 0;
finalRect.Y = OddItemHeight;
OddItemHeight += Children[itemNumber - 1].DesiredSize.Height;
}
itemNumber++;
child.Arrange(finalRect);
}
return finalSize;
}
}
StaggerGrid.xaml代碼如下: 的xmlns:本地= 「使用:StaggerGridSample.Views」 //命名空間類WrapPanel
<Grid>
<ScrollViewer >
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding StrList,UpdateSourceTrigger=PropertyChanged}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<local:WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Background="Red"
Width="185"
VerticalAlignment="Top"
Margin="0,0,6,0">
<TextBlock Text="{Binding}"
VerticalAlignment="Top"
TextWrapping="Wrap"
FontSize="20"/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
可能是你需要variableSizedWrapgrid HTTPS的:// MSDN。 microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.variablesizedwrapgrid –
我試圖使用variableSizedWrapgrid。但是我得到了與圖中所示相同的結果。 – JMS