如何创建仪表（即速度表）？

Question

如何创建仪表（即速度表）？

具体来说，我正在尝试在此链接上构建图像。

我成功制作了戒指。 但是，现在我需要将刻度线添加到戒指上。

XAML：

<Window x:Class="MotoLens.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MotoLens"
        mc:Ignorable="d"
        Background="Black"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:ValueToBrushConverter x:Key="ValueToBrushConverter" />
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Ellipse Grid.Row="0" Width="300" Fill="Transparent"  StrokeThickness="10" Stroke="{Binding ElementName=Slider, Path=Background}"  StrokeDashArray="1" StrokeEndLineCap="Square" />
    </Grid>
</Window>

Answer 1

过去，当我不得不创建自定义饼图和其他需要椭圆形形状和圆弧的东西时，我使用了Microsoft.Expression.Drawing库。 只要将该引用添加到您的项目中，您就可以访问Arc ，这将在这里产生奇迹。 使用Path ， ArcSegment和其他各种组件可以实现完全相同的效果，但是我发现使用Arc可以轻松实现。 说到添加引用...，这是在Blend中处理此类事情的原因之一，如果您还没有这样做的话，因为它会自动引入这些引用。 我在这里没有做任何假设，所以这就是为什么我给出了添加引用的说明。

如此说来，这是一个10分钟的项目示例，展示了您可以做什么：

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid Background="#FF2E2F45">
        <Grid Margin="0,0,0,-120">
            <ed:Arc StartAngle="-120" EndAngle="120" Stretch="None" 
                    Height="300" Width="300" StrokeThickness="20"      
                    StrokeDashArray=".25" Stroke="#FF484D5F"/>
            <ed:Arc StartAngle="-120" EndAngle="-35" Stretch="None" 
                    Height="300" Width="300" StrokeThickness="20"
                    StrokeDashArray=".25" Stroke="Turquoise"/>
        </Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
                    Margin="0,0,0,-50">
            <TextBlock Text="km/h" Foreground="#FF878A9F" HorizontalAlignment="Center"
                        FontSize="14"/>
            <TextBlock Text="43" Foreground="White" HorizontalAlignment="Center"
                        FontSize="110" FontWeight="Light" Margin="0,-25,0,0"/>
        </StackPanel>
    </Grid>
</Window>

不用说，就事物的放置而言，里面有很多静态代码，但这是为演示而完成的。 根据您所提供的链接中该应用程序的图像显示的内容，大多数甚至都没有必要，但是我对细节很着迷，并希望布局在某种程度上与问题中的屏幕截图匹配。 我假设您将为此创建一个控件，因此您将清理所有控件并创建适当的绑定。

就圆形渐变主题而言，我无需在此进行任何操作，因为这是与您所要求的主题完全不同的主题，并且可以在此处的另一个StackOverflow问题中找到更多内容： 沿循环路径