The desired result looks like this: enter image description here

XAML: <StackPanel Name="SPName" Orientation="Horizontal"/> 
 C#: mass = new Rectangle[100]; for (int i = 0; i < Mass.Length; i++) { mass[i] = new Rectangle(); mass[i].VerticalAlignment = VerticalAlignment.Bottom; mass[i].Width = SList.ActualWidth / Mass.Length; mass[i].Height = (SList.ActualHeight - 100) * (i / 100.0); mass[i].Fill = Brushes.Green; mass[i].StrokeThickness = 1; mass[i].Stroke = Brushes.Black; SPName.Children.Add(mass[i]); }

When implemented through a ListBox, this results in: enter image description here

 XAML: <ListBox ItemsSource="{Binding Mass}"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> 
 C#: Panel parent = ((sender as Button).Parent as Panel).Parent as Panel; mass = new Rectangle[100]; for (int i = 0; i < Mass.Length; i++) { mass[i] = new Rectangle(); mass[i].VerticalAlignment = VerticalAlignment.Bottom; mass[i].Width = parent.ActualWidth / Mass.Length; mass[i].Height = (parent.ActualHeight - 100) * (i / 100.0); mass[i].Fill = Brushes.Green; mass[i].StrokeThickness = 1; mass[i].Stroke = Brushes.Black; } OnPropertyChanged("Mass");

How to implement the first option using ListBox?

    1 answer 1

    Perhaps you need this:

     <ItemsControl ItemsSource="{Binding Mass}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Rectangle VerticalAlignment="Bottom" Fill="Green" Height="{Binding}" Stroke="Black" StrokeThickness="1"/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>

    At the same time, your Mass is of type double[] or there is IEnumerable<double> and contains the required height of rectangles.

    It turns out this result:

    green triangle

    If you need a ListView , you will have to tweak the container style:

     <ListView ItemsSource="{Binding Mass}"> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="Padding" Value="0"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Stretch"/> </Style> </ListView.ItemContainerStyle> <ListView.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Rows="1"/> </ItemsPanelTemplate> </ListView.ItemsPanel> <ListView.ItemTemplate> <DataTemplate> <Rectangle VerticalAlignment="Bottom" Fill="Green" Height="{Binding}" Stroke="Black" StrokeThickness="1"/> </DataTemplate> </ListView.ItemTemplate> </ListView>
    • All as I wanted, thank you very much! However, it is not possible to select a specific column (all are highlighted at once). Can you tell me how to change this? SelectionMode = "Single" tried - lalala lala
    • @alalalalala: To select, use a ListBox , since ItemsControl does not have a selected item. - VladD
    • @VladD, but it’s worth replacing with ListBox and the picture turns into the same as that of the author. Center alignment. The width is minimal. Indentation between elements ... - Andrey NOP
    • @ AndreiNOP Ah, that's it! We must see! .. Thank you. - VladD
    • @alalalala: Updated the answer. - VladD