[英]Spacing and aligning Rectangles in ItemsControl
I've this class:我有这门课:
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;
}
}
for drawing Rectangles.用于绘制矩形。 On a button click, a new Rectangle
is added to an ObservableCollection
named RectCollection
:单击按钮时,一个新的Rectangle
会添加到名为RectCollection
的ObservableCollection
:
RectCollection.Insert(0, new MyRect() {Width = 20, Height = rand.NextDouble() * 100 });
and RectCollection
is the ItemSource
of an ItemsControl
:和RectCollection
是ItemsControl
的ItemSource
:
<ItemsControl ItemsSource="{Binding RectCollection}" VerticalAlignment="Bottom" VerticalContentAlignment="Bottom">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
It draws rectangle BUT there's no space between them.它绘制矩形但它们之间没有空间。 I've tried setting margin in DataTemplate
like this:我试过像这样在DataTemplate
设置边距:
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="35" Margin="5 0 5 0"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
that doesn't work!这是行不通的! Another problem is that the VerticalContentAlignment="Bottom"
doesn't align Rectangles bottom to the baseline.另一个问题是VerticalContentAlignment="Bottom"
没有将 Rectangles 底部与基线对齐。
EDIT编辑
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;
}
}
Here is an example for a simple bar chart, using just some basic elements in the ItemTemplate of an ItemsControl:这是一个简单条形图的示例,仅使用 ItemsControl 的 ItemTemplate 中的一些基本元素:
<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>
Its DataContext is set to a collection of double values, eg like:它的 DataContext 被设置为一组双精度值,例如:
Random r = new Random();
DataContext = Enumerable.Range(0, 20).Select(i => r.NextDouble() * 100);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.