2

Как используя код С# создавать строки вместо необходимости писать через XAML <RowDefinition/> огромное ~400 раз?

<Window x:Class="Proj1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    
    xmlns:col="clr-namespace:System.Collections;assembly=mscorlib"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    
    mc:Ignorable="d"
    Title="Main Window" Height="450" Width="800">


<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="18"/>
        <RowDefinition/>
        <RowDefinition Height="17"/>
    </Grid.RowDefinitions>
    <Border BorderBrush="Gray" BorderThickness="1">
        <Grid HorizontalAlignment ="Left" VerticalAlignment="Top" Grid.Row="0">
            <Menu IsMainMenu="True">
                <MenuItem Header="Open"/>
                <MenuItem Header="New"/>
            </Menu>
        </Grid>
    </Border>
    <Grid ShowGridLines="True" Grid.Row="1">
        <ScrollViewer Grid.ColumnSpan="2" Grid.Row="1" HorizontalScrollBarVisibility="Visible">
            <Grid Height="1000" Width="1000" ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                
                <Grid Grid.Column="0" Grid.RowSpan="1111">

                </Grid>
                <Grid Grid.Column="1">

                </Grid>
            </Grid>
        </ScrollViewer>
    </Grid>
</Grid>

введите сюда описание изображения

13
  • 2
    а зачем вам <RowDefinition/> огромное количество раз раз ? Может, вам что то типа DataGrid нужно тогда?
    – tym32167
    4 дек 2020 в 1:46
  • 1
    Примерно так.
    – EvgeniyZ
    4 дек 2020 в 2:06
  • 1
    @tym32167, микротоновое фортепиано, по 53 клавиши на октаву, октав 7(+2) соответственно ~400 клавиш всего, на каждый нумерованный на рисунке прямоугольник примерно 1 кнопка 4 дек 2020 в 4:03
  • 1
    7 октав по 53 клавиши, это 371 прямоугольник, судя по скриншоту, у вас на экран влезает 10. Как вы представляете это в виде рабочего инетфейса? Если я не ошибаюсь, вам нужно будет сделать что-то для написания музыки. Смотрели ли вы интерфейсы подобных приложений, например Guitar Pro? Связано ли это с нотной грамотой? Почему 53? Вроде 12 полутонов на октаву всегда было. Как 53 разделить на 12 на цело? Или ваше приложение не будет поддерживать полутоны и никак не связано с обычными нотами? Можете на бумажке нарисовать интерфейс? Что должно происходить, когда юзер что-то нажмет?
    – aepot
    4 дек 2020 в 8:26
  • 1
    @aepot , почему 53 - nashev.livejournal.com/139469.html. Помещается утрированно 10, подогнав правльный размер клавиш чуть больше поместится, а чтобы увидеть их больше - будет масштабирование в k раз. Guitar pro направлен немного в другую сторону, в плане интерфейса тоже. Идея в создании такого несложного(...) гуи - imgur.com/a/EBcf1PL. Когда юзер создаёт прямоугольник в правой части - то данная клавиша подписывается на event с длительностью воспроизведения равной ширине прямоугольника 4 дек 2020 в 11:37

1 ответ 1

2

Нужно создать ItemsControl, засунуть его в ScrollViwer, и привязать к коллекции.

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="WPF Window" Height="600" Width="1000" Loaded="Window_Loaded">
    <Grid>
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <ItemsControl ItemsSource="{Binding Rows}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid SnapsToDevicePixels="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="60"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Border Background="LightGray">
                                <TextBlock Padding="10,5" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Title}"/>
                            </Border>
                            <Border Grid.ColumnSpan="2" BorderThickness="0,0,0,1">
                                <Border.BorderBrush>
                                    <VisualBrush>
                                        <VisualBrush.Visual>
                                            <Rectangle StrokeDashArray="4 4" Stroke="Black" StrokeThickness="1"
                                                Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualWidth}"
                                                Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualHeight}"/>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </Border.BorderBrush>
                            </Border>
                            <ItemsControl Grid.Column="1" ItemsSource="{Binding Sounds}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Rectangle Fill="Green" Width="{Binding Length}" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Canvas}}" HorizontalAlignment="Left"/>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <Canvas Background="AliceBlue" Margin="0,0,0,1" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemContainerStyle>
                                    <Style>
                                        <Setter Property="Canvas.Left" Value="{Binding Start}" />
                                        <Setter Property="Canvas.Top" Value="0" />
                                    </Style>
                                </ItemsControl.ItemContainerStyle>
                            </ItemsControl>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Window>
public partial class MainWindow : INotifyPropertyChanged
{
    private ObservableCollection<RowData> _rows;

    public ObservableCollection<RowData> Rows
    {
        get => _rows;
        set
        {
            _rows = value;
            OnPropertyChanged();
        }
    }

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        Random rnd = new Random();
        Rows = new ObservableCollection<RowData>();
            
        for (int i = 0; i < 400; i++)
            Rows.Add(new RowData()
            {
                Title = "Item" + i,
                Sounds = new ObservableCollection<SoundSquare>(Enumerable.Range(0, 10).Select(j => new SoundSquare() { Start = j * 80 + (i % 2 * 40), Length = rnd.Next(80) }))
            });
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public class RowData
{
    public string Title { get; set; }
    public ObservableCollection<SoundSquare> Sounds { get; set; }
}

public class SoundSquare
{
    public int Start { get; set; }
    public int Length { get; set; }
}

введите сюда описание изображения

19
  • Уже не знаю почему, но создаётся просто белый экран 6 дек 2020 в 19:52
  • @IgnisDivine DataContext = this; и Loaded="Window_Loaded" не забыли?
    – aepot
    6 дек 2020 в 20:05
  • 1
    Теперь да, понял что куда добавить, спасибо. Впереди ещё столько всего учить) 6 дек 2020 в 20:28
  • 1
    @IgnisDivine habr.com/ru/post/427325 вот здесь автор вроде дело рассказывает, но не использует аттрибут [CallerMemberName]. metanit.com/sharp/wpf/11.2.php вот здесь про то же самое, но другими словами. Поищите и почитайте еще.
    – aepot
    7 дек 2020 в 16:41
  • 1
    Вам просто надо добавить вызов set { _canvas = value; OnPropertyChanged(); }, а сам метод OnPropertyChanged оставьте в том виде, в котором я вам его дал. Вам нужно в метод имя Свойства передавать - "ShowCanvas", но это сделает за вас [CallerMemberName], просто добавить вызов метода OnPropertyChanged() в сеттер свойства. Всё. Биндинг, увидит событие и сам заберет данные из свойства. Понимаете фокус? Не вы отправляете данные в интерфейс, он их забирает сам. Вы сообщаете интерфейсу у меня изменилось свойство "ShowCanvas"!, а там сидят подписанные на событие PropertyChanged биндинги
    – aepot
    7 дек 2020 в 20:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.