阅读背景:

wpf自定义带刻度的柱状图控件

来源:互联网 

效果图:

主要代码xaml:

<UserControl x:Class="INSControls._01Conning.Steer.ConningSpeedBar"
             xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
             xmlns:ec="https://schemas.microsoft.com/expression/2010/controls"
             xmlns:ed="https://schemas.microsoft.com/expression/2010/drawing"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="80" Focusable="False" FocusVisualStyle="{x:Null}" Loaded="UserControl_Loaded">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        <Label HorizontalAlignment="Left"
               VerticalAlignment="Center"
               Content="{Binding Title, RelativeSource={RelativeSource AncestorType=UserControl}}"
               Foreground="{Binding  LabelColor, RelativeSource={RelativeSource AncestorType=UserControl} }"
               FontFamily="微软雅黑"></Label>
        <Label HorizontalAlignment="Left"
               VerticalAlignment="Center"
               Margin="0,0,0,5"
               Foreground="#cc8800"
               FontFamily="微软雅黑"
               Content="LOG2"
               Grid.Row="1" />
        <Border Width="80"
                HorizontalAlignment="Left"
                Grid.Row="2"
                Background="#24325f">
            <Grid Margin="1,14,0,14"
                  x:Name="mainGrid">
                <!--具体的值填充的柱状图形-->
                <Grid x:Name="graphicGrid"
                      Height="10"
                      VerticalAlignment="Top"  RenderTransformOrigin="0.5,0.5">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions> 
                    
                         
                             <Path   Data="M40,0 L80,40 L0,40 z"
                              Fill="#cc0663c2" Stretch="Fill"  x:Name="path"  /> 

                    <Border Grid.Row="1"
                            Background="#cc0663c2" />
                    <Grid.RenderTransform>
                        <RotateTransform Angle="0" x:Name="polygonRotateAngel" />
                    </Grid.RenderTransform>
                </Grid>
                <!--短刻度-->
                <ec:PathListBox Background="Transparent"
                                x:Name="shortTicks"
                                ItemsSource="{Binding ShortTicks,RelativeSource={RelativeSource AncestorType=UserControl}}"
                                Focusable="False"
                                FocusVisualStyle="{x:Null}">
                    <ec:PathListBox.ItemTemplate>
                        <DataTemplate>
                            <Rectangle Width="1"
                                       Height="48"
                                       Margin="0,0,0,49"
                                       Fill="#b5b5b5"
                                       Focusable="False"
                                       FocusVisualStyle="{x:Null}" />
                            <!--<Border Width="1"
                                    Height="48"
                                    Background="#b5b5b5"
                                    UseLayoutRounding="True"
                                    Margin="0,0,0,49" />-->
                        </DataTemplate>
                    </ec:PathListBox.ItemTemplate>
                    <ec:PathListBox.LayoutPaths>
                        <ec:LayoutPath  Distribution="Even"
                                        Orientation="OrientToPath"
                                        SourceElement="{Binding ElementName=ShortTickPath}" >

                        </ec:LayoutPath>
                    </ec:PathListBox.LayoutPaths>
                </ec:PathListBox>
                <!--  长刻度  -->
                <ec:PathListBox x:Name="LongTick"  
                                IsHitTestVisible="False"
                                ItemsSource="{Binding LongTicks, RelativeSource={RelativeSource AncestorType=UserControl}}"
                                Focusable="False"
                                FocusVisualStyle="{x:Null}" >
                    <ec:PathListBox.ItemTemplate>
                        <DataTemplate>
                            <Rectangle Width="48"
                                       Height="3"
                                       Margin="48,0,0,0"
                                       Fill="White"
                                       Focusable="False"
                                       FocusVisualStyle="{x:Null}" />
                            <!--<Border Width="3"
                                    Height="48"
                                    Background="White"
                                    SnapsToDevicePixels="True"
                                    UseLayoutRounding="True"
                                    Margin="0,0,0,49">

                            </Border>-->
                        </DataTemplate>
                    </ec:PathListBox.ItemTemplate>
                    <ec:PathListBox.LayoutPaths>
                        <ec:LayoutPath Distribution="Even"
                                       Orientation="None"
                                       SourceElement="{Binding ElementName=LongTickPath}" />
                    </ec:PathListBox.LayoutPaths>
                </ec:PathListBox>

                <!--  刻度上显示的数字  -->
                <ec:PathListBox IsHitTestVisible="False"
                                ItemsSource="{Binding TickMarks,RelativeSource={RelativeSource AncestorType=UserControl}}">
             
                    
                    <ec:PathListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock x:Name="tb" HorizontalAlignment="Left" Foreground="White"
                                       Text="{Binding}"  RenderTransformOrigin="0,0" Margin="0,50,0,0">
                                <TextBlock.RenderTransform>
                                    <RotateTransform Angle="-90"/>
                                </TextBlock.RenderTransform>
                            </TextBlock>
                        </DataTemplate>
                    </ec:PathListBox.ItemTemplate>
                    <ec:PathListBox.LayoutPaths>
                        <ec:LayoutPath Distribution="Even"   
                                       Orientation="OrientToPath"   
                                       SourceElement="{Binding ElementName=NumberPath}" />
                    </ec:PathListBox.LayoutPaths>
                </ec:PathListBox>

                <Path   x:Name="LongTickPath"
                        Data="M0,0 v1"
                        VerticalAlignment="Top"
                        HorizontalAlignment="Right"
                        Stretch="Fill" Fill="Red" Stroke="Red" StrokeThickness="2"
                        Grid.RowSpan="2"
                        Margin="0,0"
                        Focusable="False"
                        FocusVisualStyle="{x:Null}" />
                <Path x:Name="ShortTickPath"
                      Data="M0,0 V1"
                      VerticalAlignment="Top"
                      HorizontalAlignment="Left"
                      Stretch="Fill"
                      Grid.RowSpan="2"
                      Margin="0,0"
                      Focusable="False"
                      FocusVisualStyle="{x:Null}" />

                <Path x:Name="NumberPath"
                      Data="M0,0 V1"
                      Margin="45,0,0,0"
                      VerticalAlignment="Top"
                      HorizontalAlignment="Center"
                      Stretch="Fill"
                      Grid.RowSpan="2"
                      Focusable="False"
                      FocusVisualStyle="{x:Null}"  Stroke="Yellow" StrokeThickness="1"/>

            </Grid>
        </Border>

        <StackPanel Grid.Row="3"
                    Orientation="Horizontal">
            <TextBox Width="90"
                     Height="35"
                     IsReadOnly="True"
                     Foreground="{Binding TextboxColor,RelativeSource={RelativeSource AncestorType=UserControl}}"
                     VerticalAlignment="Center"
                     Text="{ Binding CurrentValue, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Control}}" />
            <Label VerticalAlignment="Center"
                   Content="km"
                   Foreground="{Binding LabelColor, RelativeSource={RelativeSource AncestorType=UserControl}}"></Label>
        </StackPanel>

    </Grid>
</UserControl>
<UserControl x:Class=



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: