WPF中进度条同步实现

WPF界面的编写

滑动条的显示

//前台界面的设计
<Border Grid.Row="1"
                        Background="Transparent"
                        BorderThickness="0">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="18" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Margin="26,0"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   FontSize="12"
                                   FontWeight="Regular"
                                   Foreground="#333333"
                                   Text="笔触大小" />
                        <Slider x:Name="slider1"
                                Grid.Row="1"
                                Height="18"
                                Margin="26,0,10,0"
                                aps:ThumbBehaviors.DragCompletedCommand="{Binding DragedCompletedCommand}"
                                aps:ThumbBehaviors.DragStartedCommand="{Binding DragedStartedCommand}"
                                //移动范围只能是整数
                                IsSnapToTickEnabled="True"
                                //绑定最大值"笔触大小的值"
                                Maximum="{Binding MaxPenWidth}"
                                Minimum="1"
                                Style="{DynamicResource SliderStyleMax}"
                                Value="{Binding PenWidth, Mode=TwoWay}" />
                        <StackPanel Grid.Row="1"
                                    Grid.Column="1"
                                    HorizontalAlignment="Right"
                                    Orientation="Horizontal">
                            <TextBlock Margin="0,0,26,0"
                                       FontSize="12"
                                  //text的值 使用ElementName绑定数据 这个数据使用的是"Slider"控件且采用名字去别名
                                  Text="{Binding ElementName=slider1, Path=Value}" />
                        </StackPanel>
                    </Grid>
</Border>

 与滑动条同步的画笔大小

  <Grid x:Name="mouseGrid"
    //涂抹的画笔大小
    Width="{Binding PenWidth}"
    Height="{Binding PenWidth}"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Visibility="Collapsed">
      <Grid.Effect>
       <DropShadowEffect Opacity="0.4"
        ShadowDepth="-1"
        Color="#333333" />
      </Grid.Effect>
       <Ellipse HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Stroke="#333333"
        //定义边框粗细
        StrokeThickness="{Binding Scale, Converter={StaticResource StrokeConverter}}" />
    </Grid>

相关属性的使用

• 画笔大小的设置

  //画笔默认是初始值是15
  private double penWidth = 15;
          public double PenWidth {
              get {
                  return penWidth;
              }
              set {
                  Set(ref penWidth, value);
                  OnDragDelta?.Invoke();
              }
          }

• ?. ：是在C#6.0中才有的，这个也称为空值传播运算，这个运算可以确保在事件没有订阅是不引发事件的
• OnDragDelta?.Invoke();中的OnDragDelta，是在最开始进行封装了"public event Action OnDragDelta;"
• 画笔最大值属性的设置

•  private int maxPenWidth;
          public int MaxPenWidth {
              get {
                  return maxPenWidth;
              }
              set {
                  Set(ref maxPenWidth, value);
                  PenWidth = value * 0.2;
              }
          }

• Scale属性可以通过鼠标，加与减相关命令来控制画笔大小

• private double scale = 1.0;
          public double Scale {
              get {
                  return scale;
              }
              set {
                  Set(ref scale, value);
              }
          }

• 相关控制的命令

• private RelayCommand reduceVisualCommand = null;
          public RelayCommand ReduceVisualCommand {
              get {
                  return reduceVisualCommand ?? new RelayCommand(() => {
                      double targetScale = Math.Round(Scale - 0.1, 1);
                      if (targetScale < 0.4) {
                          targetScale = 0.4;
                      }
                      Scale = targetScale;
                  });
              }
          }
  
          private RelayCommand<int> mouseWheelCommand = null;
          public RelayCommand<int> MouseWheelCommand {
              get {
                  return mouseWheelCommand ?? new RelayCommand<int>((delta) => {
                      double targetScale = Scale + delta * 0.001;
                      if (targetScale > 10.0) {
                          targetScale = 10.0;
                      }
                      if (targetScale < 0.4) {
                          targetScale = 0.4;
                      }
                      Scale = targetScale;
                  });
              }
          }
  
          private RelayCommand addVisualCommand = null;
          public RelayCommand AddVisualCommand {
              get {
                  return addVisualCommand ?? new RelayCommand(() => {
                      double targetScale = Math.Round(Scale + 0.1, 1);
                      if (targetScale > 10.0) {
                          targetScale = 10.0;
                      }
                      Scale = targetScale;
                  });
              }
          }