C ා development learning notes: in WPF, mouse scroll is associated with the value change of Slider control

1. Create WPF control and layout and associate with WinForm

(1). Create WPF user control and layout

             xmlns:local="clr-namespace:DemoCollection" x:Class="DemoCollection.WPFUserControl2" 
             d:DesignHeight="371" d:DesignWidth="706">
    <Viewbox x:Name="Viewbox" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Stretch="Fill">
        <StackPanel x:Name="StackPanel1" >
            <Slider x:Name="Slider1" Width="113" Panel.ZIndex="11" ValueChanged="Slider1_ValueChanged" Margin="700,0,0,0"/>
            <ScrollViewer x:Name="ScrollViewer1" Height="464" Width="907" Margin="0,0,0,0" HorizontalScrollBarVisibility="Visible" VerticalAlignment="Top" VerticalContentAlignment="Center" ScrollChanged="ScrollViewer1_ScrollChanged">
                <Canvas x:Name="Canvas1" Height="464" Width="907" MouseWheel="Canvas1_MouseWheel"/>

(2). After the solution is generated, drag the created WPF user control to the WinForm form

2. When the WPF user control is loaded, bind the background picture to the canvas and use System.Windows.Shapes.Path to create several geometry

public WPFUserControl2()
	w = this;
	//Bind the Image control to display the picture
	string path = this.GetType().Assembly.Location;
	FileInfo directory = new FileInfo(path);
	//Get pictures according to absolute path
	string sss = @"G:\Small things made by ourselves\DemoCollection\DemoCollection\Resources\background2.jpg";            
	BitmapImage image = new BitmapImage(new Uri(sss, UriKind.Absolute));
	//Canvas1.Width += 800;
	//Canvas1.Height += 1000;
	//Image1_x = Canvas1.Width;
	//Image1_y = Canvas1.Height;
	//Original size for holding canvas
	Original_height = Canvas1.Height;
	Original_width = Canvas1.Width;

	//Draw the background of the canvas with pictures
	ImageBrush imageBrush = new ImageBrush(image);
	w.Canvas1.Background = imageBrush;

	Ellipse e = new Ellipse();//Create an elliptical object
	//Set the top, bottom, left and right margins of the ellipse
	Thickness thickness = new Thickness(Convert.ToDouble(200), Convert.ToDouble(100), 0, 0);
	e.Height = 70;
	e.Width = 70;
	e.Margin = thickness;

	//Style the drawing inside the ellipse
	Brush brush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("Red"));
	e.Fill = brush;
	//Sets the order in which ellipses appear in their parent control
	Panel.SetZIndex(e, 10);

	//Path: draw a series of lines and curves; distinguish them from System.IO.Path
	System.Windows.Shapes.Path p = new System.Windows.Shapes.Path();

	//Geometry: define geometry, which can be used for cutting, hit testing and rendering of 2D graphics data
	//EllipseGeometry: initializes an ellipse with a specified center point location, X-axis radius, and Y-axis radius
	Geometry g = new EllipseGeometry(new Point(Convert.ToDouble(350), Convert.ToDouble(350)), 10, 10);

	//Assign the image to be drawn to the Path object
	p.Data = g;

	//Specify how to draw inside
	Brush brush1 = new SolidColorBrush((Color)ColorConverter.ConvertFromString("Black"));
	p.Fill = brush1;
	p.Name = "First points";

	System.Windows.Shapes.Path p1 = new System.Windows.Shapes.Path();
	Geometry g1 = new EllipseGeometry(new Point(Convert.ToDouble(400), Convert.ToDouble(350)), 20, 20);

	p1.Data = g1;
	Brush brush2 = new SolidColorBrush((Color)ColorConverter.ConvertFromString("White"));
	p1.Fill = brush2;
	p1.Name = "Second points";

	System.Windows.Shapes.Path p2 = new System.Windows.Shapes.Path();
	Geometry g2 = new EllipseGeometry(new Point(Convert.ToDouble(500), Convert.ToDouble(350)), 30, 30);

	p2.Data = g2;
	Brush brush3 = new SolidColorBrush((Color)ColorConverter.ConvertFromString("Blue"));
	p2.Fill = brush3;
	p1.Name = "Third points";


3. Add the value change event of Slider control

private void Slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
	if (e.NewValue != 0)
		double a = Math.Round(e.NewValue);
		if (a != 0&&a>=1)
			//ScaleTransform: scaling objects in 2D x-y
			//The parameters are: X-axis scaling, Y-axis scaling, x-value of scaling center coordinate of ScaleTransform object, y-value of scaling center coordinate of ScaleTransform object
			//If the latter two parameters are not set, the object is centered at (0,0) in the upper left corner
			ScaleTransform sf = new ScaleTransform(a, a, Canvas1.Width / 2, Canvas1.Height / 2);

			Image1_x = Canvas1.Width;
			Image1_y = Canvas1.Height;
			//When using LayoutTransform, when Canvas1 zooms in and out with the Slider, the outer scroll bar can follow to change the height and width of the scroll bar
			Canvas1.LayoutTransform = sf;
			//When using RenderTransform, when Canvas1 zooms in and out with the Slider, the outer scroll bar cannot change the height and width of the actual displayed content
			//Canvas1.RenderTransform = sf;

		Canvas1.Width = Original_width;
		Canvas1.Height = Original_height;



3. Bind the mouse wheel event to Canvas, and judge if the current keyboard presses the left Shif key while scrolling the wheel, then change the Slider value

private void Canvas1_MouseWheel(object sender, MouseWheelEventArgs e)
	//Delta: represents the direction of mouse wheel rolling, if > 0 represents forward rolling, if < 0 represents backward rolling
	int a = e.Delta;
	if (Keyboard.GetKeyStates(Key.LeftShift) == KeyStates.Down)
		if (e.Delta > 0)
			Slider1.Value += 1;
			Slider1.Value -= 1;


Operation effect:

Tags: Windows

Posted on Sat, 09 Nov 2019 15:53:54 -0500 by Awesome Trinity