Question

如何添加如下图所示的箭头：

如果我无法将其添加到Grid，是否可以将其添加到第一个StackPanel？

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1.5*" MinWidth="200" MaxWidth="300"/>
        <ColumnDefinition Width="3*"  MinWidth="400"/>
        <ColumnDefinition Width="2*"  MinWidth="300"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="0"/>
    <StackPanel Grid.Column="1"/>
    <StackPanel Grid.Column="2"/>
</Grid>

这是一张没有箭头的图片：

Answer 1

下面是示例箭头（三角形）作为装饰器的示例代码。您也可以使用图像而不是绘图。在谷歌搜索“Adorner tutorials WPF”。

MainWindow.xaml

<Grid ... >
  ...
  <StackPanel Orientation="Vertical" Background="#FFEEE528">
    <TextBlock x:Name="tb" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
  </StackPanel>
</Grid>

ArrowAdorner.cs

public class ArrowAdorner : Adorner
    {
        private FrameworkElement _adornedElement;
        public ArrowAdorner(FrameworkElement adornedElement)
            : base(adornedElement)
        {
            _adornedElement = adornedElement;
        }

        protected override void OnRender(DrawingContext drawingContext)
        {
            var height = _adornedElement.ActualHeight;
            var width = _adornedElement.ActualWidth;    


            drawingContext.DrawLine(new Pen(Brushes.Red, 3), new Point(width, 0), new Point(width, height));
            drawingContext.DrawLine(new Pen(Brushes.Red, 3), new Point(width,0), new Point(width / 2, height / 2));
            drawingContext.DrawLine(new Pen(Brushes.Red, 3), new Point(width, height), new Point(width / 2, height / 2));
        }
    }

MainWindow.cs

void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            //attach adorner
            var adornedTextBlock = tb;
            var adornerLayer = AdornerLayer.GetAdornerLayer(adornedTextBlock);
            adornerLayer.Add(new ArrowAdorner(adornedTextBlock));
        }

如果要在Adorner中添加图像控件，请尝试以下链接： Any control in adorner

Answer 2

我建议使用Path进行设计：

  <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1.5*" MinWidth="200" MaxWidth="300"/>
            <ColumnDefinition Width="3*"  MinWidth="400"/>
            <ColumnDefinition Width="2*"  MinWidth="300"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0"/>
        <StackPanel Grid.Column="1"/>
        <StackPanel Grid.Column="2"/>
        <Path Data="M 0 0 L 0 10 L 5 5" Margin="0,0,-93,0"
                  StrokeThickness="0"
                  Stroke="Orange"
                  Fill="Orange" />
    </Grid>

如何在网格左侧添加箭头

2 个答案: