A spotlight effect moving efficiency improving method and device under a WPF environment

By dividing the Grid control into multiple grid cells and optimizing the Clip property update, the problem of low spotlight movement efficiency in the WPF environment is solved, improving program running efficiency and reducing lag, making it suitable for high-resolution display devices.

CN122284889APending Publication Date: 2026-06-26RETURNSTAR INTERACTIVE TECH GRP
View PDF 0 Cites 0 Cited by

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
RETURNSTAR INTERACTIVE TECH GRP
Filing Date
2026-05-18
Publication Date
2026-06-26

Smart Images

  • Figure CN122284889A_ABST
    Figure CN122284889A_ABST
Patent Text Reader

Abstract

This invention discloses a method and apparatus for improving the movement efficiency of a spotlight effect in a WPF environment, belonging to the field of software information technology. The method first sets the window's transparency attribute and the Grid's semi-transparent background, divides the Grid into multi-row, multi-column grid cells, adds a background display control to each cell, and then adds a spotlight shape control and initializes its geometry. When the spotlight moves, the position of the spotlight's geometry is updated, and an intersection operation is performed between it and the geometry of each background display control. Only controls with intersection are XORed, and their Clip properties are set; controls without intersection have their Clip property set to empty. This invention significantly reduces the computation and rendering overhead during movement through block rendering, solving the stuttering problem of existing technologies. The effect is significant at 4K and higher resolutions, and can be adapted to even higher resolutions by increasing the number of rows and columns.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This invention belongs to the field of software information technology, specifically relating to a method and device for improving the movement efficiency of spotlight effects in a WPF environment. Background Technology

[0002] The spotlight effect refers to a visual effect where a specific area of ​​a top-mounted full-screen window is made transparent, allowing the viewer to see system content (such as playing videos, open files, etc.) below the window.

[0003] In the WPF (Windows Presentation Foundation) environment, the traditional method to achieve a spotlight effect is as follows: first, set the window properties to WindowStyle="None", AllowsTransparency="True", and Background="Transparent", then set the background of the Grid inside the window to semi-transparent black (such as 50% transparency), and finally, by setting the Clip property of the Grid, a transparent area is cut out in the middle of the Grid to form a spotlight effect.

[0004] However, the above-mentioned traditional method has obvious drawbacks: when the transparent area of ​​the spotlight needs to be moved, the program needs to recalculate and render the Clip property of the entire Grid, which involves a huge amount of computation, resulting in extremely low program efficiency and severe slowness and stuttering during the movement. This problem is particularly prominent on 4K and higher resolution display devices, which seriously affects the user experience. Summary of the Invention

[0005] The purpose of this invention is to overcome the problems of low program running efficiency and lag when the spotlight effect moves in the prior art, and to provide a method and device for improving the moving efficiency of the spotlight effect in a WPF environment.

[0006] To achieve the above objectives, the present invention adopts the following technical solution: A method to improve the movement efficiency of a spotlight effect in a WPF environment includes setting the window properties to WindowStyle="None", AllowsTransparency="True", and Background="Transparent", and setting the background of the Grid to semi-transparent black. It also includes the following steps: S1. Divide the Grid into grid cells with multiple rows and columns; S2. Add a background display control to each of the grid cells; S3. Add a spotlight shape control and initialize the window parameters, the geometry and position of each background display control, and the geometry and size of the spotlight shape control. S4. When the spotlight needs to be moved, update the position of the spotlight geometry and perform an intersection operation between the spotlight geometry and the geometry of each background display control. S5 performs an XOR operation on the background display controls that intersect and sets their Clip property based on the intersection results, while setting the Clip property to null for background display controls that do not intersect.

[0007] Preferably, in step S1, the Grid is divided into 5 rows and 5 columns of grid cells.

[0008] Preferably, in step S2, the background display control is a Rectangle control, and one Rectangle control is added for each grid cell.

[0009] Preferably, in step S3, the spotlight shape control is an Ellipse control.

[0010] Preferably, in step S3, the specific process of initializing the window parameters is as follows: set the window size to the screen size and set the window to the top position.

[0011] Preferably, in step S3, the specific process of initializing the geometry and position of each background display control is as follows: generate a RectangleGeometry for each background display control that is consistent with its position and size, and record the position coordinates of each background display control.

[0012] Preferably, the specific process of step S5 is as follows: If the intersection result of the geometry of a background display control and the geometry of the spotlight is not empty, then the two are XORed to obtain a merged geometry, the merged geometry is moved to the initial position of the background display control, and then the Clip property of the background display control is set to the merged geometry. If the intersection of the geometry of a background display control and the geometry of a spotlight is empty, then the Clip property of the background display control is set to empty.

[0013] A method for improving the efficiency of spotlight effect movement in a WPF environment further includes: increasing the number of rows and columns of the Grid to improve program running efficiency when the resolution of the display device is higher than a preset threshold.

[0014] A device for improving the movement efficiency of spotlight effects in a WPF environment, used to implement the method for improving the movement efficiency of spotlight effects in a WPF environment, includes: The basic settings module is used to set window properties to WindowStyle="None", AllowsTransparency="True", and Background="Transparent", and to set the Grid's background to semi-transparent black; A grid partitioning module is used to divide the Grid into grid cells with multiple rows and columns; The control adding module is used to add a background display control and a spotlight shape control to each of the grid cells; The initialization module is used to initialize window parameters, the geometry and position of each background display control, and the geometry and size of the spotlight shape control; The movement processing module is used to update the position of the spotlight geometry when the spotlight needs to be moved, perform an intersection operation between the spotlight geometry and the geometry of each background display control, perform an XOR operation on the background display controls that have intersection and set their Clip property based on the intersection result, and set the Clip property to empty for background display controls that do not have intersection.

[0015] Preferably, the grid division module is specifically used to divide the Grid into 5 rows and 5 columns of grid cells; the background display control is a Rectangle control, and a Rectangle control is added to each grid cell; the spotlight shape control is an Ellipse control.

[0016] By adopting the above technical solution, the present invention has the following beneficial effects: The present invention changes the traditional single-grid overall rendering method to a block-based rendering method, dividing the grid into multiple small grid units, each corresponding to an independent background display control. When the spotlight moves, only the Clip property update calculation and rendering are performed on a few background display controls that intersect with the spotlight geometry, without needing to reprocess the entire grid. This significantly reduces the computational load and rendering overhead for each movement, effectively solving the problems of low program running efficiency and lag when the spotlight moves in the prior art, especially on 4K and higher resolution PCs. Simultaneously, the present invention has good scalability. When facing higher resolution display devices, the number of rows and columns of the grid can be simply increased to further refine the grid units, thereby continuously improving program running efficiency. Attached Figure Description

[0017] Figure 1 This is a flowchart of the method of the present invention. Detailed Implementation

[0018] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the invention.

[0019] like Figure 1 As shown. Example 1

[0020] This embodiment provides a method for improving the movement efficiency of spotlight effects in a WPF environment. The specific steps are as follows: Basic property settings: Set the three core properties of the window: WindowStyle="None" (remove window border and title bar), AllowsTransparency="True" (allow window transparency), and Background="Transparent" (window background is completely transparent). Simultaneously, set the background of the Grid control within the window to black with 50% transparency, creating a semi-transparent overlay effect.

[0021] S1. Grid Division: Set RowDefinitions and ColumnDefinitions for the Grid control to divide it into 5 rows and 5 columns of grid cells, forming a total of 25 equal-sized sub-grids.

[0022] S2. Add background display controls: Add one Rectangle control to each grid cell, for a total of 25 Rectangle controls. This example uses automatically generated C# code; a code example is shown below: for (int i=0; i<5; i++) { for (int j=0; j<5; j++) { Rectangle rect=new Rectangle(); rect.Fill = Brushes.Black; rect.Opacity=0.5; Grid.SetRow(rect, i); Grid.SetColumn(rect, j); grid1.Children.Add(rect); } } S3. Add a spotlight shape control and initialize it: Add an Ellipse control to the Grid control as the shape display control for the spotlight.

[0023] Set the window's width and height to the current screen resolution, and set the window's Topmost property to true so that the window is always displayed on top; Iterate through all Rectangle controls, generate a RectangleGeometry (denoted as RG1) for each Rectangle that is exactly the same as its position and size, and record the top left corner coordinates P1 of each Rectangle; Adjust the size of the Ellipse control according to actual needs, and generate an EllipseGeometry (denoted as EG1) that is exactly the same as the position and size of the Ellipse control.

[0024] S4. Spotlight Movement Handling: When the user needs to move the spotlight, perform the following operations: Move the Ellipse control to the target position and update the position of EG1 to match the position of the Ellipse control. Iterate through all RG1s and perform an intersection operation between each RG1 and EG1; S5. For RG1 whose intersection result is not empty: perform an XOR operation on RG1 and EG1 to obtain the merged geometry PG; move the position of PG to the initial position P1 of the Rectangle corresponding to RG1; then set the Clip property of the Rectangle to PG. For RG1 where the intersection result is empty: directly set the Clip property of the corresponding Rectangle of RG1 to empty.

[0025] By following the steps above, each time the spotlight moves, only a few Rectangle controls that intersect with the spotlight area need to have their Clip properties updated, while most other controls do not need to be processed, thus greatly improving the program's running efficiency.

[0026] When the display device resolution is higher than 4K, the number of rows and columns of the Grid can be increased to 6 rows and 6 columns or 7 rows and 7 columns to further refine the grid cells, so that the proportion of controls that need to be updated each time is lower, thereby achieving better running efficiency. Example 2

[0027] This embodiment provides a device for improving the movement efficiency of spotlight effects in a WPF environment, used to implement the method for improving the movement efficiency of spotlight effects in a WPF environment, including: The basic settings module is used to set window properties to WindowStyle="None", AllowsTransparency="True", and Background="Transparent", and to set the Grid's background to semi-transparent black; A grid partitioning module is used to divide the Grid into grid cells with multiple rows and columns; The grid division module is specifically used to divide the Grid into 5 rows and 5 columns of grid cells; The control adding module is used to add a background display control and a spotlight shape control to each of the grid cells; The spotlight shape control is an Ellipse control; The background display control is a Rectangle control, and one Rectangle control is added for each grid cell. The initialization module is used to initialize window parameters, the geometry and position of each background display control, and the geometry and size of the spotlight shape control; The movement processing module is used to update the position of the spotlight geometry when the spotlight needs to be moved, perform an intersection operation between the spotlight geometry and the geometry of each background display control, perform an XOR operation on the background display controls that have intersection and set their Clip property based on the intersection result, and set the Clip property to empty for background display controls that do not have intersection.

[0028] The above description is merely a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A spotlight effect moving efficiency improvement method in a WPF environment, comprising setting the window property as WindowStyle="None", AllowsTransparency="True", Background="Transparent", and setting the background of the grid as semi-transparent black, characterized in that, It also includes the following steps: S1. Divide the Grid into grid cells with multiple rows and columns; S2. Add a background display control to each of the grid cells; S3. Add a spotlight shape control and initialize the window parameters, the geometry and position of each background display control, and the geometry and size of the spotlight shape control. S4. When the spotlight needs to be moved, update the position of the spotlight geometry and perform an intersection operation between the spotlight geometry and the geometry of each background display control. S5 performs an XOR operation on the background display controls that intersect and sets their Clip property based on the intersection results, while setting the Clip property to null for background display controls that do not intersect.

2. The method for improving the moving efficiency of spotlight effect in WPF environment according to claim 1, characterized in that: In step S1, the Grid is divided into 5 rows and 5 columns of grid cells.

3. The method for improving the moving efficiency of spotlight effect in WPF environment according to claim 1, characterized in that: In step S2, the background display control is a Rectangle control, and one Rectangle control is added for each grid cell.

4. The method for improving spotlight effect moving efficiency in WPF environment according to claim 1, characterized in that: In step S3, the spotlight shape control is an Ellipse control.

5. The method for improving spotlight effect moving efficiency in WPF environment according to claim 1, characterized in that: In step S3, the specific process of initializing window parameters is as follows: set the window size to the screen size and set the window to the top position.

6. The method for improving spotlight effect moving efficiency in WPF environment according to claim 1, characterized in that: In step S3, the specific process of initializing the geometry and position of each background display control is as follows: generate a RectangleGeometry for each background display control that is consistent with its position and size, and record the position coordinates of each background display control.

7. The method for improving spotlight effect moving efficiency in WPF environment according to claim 1, wherein, The specific process of step S5 is as follows: If the intersection result of the geometry of a background display control and the geometry of the spotlight is not empty, then the two are XORed to obtain a merged geometry, the merged geometry is moved to the initial position of the background display control, and then the Clip property of the background display control is set to the merged geometry. If the intersection of the geometry of a background display control and the geometry of a spotlight is empty, then the Clip property of the background display control is set to empty.

8. The method for improving spotlight effect moving efficiency in WPF environment according to claim 1, characterized in that, Also includes: When the resolution of the display device is higher than a preset threshold, the number of rows and columns of the Grid is increased to improve the program's running efficiency.

9. A spotlight effect moving efficiency improving device under a WPF environment, characterized in that, The method for improving the movement efficiency of spotlight effects in a WPF environment as described in any one of claims 1-8 includes: The basic settings module is used to set window properties to WindowStyle="None", AllowsTransparency="True", and Background="Transparent", and to set the Grid's background to semi-transparent black; A grid partitioning module is used to divide the Grid into grid cells with multiple rows and columns; The control adding module is used to add a background display control and a spotlight shape control to each of the grid cells; The initialization module is used to initialize window parameters, the geometry and position of each background display control, and the geometry and size of the spotlight shape control; The movement processing module is used to update the position of the spotlight geometry when the spotlight needs to be moved, perform an intersection operation between the spotlight geometry and the geometry of each background display control, perform an XOR operation on the background display controls that have intersection and set their Clip property based on the intersection result, and set the Clip property to empty for background display controls that do not have intersection.

10. The device for improving the moving efficiency of spotlight effect in WPF environment according to claim 9, characterized in that: The grid division module is specifically used to divide the Grid into 5 rows and 5 columns of grid cells; the background display control is a Rectangle control, and a Rectangle control is added to each grid cell; the spotlight shape control is an Ellipse control.