在按钮下画一条线

Question

我正在尝试在按钮下绘制一条线，实际上是按钮中的最后一个元素。该按钮在垂直方面具有三个元素：图像，标签，最后是我要放置的线。线必须比按钮相同。在无法正常工作的代码下方(行不显示(：

            <Button Name="btnDelete" HorizontalAlignment="Center" Margin="30,10" Command="{Binding DeleteCommand}">
                <Button.Template>
                    <ControlTemplate>
                        <StackPanel Orientation="Vertical">
                            <Image Height="36" Width="36" Stretch="UniformToFill" Source="/MyResources;component/PNG/Delete.png"/>
                            <Label HorizontalAlignment="Center">Delete</Label>
                            <Line Stroke="Orange" X1="0" Y1="25" X2="{Binding ElementName=btnDelete, Path=Width}" Y2="25" />                                
                        </StackPanel>
                    </ControlTemplate>
                </Button.Template>
            </Button>

Answer 1

如果您只想要直接的Line，则使用Border。如果您只需要水平，请像以下方式一样使用它：

<Button Name="btnDelete" HorizontalAlignment="Center" Margin="30,10" Command="{Binding DeleteCommand}">
    <Button.Template>
        <ControlTemplate>
            <Border BorderBrush="Orange" BorderThickness="0 0 0 3">
                <StackPanel>
                    <Image Height="36" Width="36" Stretch="UniformToFill" Source="/MyResources;component/PNG/Delete.png"/>
                    <Label HorizontalAlignment="Center">Delete</Label>
                </StackPanel>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

使用Margin和Padding进行调整 - 需要时。

您还应该使用Paths而不是Image。您可以在XAML -Paths中直接转换它们。

其他信息 Path

Path是在XAML中显示图标的好方法。他们看起来像：

<Path Stroke="Black" Fill="Gray"
        Data="M 10,100 C 10,300 300,-200 300,100" />

您可以给他们不同的Brushes，并且在大多数情况下它们的扩展很好。Inkscape具有一个很好的功能 - 从您的Image中创建Path(SVG/PNG/JPG等(。

也有 Icon-Packs已经准备好像字体一样真棒。