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。您可以使用Incscape直接在XAML - Paths中转换它们。

其他信息 Path

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

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

你可以给他们不同的Brushes，并且他们在最有风险的情况下可以很好地扩展。 Inkscape有一个很好的功能 - 从Path（svg / png / jpg等）中创建Image。

还有Icon-Packs已经让它们像字体一样棒。

在按钮下画一条线

1 个答案: