如何创建仪表(即速度表)？

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问题中找到:沿着一个创建渐变画笔圆形路径