Как динамически добавлять сетки в сетку
Для моего текущего проекта я хочу создать пользовательский интерфейс, в котором информация отображается на «плитке», которую я разработал как сетку с другой меткой и индикатором выполнения. Но я не могу понять, как сделать так, чтобы эти плитки отображались в моей основной сетке.
Я уже пробовал Gridview, который не работал с примерами в Интернете, и что-то сделать без сетки не очень просто.
Это сетка, которую нужно вставлять столько раз, сколько необходимо.
<Grid Margin = "10" Background = "AntiqueWhite" Grid.Row = "0" Grid.Column = "0">
<Label Content = "{Binding fieldname}" FontFamily = "Arial Black" FontSize = "20" HorizontalAlignment = "Center" VerticalAlignment = "Top" Margin = "0,20,0,0"/>
<Label Content = "{Binding datebegin}" HorizontalAlignment = "Left" VerticalAlignment = "Top" Margin = "85,85,0,0" FontFamily = "Arial Black" FontSize = "18" />
<Label Content = "{Binding dateend}" HorizontalAlignment = "Left" VerticalAlignment = "Top" Margin = "285,85,0,0" FontFamily = "Arial Black" FontSize = "18" />
<ProgressBar Margin = "0,150,0,0" Value = "{Binding progression}" Background = "White" BorderBrush = "Black" VerticalAlignment = "Top" Height = "50" />
</Grid>
Мне нужен способ добавить точную плитку, созданную в сетку (или что-нибудь еще, что может попасть в средство просмотра прокрутки с 3 столбцами и неограниченным количеством строк).
Не уверен, что вы спрашиваете о UserControl, где вы можете группировать различные элементы управления, а затем повторно использовать их несколько раз. Попробуйте проверить мввм подход для более абстрактной визуализации, например. List<MyItem> в табл.
Ответы 1
Ниже xmal. Я использовал ItemsControl и WrapPanel как ItemsPanelTemplate для переноса элементов ItemsControl.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height = "Auto"/>
<RowDefinition Height = "*"/>
</Grid.RowDefinitions>
<Button Content = "Add" Height = "26" Width = "75" Command = "{Binding Add}" Grid.Row = "0"/>
<ScrollViewer Height = "Auto" ScrollViewer.VerticalScrollBarVisibility = "Auto" Grid.Row = "1">
<ItemsControl ItemsSource = "{Binding Items}" HorizontalAlignment = "Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Margin = "10,10,0,0" BorderBrush = "Black" BorderThickness = "1">
<StackPanel Width = "200" Height = "Auto">
<Label Content = "{Binding fieldname}" FontFamily = "Arial Black" FontSize = "20" HorizontalAlignment = "Left" VerticalAlignment = "Top" Margin = "0,10,0,0"/>
<Label Content = "{Binding datebegin}" HorizontalAlignment = "Left" VerticalAlignment = "Top" Margin = "0,10,0,0" FontFamily = "Arial Black" FontSize = "18" />
<Label Content = "{Binding dateend}" HorizontalAlignment = "Left" VerticalAlignment = "Top" Margin = "0,10,0,0" FontFamily = "Arial Black" FontSize = "18" />
<ProgressBar Value = "{Binding progression}" Margin = "5,10,5,10" Background = "White" BorderBrush = "Black" VerticalAlignment = "Top" Height = "20" />
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
И модель просмотра
public class Item
{
public string fieldname
{
get;
set;
}
public string datebegin
{
get;
set;
}
public string dateend
{
get;
set;
}
public string progression
{
get;
set;
}
public Item(int number)
{
fieldname = "Filed name " + number;
datebegin = "12-12-12";
dateend = "14-12-12";
progression = (5 * number).ToString();
}
}
public class ViewModel
{
public ICollection<Item> Items
{
get;
private set;
}
public ViewModel()
{
Items = new ObservableCollection<Item>();
}
public ICommand Add
{
get
{
return new RelayCommand((a) =>
{
Items.Add(new Item(Items.Count));
});
}
}
}
Релейная команда
public class RelayCommand : ICommand
{
private Action<object> execute;
private Predicate<object> canExecute;
public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
{
this.execute = execute;
this.canExecute = canExecute;
}
public bool CanExecute(object parameter)
{
return canExecute == null || canExecute(parameter);
}
public void Execute(object parameter)
{
execute(parameter);
}
public event EventHandler CanExecuteChanged
{
add
{
CommandManager.RequerySuggested += value;
}
remove
{
CommandManager.RequerySuggested -= value;
}
}
Разве нет решения, которое менее сложно, потому что мне нужна эта система для трех разных вещей, поэтому код кажется немного тяжелым?
Не могли бы вы уточнить ваше требование, что вы подразумеваете под тремя вещами, это три разных типа данных?
Вы можете игнорировать команду relay, я только что разместил ее как полный пример, если вы хотите использовать код, который я предоставил для отладки.
На самом деле у меня есть такие данные, как фильмы, для перечисления таким образом, а также другие данные, такие как автомобили, очевидно, я не буду использовать тот же шаблон, но ту же концепцию.
В этом случае вы можете определить разные шаблоны данных и на основе вашего типа данных вы привязываете шаблон данных.
Большое спасибо, и в случае, если я использую карту materialDesign, это то же самое? Извините за много вопросов, но я продолжаю открывать язык для этого проекта.
У
Gridесть свойствоChildren, к которому вы можете добавить любойUIElement.