Skip to content

Commit b75b0f1

Browse files
louiebertloberton
andauthored
Adding docs example of using styleKey (#243)
* Added example of using styleKey * Added one more indent fix --------- Co-authored-by: Louie Bertoncin 🥏 <loberton@microsoft.com>
1 parent 9ffa62e commit b75b0f1

File tree

1 file changed

+24
-11
lines changed

1 file changed

+24
-11
lines changed

USAGE.md

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ Note that only react-native-xaml components will respect the `gridRow`/`gridColu
152152
## NavigationView
153153

154154
```jsx
155-
const [text, setText] = React.useState('initial text');
155+
const [text, setText] = React.useState('initial text');
156156

157157
<WinUI.NavigationView width={700} height={700}>
158158
<WinUI.NavigationViewItem content='Item 1' onTapped={() => setText('text #1')} priority={NavigationViewPriority.MenuItem}>
@@ -224,7 +224,7 @@ const [showState, setShowState] = useState(ContentDialogState.Hidden);
224224
## SplitView
225225

226226
```jsx
227-
const [isOpen, setIsOpen] = useState(false);
227+
const [isOpen, setIsOpen] = useState(false);
228228
// ...
229229
<SplitView
230230
isPaneOpen={isOpen}
@@ -249,13 +249,13 @@ const [showState, setShowState] = useState(ContentDialogState.Hidden);
249249
</SplitView>
250250

251251

252-
<Button
253-
foreground="#992222"
254-
onTapped={a => {
255-
setIsOpen(!isOpen);
256-
}}
257-
content="button"
258-
/>
252+
<Button
253+
foreground="#992222"
254+
onTapped={a => {
255+
setIsOpen(!isOpen);
256+
}}
257+
content="button"
258+
/>
259259
```
260260

261261
## Path & vector graphics
@@ -273,12 +273,25 @@ const [showState, setShowState] = useState(ContentDialogState.Hidden);
273273

274274
## Lightweight styling
275275

276+
Using `resources` to style specific aspects of a control
276277
```jsx
277-
<Button content="Hello with style!" resources={{
278+
<Button
279+
content="Hello with style!"
280+
resources={{
278281
ButtonForeground: "#00fff1",
279282
ButtonForegroundPressed: "#2090ff",
280-
}} />
283+
}}
284+
/>
285+
```
286+
287+
Alternatively, use `styleKey` to leverage system theme styles.
288+
```jsx
289+
<Button
290+
content="Hello with accent style!"
291+
styleKey="AccentButtonStyle"
292+
/>
281293
```
294+
> Note: `"AccentButtonStyle"` used in this example [is defined here](https://github.com/microsoft/microsoft-ui-xaml/blob/9052972906c8a0a1b6cb5d5c61b27d6d27cd7f11/dev/CommonStyles/Button_themeresources.xaml#L239). Controls will have their supported `styleKey`s defined in associated *_themeresources.xaml files like the one linked.
282295
283296
## Event args
284297

0 commit comments

Comments
 (0)