# Improving my Application Interface - Replicating the Windows Update Screen Menu (W10)

**URL:** <https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239>\
**Category:** questions\
**Tags:** form, windows\
**Created:** [May 12, 2023, 2:36pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239 "2023-05-12T14:36:45Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Julian](https://clarionhub.com/letter_avatar_proxy/v4/letter/j/74df32/32.png) [@Julian](https://clarionhub.com/u/Julian)\
**Post date:** [May 12, 2023, 2:36pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/1 "2023-05-12T14:36:45Z")

</div>

I'd like to replicate the visual appearance of the Windows Update screen, ie: the menu/options bar down the left hand side with the background that follows the mouse, any suggestions how to achieve this in code (without buying a third party product) ?

In some instances, the menu options down the LHS have two line text, the top line being bigger than the bottom, achieving that as well would be a bonus.

I've tried flat buttons with icons but they're not quite right.

Thanks.

---

<div class="post-metadata">

**Author:** ![Mike\_Duglas](https://clarionhub.com/user_avatar/clarionhub.com/mike_duglas/32/1061_2.png) [@Mike\_Duglas](https://clarionhub.com/u/Mike_Duglas)\
**Post date:** [May 12, 2023, 3:40pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/2 "2023-05-12T15:40:02Z")

</div>

How about a screenshot?

---

<div class="post-metadata">

**Author:** ![Julian](https://clarionhub.com/letter_avatar_proxy/v4/letter/j/74df32/32.png) [@Julian](https://clarionhub.com/u/Julian)\
**Post date:** [May 12, 2023, 3:41pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/3 "2023-05-12T15:41:21Z")

</div>

![Windows-Update](https://clarionhub-uploads.s3.eu-north-1.amazonaws.com/original/2X/a/a8b7dcd25f52776ec05cf4c55bdcaec31154acd6.jpeg)

A sheet with the wizard attribute handles the RHS quite nicely.

The RHS shows an example of a two line entry.

---

<div class="post-metadata">

**Author:** ![Mike\_Duglas](https://clarionhub.com/user_avatar/clarionhub.com/mike_duglas/32/1061_2.png) [@Mike\_Duglas](https://clarionhub.com/u/Mike_Duglas)\
**Post date:** [May 12, 2023, 4:11pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/4 "2023-05-12T16:11:13Z")

</div>

I would used custom drawn buttons.

---

<div class="post-metadata">

**Author:** ![Mike\_Duglas](https://clarionhub.com/user_avatar/clarionhub.com/mike_duglas/32/1061_2.png) [@Mike\_Duglas](https://clarionhub.com/u/Mike_Duglas)\
**Post date:** [May 12, 2023, 5:55pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/5 "2023-05-12T17:55:08Z")

</div>

My custom draw buttons on the right side:

 ![image](https://clarionhub-uploads.s3.eu-north-1.amazonaws.com/original/2X/4/44d4dd6105df4fde6c9bf2cdbe8e68ddbe437a91.jpeg)

In short, you should override WM\_PAINT.

---

<div class="post-metadata">

**Author:** ![noyantis](https://clarionhub.com/user_avatar/clarionhub.com/noyantis/32/922_2.png) [@noyantis](https://clarionhub.com/u/noyantis)\
**Post date:** [May 13, 2023, 9:22am UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/6 "2023-05-13T09:22:39Z")

</div>

Hi Julian,

If you’re after updating the UI, then feel free to take a look at our range of wrapper templates for the Codejock UI suite of products 👎  
[https://noyantis.com/product-category/codejock/](https://noyantis.com/product-category/codejock/)

We’ll be training on this next week, here are a couple of screenshots of the app we’ll be creating…

 ![image](https://clarionhub-uploads.s3.eu-north-1.amazonaws.com/original/2X/1/171f9edd3b93b2efa8a67981995f1bec0788468f.png)

 ![image](https://clarionhub-uploads.s3.eu-north-1.amazonaws.com/original/2X/2/293c26b1dbf7abc883fbc44402185db6aac0cd2c.png)

Thanks,

Andy  
[noyantis.com](http://noyantis.com)

---

<div class="post-metadata">

**Author:** ![Julian](https://clarionhub.com/letter_avatar_proxy/v4/letter/j/74df32/32.png) [@Julian](https://clarionhub.com/u/Julian)\
**Post date:** [May 13, 2023, 8:10pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/7 "2023-05-13T20:10:32Z")

</div>

Hi Andy,  
Yes, I want to improve my user interface, C10/11 is a bit behind, C12 promises more when it comes but I (not me personally, my apps) need a facelift relatively quickly.  
When you say “Training”, are you referring to ClarionLive?  
Julian

---

<div class="post-metadata">

**Author:** ![noyantis](https://clarionhub.com/user_avatar/clarionhub.com/noyantis/32/922_2.png) [@noyantis](https://clarionhub.com/u/noyantis)\
**Post date:** [May 13, 2023, 9:04pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/8 "2023-05-13T21:04:20Z")

</div>

Hi Julian,

Yes, but if you can’t make that then feel free to join us a week later for our weekly noyantis webinar.

Alternatively, drop me an email and I’ll simply setup an online meeting to take you through the capabilities…

Thanks, Andy

---

<div class="post-metadata">

**Author:** ![Julian](https://clarionhub.com/letter_avatar_proxy/v4/letter/j/74df32/32.png) [@Julian](https://clarionhub.com/u/Julian)\
**Post date:** [May 14, 2023, 12:01pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/9 "2023-05-14T12:01:01Z")

</div>

I turned checkboxes into sliders with a simple class.

Before ..

 ![Before](https://clarionhub-uploads.s3.eu-north-1.amazonaws.com/original/2X/6/6e741a74b6d6253229a65c6504ba778e13ecb51b.jpeg)

After ..

 ![After](https://clarionhub-uploads.s3.eu-north-1.amazonaws.com/original/2X/8/89ff0af19f343ebffdf90e1482dd68e8cac88cba.jpeg)

---

<div class="post-metadata">

**Author:** ![jkuijt](https://clarionhub.com/user_avatar/clarionhub.com/jkuijt/32/6168_2.png) [@jkuijt](https://clarionhub.com/u/jkuijt)\
**Post date:** [May 14, 2023, 5:04pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/10 "2023-05-14T17:04:30Z")

</div>

Looks really nice!

Are you willing to share this class?

Best regards  
Jeffrey

---

<div class="post-metadata">

**Author:** ![Julian](https://clarionhub.com/letter_avatar_proxy/v4/letter/j/74df32/32.png) [@Julian](https://clarionhub.com/u/Julian)\
**Post date:** [May 15, 2023, 8:18am UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/11 "2023-05-15T08:18:42Z")

</div>

Sure, here it is with a demo to see it working.  
Julian.  
[jhSlider.zip](https://clarionhub.com/uploads/short-url/mbEk5Kl8M5LLFmVTS67zi3kYzy1.zip) (476.0 KB)

---

<div class="post-metadata">

**Author:** ![jkuijt](https://clarionhub.com/user_avatar/clarionhub.com/jkuijt/32/6168_2.png) [@jkuijt](https://clarionhub.com/u/jkuijt)\
**Post date:** [May 15, 2023, 8:41am UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/12 "2023-05-15T08:41:51Z")

</div>

Thank you very much Julian!

Best regards  
Jeffrey

---

<div class="post-metadata">

**Author:** ![Julian](https://clarionhub.com/letter_avatar_proxy/v4/letter/j/74df32/32.png) [@Julian](https://clarionhub.com/u/Julian)\
**Post date:** [May 17, 2023, 8:33am UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/13 "2023-05-17T08:33:15Z")

</div>

Some progress, using the same technique employed in jhSlider, I changed this ..

 ![MenuBefore](https://clarionhub-uploads.s3.eu-north-1.amazonaws.com/original/2X/7/7ff9318da587c6c8dc895367c9468fa0e18d8156.jpeg)

to this ..

![MenuAfter](https://clarionhub-uploads.s3.eu-north-1.amazonaws.com/original/2X/3/37cac53b1544b91e16f7844fb86546f641c0640e.gif)

and was able to accommodate a second line of text.

If anybody’s interested, I can post a code sample after I’ve tidied it up ?

---

<div class="post-metadata">

**Author:** ![jkuijt](https://clarionhub.com/user_avatar/clarionhub.com/jkuijt/32/6168_2.png) [@jkuijt](https://clarionhub.com/u/jkuijt)\
**Post date:** [May 17, 2023, 12:58pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/14 "2023-05-17T12:58:44Z")

</div>

Hi Julian,

Looking good!  
An example would be great!

Best regards  
Jeffrey

---

<div class="post-metadata">

**Author:** ![Julian](https://clarionhub.com/letter_avatar_proxy/v4/letter/j/74df32/32.png) [@Julian](https://clarionhub.com/u/Julian)\
**Post date:** [May 18, 2023, 11:34am UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/15 "2023-05-18T11:34:35Z")

</div>

Jeffrey (et al)

Here is my jhVerticalMenu class with an example to see it working, please see the .inc file for information.

Julian  
[jhVerticalMenu.zip](https://clarionhub.com/uploads/short-url/9mwCcDchj3xERyO0j6yfwtnwClO.zip) (461.7 KB)

---

<div class="post-metadata">

**Author:** ![jkuijt](https://clarionhub.com/user_avatar/clarionhub.com/jkuijt/32/6168_2.png) [@jkuijt](https://clarionhub.com/u/jkuijt)\
**Post date:** [May 18, 2023, 1:10pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/16 "2023-05-18T13:10:37Z")

</div>

Great!  
Thank you Julian!

Best regards  
Jeffrey

---

<div class="post-metadata">

**Author:** ![Mike\_Duglas](https://clarionhub.com/user_avatar/clarionhub.com/mike_duglas/32/1061_2.png) [@Mike\_Duglas](https://clarionhub.com/u/Mike_Duglas)\
**Post date:** [May 19, 2023, 9:00pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/17 "2023-05-19T21:00:02Z")

</div>

This approach has some obvious disadvantages.

1. It’s impossible to select (set focus on) the checkbox by keyboard (TAB/ShiftTAB).
2. It’s impossible to check/uncheck by spacebar.
3. It’s impossible to check/uncheck by clicking on a text.
4. Standard functions like ENABLE(feq), DISABLE(feq), HIDE(feq), UNHIDE(feq) aren’t supported, so an existing code would be broken.
5. This snippet is not supported as well and an existing code would be broken.  
checkVar = 1  
DISPLAY(?checkVar)

---

<div class="post-metadata">

**Author:** ![jslarve](https://clarionhub.com/letter_avatar_proxy/v4/letter/j/e480ec/32.png) [@jslarve](https://clarionhub.com/u/jslarve)\
**Post date:** [May 19, 2023, 9:21pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/18 "2023-05-19T21:21:58Z")

</div>

Still looks neat. 🙂

In my picture button class from the 90s, I think I used an ENTRY control outside of the window dimensions so that I’d have something to take focus, then did a DrawFocusRect on the “actual” control. I also alerted a few keys, such as the spacebar. Not exactly elegant, but it solved that problem.

---

<div class="post-metadata">

**Author:** ![anon51095673](https://clarionhub.com/letter_avatar_proxy/v4/letter/a/f9ae1b/32.png) [@anon51095673](https://clarionhub.com/u/anon51095673)\
**Post date:** [May 19, 2023, 11:45pm UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/19 "2023-05-19T23:45:50Z")

</div>

and hopefully clarion 12 addresses some of these nice controls and the universal display technology (any screen?) supports it.. out of the box would be good.

Net Talk of course is a Web Generator and already supports the LOT..

---

<div class="post-metadata">

**Author:** ![Julian](https://clarionhub.com/letter_avatar_proxy/v4/letter/j/74df32/32.png) [@Julian](https://clarionhub.com/u/Julian)\
**Post date:** [May 20, 2023, 7:59am UTC](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239/20 "2023-05-20T07:59:46Z")

</div>

Hi Mike

Thanks for your feedback.

Observing actual users we note that most people tend to prefer mouse over keyboard so we can live without TAB/ShiftTab/Spacebar.

jhSlider does have Enable/Disable and SetValue/GetValue by feq, so your example ..

```auto
checkVar = 1
DISPLAY(?checkVar)

```

is achieved by ..

`slider.setvalue(?checkVar,1)`

[Next page](https://clarionhub.com/t/improving-my-application-interface-replicating-the-windows-update-screen-menu-w10/6239.md?page=2)
