问题描述
我上这堂课:
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);
这篇关于在ItemsControl中间距和对齐矩形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!