在ItemsControl中间距和对齐矩形

本文介绍了在ItemsControl中间距和对齐矩形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我上这堂课:

public class MyRect : FrameworkElement { public Visual Visual { get; set; } protected override int VisualChildrenCount => 1; protected override Visual GetVisualChild(int index) => Visual; protected override void OnRender(DrawingContext drawingContext) { var drawing = new DrawingVisual(); using (var dc = drawing.RenderOpen()) { var brush = new SolidColorBrush(Colors.Green); var pen = new Pen(new SolidColorBrush(Colors.Blue), 1); var rect = new Rect(new Size(Width, Height)); dc.DrawRectangle(brush, pen, rect); } Visual = drawing; } }

用于绘制矩形.单击按钮后，会将新的Rectangle添加到名为RectCollection的ObservableCollection:

for drawing Rectangles. On a button click, a new Rectangle is added to an ObservableCollection named RectCollection:

RectCollection.Insert(0, new MyRect() {Width = 20, Height = rand.NextDouble() * 100 });

和RectCollection是ItemsControl的ItemSource:

<ItemsControl ItemsSource="{Binding RectCollection}" VerticalAlignment="Bottom" VerticalContentAlignment="Bottom"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl>

它绘制矩形，但是它们之间没有空格.我试过像这样在DataTemplate中设置边距:

It draws rectangle BUT there's no space between them. I've tried setting margin in DataTemplate like this:

<ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Width="35" Margin="5 0 5 0"/> </DataTemplate> </ItemsControl.ItemTemplate>

那是行不通的！另一个问题是VerticalContentAlignment="Bottom"的矩形底部未与基线对齐.

that doesn't work! Another problem is that the VerticalContentAlignment="Bottom" doesn't align Rectangles bottom to the baseline.

编辑

public class MyRect : FrameworkElement { public Visual Visual { get; set; } protected override int VisualChildrenCount => 1; protected override Visual GetVisualChild(int index) => Visual; protected override void OnRender(DrawingContext drawingContext) { var drawing = new DrawingVisual(); using (drawingContext = drawing.RenderOpen()) { var grid = new Grid(); grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(0, GridUnitType.Star) }); grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto }); var text = new TextBlock() { Text = Height.ToString("N2"), Foreground = new SolidColorBrush(Colors.Black), LayoutTransform = new RotateTransform(-90), VerticalAlignment = VerticalAlignment.Top, Margin = new Thickness(0, 0, 0, 5) }; var border = new Border() { Width = Width, Height = Height, Background = new SolidColorBrush(Colors.Green), CornerRadius = new CornerRadius(5, 5, 0, 0) }; grid.Children.Add(text); grid.Children.Add(border); Grid.SetRow(border, 1); grid.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); drawingContext.DrawRectangle(new VisualBrush(grid), null, new Rect(grid.DesiredSize)); } Visual = drawing; } }

推荐答案

下面是一个简单条形图的示例，仅在ItemsControl的ItemTemplate中使用了一些基本元素:

Here is an example for a simple bar chart, using just some basic elements in the ItemTemplate of an ItemsControl:

<ItemsControl ItemsSource="{Binding}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Grid Width="20" Height="100" Margin="2"> <Rectangle VerticalAlignment="Bottom" Height="{Binding}" Fill="LightGray"/> <TextBlock Text="{Binding StringFormat={}{0:N2}}"> <TextBlock.LayoutTransform> <RotateTransform Angle="-90"/> </TextBlock.LayoutTransform> </TextBlock> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>

其DataContext设置为双精度值的集合，例如像:

Its DataContext is set to a collection of double values, e.g. like:

Random r = new Random(); DataContext = Enumerable.Range(0, 20).Select(i => r.NextDouble() * 100);