Question

如何制作量表（即速度计）？

具体来说，我正在尝试在此link上构建图片。

我成功创造了一枚戒指。但是，现在我需要将响铃添加到响铃中。

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问题中找到：{{ 3}}

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

1 个答案: