ItemsControl 中的间距和对齐矩形
Spacing and aligning Rectangles in ItemsControl
我有这个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;
}
}
用于绘制矩形。单击按钮时,新的 Rectangle
将添加到名为 RectCollection
:
的 ObservableCollection
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>
它绘制了矩形,但它们之间没有 space。我试过像这样在 DataTemplate
中设置边距:
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="35" Margin="5 0 5 0"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
那行不通!另一个问题是 VerticalContentAlignment="Bottom"
没有将矩形底部与基线对齐。
编辑
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 中的一些基本元素:
<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 设置为双精度值的集合,例如喜欢:
Random r = new Random();
DataContext = Enumerable.Range(0, 20).Select(i => r.NextDouble() * 100);
我有这个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;
}
}
用于绘制矩形。单击按钮时,新的 Rectangle
将添加到名为 RectCollection
:
ObservableCollection
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>
它绘制了矩形,但它们之间没有 space。我试过像这样在 DataTemplate
中设置边距:
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="35" Margin="5 0 5 0"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
那行不通!另一个问题是 VerticalContentAlignment="Bottom"
没有将矩形底部与基线对齐。
编辑
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 中的一些基本元素:
<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 设置为双精度值的集合,例如喜欢:
Random r = new Random();
DataContext = Enumerable.Range(0, 20).Select(i => r.NextDouble() * 100);