Creazione e riempimento di una griglia NxN in UWP Xaml

Sto cercando di creare un puzzle game UWP, voglio tagliare l’immagine in n parti e quindi mostrare i pezzi in una griglia.

Il mio problema è, come forzare un certo stile NxN. In questo momento devo massimizzare la finestra per vedere una griglia 3×3, se rimpicciolerò entrambi i lati, convergerà in una griglia a 2 colonne e 1 colonna. C’è un modo per gestire questo?

Questo è quello che ho fatto, so che RowDefinition è manualmente in questo momento, fino a quando non trovo un modo migliore per farlo.

                       

Queste sono due immagini di esempio: Stile grigliato

Griglia non desiderata

Ci sono probabilmente un paio di modi per farlo, eccone un altro. Ho modificato UserControl in modo che aggiusti automaticamente le dimensioni degli elementi per mostrarle come griglia quadrata, quando le dimensioni della pagina cambiano e / o le modifiche alla collezione.

Il codice XAML UserControl:

                 

Codice UserControl dietro:

 public sealed partial class MyUserControl : UserControl, INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; private void RaiseProperty(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); public IList Items { get { return (IList)GetValue(ItemsProperty); } set { SetValue(ItemsProperty, value); } } public static readonly DependencyProperty ItemsProperty = DependencyProperty.Register("Items", typeof(IList), typeof(MyUserControl), new PropertyMetadata(0, (s, e) => { if (Math.Sqrt((e.NewValue as IList).Count) % 1 != 0) Debug.WriteLine("Bad Collection"); })); public void Items_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { if (Math.Sqrt(Items.Count) % 1 != 0) Debug.WriteLine("Bad Collection"); RaiseProperty(nameof(ElementSize)); } private double currentWidth; public double CurrentWidth { get { return currentWidth; } set { currentWidth = value; RaiseProperty(nameof(CurrentWidth)); RaiseProperty(nameof(ElementSize)); } } public double ElementSize => (int)(currentWidth / (int)Math.Sqrt(Items.Count)) - 1; public MyUserControl() { this.InitializeComponent(); } } 

XAML MainPage:

     

Codice MainPage dietro:

 public sealed partial class MainPage : Page { private ObservableCollection myItems = new ObservableCollection { 1, 2, 3, 4, 5, 6, 7, 8 }; public ObservableCollection MyItems { get { return myItems; } set { myItems = value; } } public MainPage() { this.InitializeComponent(); DataContext = this; MyItems.CollectionChanged += myControl.Items_CollectionChanged; } protected override Size MeasureOverride(Size availableSize) { myControl.CurrentWidth = Math.Min(availableSize.Height, availableSize.Width); return base.MeasureOverride(availableSize); } private void Button_Click(object sender, RoutedEventArgs e) => MyItems.Add(3); } 

Il programma inizia con “Bad Collection” – ci sono 8 elementi, quindi non puoi creare una griglia quadrata da loro, ma non appena fai clic sul pulsante fornito – il conteggio della collezione diventa 9 e la griglia dovrebbe aggiornarsi.

Sembra che tu stia facendo questo per mezzo di MVVM, quindi penso che tu abbia bisogno di avere una proprietà per le tue righe e colonne dal tuo ViewModel. E quindi è necessario disporre di un convertitore per fornire le coordinate per i pezzi …. O una proprietà associata.

Questo ti darà un’idea:

  3 3   // You can bind column and row //            private void Grid_Loaded(object sender, RoutedEventArgs e) { Int64 X = (Int64) this.FindResource("X"); Int64 Y = (Int64) this.FindResource("Y"); for (Int64 i = 0; i < X; i++) { ColumnDefinition c = new ColumnDefinition(); myGrid.ColumnDefinitions.Add(c); } for (Int64 i = 0; i < (int)Y; i++) { RowDefinition r = new RowDefinition(); myGrid.RowDefinitions.Add(r); } } 

Ho usato un ListView con GridView come proprietà View. E sta funzionando bene.

                              

 var imgBox = new BitmapImage(new Uri(@"/images/cellbkg.jpg", UriKind.Relative)); var source = new[] { new { sq1 = imgBox, sq2 = imgBox, sq3 = imgBox }, new { sq1 = imgBox, sq2 = imgBox, sq3 = imgBox }, new { sq1 = imgBox, sq2 = imgBox, sq3 = imgBox } }; ImageList.ItemsSource = source; 

Questo codice produce sotto l’output e non viene compresso se si riducono le dimensioni della finestra:

Display a matrice 3x3

Se questo è ciò che desideri, puoi aggiungere colonne in modo dinamico usando l’approccio di sotto. Per la matrice NxN, devi aggiungere solo N colonne, il binding si prenderà cura del resto:

  GridView view = (GridView)ImageList.View; view.Columns.Add(new GridViewColumn());