Customize appbar so that command ring does not appear

Question

Hi,

I want to customize the app bar completely. I donot want command ring to appear.

I have customized win-commandring (following http://64.4.30.156/en-us/library/windows/apps/xaml/hh700497.aspx) as below

.win-commandring {
    color: transparent;    
    border-color: transparent;
    background-color: transparent;
    background-clip:border-box;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-bottom-style:none;
    border-bottom-width:0px;
    border-left-style:none;
    border-left-width:0px;
    border-right-style:none;
    border-right-width:0px;
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-top-style:none;
    border-top-width:0px;
}

Command ring is gone in normal view. But when mouse is up over appbar button, it shows the circle. I am clue less why. 

Please suggest how to remove circle ring completely (even when mouse is over the button)

---

mole on left eye

Answer 1

Hi T,

Look in ui-dark.css and ui-light.css

You will see selectors for hover, disabled etc...

You will also need to override these in your CSS.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Thanks for suggestion. It has solved problem 50%.

I end up overriding following style block.

.win-commandring, 
button:hover .win-commandring,
button:active .win-commandring,
button.win-command:disabled .win-commandring,
button.win-command:disabled:active .win-commandring {
    border-width: 0px;
    border-style: none;
    border-radius: 0%;
}

Now rectangle block is appearing when command button is clicked.

I am struggling in removing the selected rectangle (trying to achieve either of following)

1. Set selected color as transparent (Not able to  find selected color)

2. Set border size -> 0px (not able to find how to set border size)

---

mole on left eye

Answer 3

Hi,

You can use Expression Blend to modify the style. It will display the winning properties. Then you can find which property caused the selected color. It still takes time, but it would be faster than looking into the CSS code directly.

You can get started from http://msdn.microsoft.com/en-us/library/windows/apps/jj129451(v=vs.110).aspx. Please try to learn this tool as it’s very helpful.

Best Regards,

Ming Xu.

---

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact [e-mail].
Microsoft One Code Framework