You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Fix relative paths for images, cross-references, and internal links
in files moved from design/ to develop/motion/ and develop/ui/.
- Fix image paths (../../design/ depth for files in develop/motion/)
- Fix index.md references to point to correct design pages
- Fix navigation and controls cross-references
- Fix storyboarded-animations.md self-referencing develop/ paths
Co-authored-by: Copilot <[email protected]>
Copy file name to clipboardExpand all lines: hub/apps/develop/motion/connected-animation.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,11 +24,11 @@ In a connected animation, an element appears to "continue" between two views dur
24
24
25
25
In this short video, an app uses a connected animation to animate an item image as it "continues" to become part of the header of the next page. The effect helps maintain user context across the transition.
## Connected animation and the Fluent Design System
30
30
31
-
The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Connected animation is a Fluent Design System component that adds motion to your app. To learn more, see [Design for Windows apps](../index.md).
31
+
The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Connected animation is a Fluent Design System component that adds motion to your app. To learn more, see [Design for Windows apps](../../design/index.md).
32
32
33
33
## Why connected animation?
34
34
@@ -44,7 +44,7 @@ Connected animations further embody Fluent design by providing animation configu
44
44
45
45
You specify an animation configuration by setting the Configuration property on the ConnectedAnimation. (We'll show examples of this in the next section.)
46
46
47
-
This table describes the available configurations. For more information about the motion principles applied in these animations, see [Directionality and gravity](index.md).
47
+
This table describes the available configurations. For more information about the motion principles applied in these animations, see [Directionality and gravity](../../design/motion/directionality-and-gravity.md).
A *coordinated animation* is a special type of entrance animation where an element appears along with the connected animation target, animating in tandem with the connected animation element as it moves across the screen. Coordinated animations can add more visual interest to a transition and further draw the user's attention to the context that is shared between the source and destination views. In these images, the caption UI for the item is animating using a coordinated animation.
The page refresh animation is represented by the [**EntranceNavigationTransitionInfo**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.entrancenavigationtransitioninfo) class.
34
34
@@ -47,7 +47,7 @@ Use drill when users navigate deeper into an app, such as displaying more inform
47
47
48
48
The desired feeling is that the user has gone deeper into the app.
The drill animation is represented by the [**DrillInNavigationTransitionInfo**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.drillinnavigationtransitioninfo) class.
53
53
@@ -58,7 +58,7 @@ myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());
58
58
59
59
## Horizontal slide
60
60
61
-
Use horizontal slide to show that sibling pages appear next to each other. The [NavigationView](../controls/navigationview.md) control automatically uses this animation for top nav, but if you are building your own horizontal navigation experience, then you can implement horizontal slide with SlideNavigationTransitionInfo.
61
+
Use horizontal slide to show that sibling pages appear next to each other. The [NavigationView](../ui/controls/navigationview.md) control automatically uses this animation for top nav, but if you are building your own horizontal navigation experience, then you can implement horizontal slide with SlideNavigationTransitionInfo.
62
62
63
63
The desired feeling is that the user is navigating between pages that are next to each other.
64
64
@@ -89,5 +89,5 @@ This can be useful when you modify navigation behavior dynamically based on scre
89
89
90
90
## Related topics
91
91
92
-
-[Navigate between two pages](../basics/navigate-between-two-pages.md)
93
-
-[Motion in Windows](index.md)
92
+
-[Navigate between two pages](../ui/navigation/navigate-between-two-pages.md)
93
+
-[Motion in Windows](../../design/signature-experiences/motion.md)
Copy file name to clipboardExpand all lines: hub/apps/develop/motion/parallax.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,13 +24,13 @@ Parallax is a visual effect where items closer to the viewer move faster than it
24
24
25
25
## Parallax and the Fluent Design System
26
26
27
-
The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Parallax is a Fluent Design System component that adds motion, depth, and scale to your app. To learn more, see the [Fluent Design overview](../index.md).
27
+
The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Parallax is a Fluent Design System component that adds motion, depth, and scale to your app. To learn more, see the [Fluent Design overview](../../design/index.md).
28
28
29
29
## How it works in a user interface
30
30
31
31
In a UI, you can create a parallax effect by moving different objects at different rates when the UI scrolls or pans. To demonstrate, let's look at two layers of content, a list and a background image. The list is placed on top of the background image which already gives the illusion that the list might be closer to the viewer. Now, to achieve the parallax effect, we want the object closest to us to travel "faster" than the object that is farther away. As the user scrolls the interface, the list moves at a faster rate than the background image, which creates the illusion of depth.
32
32
33
-
33
+
34
34
35
35
## Using the ParallaxView control to create a parallax effect
Copy file name to clipboardExpand all lines: hub/apps/develop/motion/storyboarded-animations.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -202,7 +202,7 @@ This next example shows how the previous example [**Storyboard**](/windows/windo
202
202
</Page>
203
203
```
204
204
205
-
Defining resources at the XAML root of a XAML file such as page.xaml or app.xaml is a common practice for how to organize keyed resources in your XAML. You also can factor resources into separate files and merge them into apps or pages. For more info, see [ResourceDictionary and XAML resource references](../../develop/platform/xaml/xaml-resource-dictionary.md).
205
+
Defining resources at the XAML root of a XAML file such as page.xaml or app.xaml is a common practice for how to organize keyed resources in your XAML. You also can factor resources into separate files and merge them into apps or pages. For more info, see [ResourceDictionary and XAML resource references](../platform/xaml/xaml-resource-dictionary.md).
206
206
207
207
> [!NOTE]
208
208
> Windows Runtime XAML supports identifying resources either using the [x:Key attribute](/windows/apps/develop/platform/xaml/x-key-attribute) or the [x:Name attribute](/windows/apps/develop/platform/xaml/x-name-attribute). Using x:Name attribute is more common for a [**Storyboard**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Media.Animation.Storyboard), because you'll want to reference it by variable name eventually, so that you can call its [**Begin**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.storyboard.begin) method and run the animations. If you do use [x:Key attribute](/windows/apps/develop/platform/xaml/x-key-attribute), you'll need to use [**ResourceDictionary**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.ResourceDictionary) methods such as the [**Item**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.resourcedictionary) indexer to retrieve it as a keyed resource and then cast the retrieved object to **Storyboard** to use the **Storyboard** methods.
@@ -321,6 +321,6 @@ In general, creating storyboarded animations in a Windows Runtime app is like WP
Copy file name to clipboardExpand all lines: hub/apps/develop/motion/xaml-animation.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ Animations can enhance your app by adding movement and interactivity. By using t
15
15
16
16
Animations from the Windows Runtime animation library provide these benefits:
17
17
18
-
- Motions that align to the [Guidelines for animations](./index.md)
18
+
- Motions that align to the [Guidelines for animations](../../design/signature-experiences/motion.md)
19
19
- Fast, fluid transitions between UI states that inform but do not distract the user
20
20
- Visual behavior that indicates transitions within an app to the user
21
21
@@ -200,7 +200,7 @@ The child rectangles of the [**Grid**](/windows/windows-app-sdk/api/winrt/micros
200
200
201
201
Here's a demonstration of this animation:
202
202
203
-
203
+
204
204
205
205
Child objects of a container can also re-flow when one or more of those children change position. In the following example, we apply a [**RepositionThemeTransition**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Media.Animation.RepositionThemeTransition) to a grid of rectangles. When you remove one of the rectangles, all the other rectangles re-flow into their new position.
-[**Height**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.height) and [**Width**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.width) specify the size of an element. The default values are mathematically `NaN` (Not A Number). You can set fixed values measured in [effective pixels](screen-sizes-and-breakpoints-for-responsive-design.md#effective-pixels-and-scale-factor), or you can use **Auto** or [proportional sizing](layout-panels.md#grid) for fluid behavior.
20
+
-[**Height**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.height) and [**Width**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.width) specify the size of an element. The default values are mathematically `NaN` (Not A Number). You can set fixed values measured in [effective pixels](../../design/layout/screen-sizes-and-breakpoints-for-responsive-design.md#effective-pixels-and-scale-factor), or you can use **Auto** or [proportional sizing](layout-panels.md#grid) for fluid behavior.
21
21
22
22
-[**ActualHeight**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.actualheight) and [**ActualWidth**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.actualwidth) are read-only properties that provide the size of an element at runtime. If fluid layouts grow or shrink, then the values change in a [**SizeChanged**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.sizechanged) event. Note that a [**RenderTransform**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.rendertransform) will not change the ActualHeight and ActualWidth values.
23
23
@@ -29,7 +29,7 @@ Proper sizing ensures all content is clear and legible. Users shouldn’t have t
29
29
30
30
Alignment makes your UI look neat, organized, and balanced and can also be used to establish visual hierarchy and relationships.
-[**HorizontalAlignment**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.horizontalalignment) and [**VerticalAlignment**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.verticalalignment) specify how an element should be positioned within its parent container.
35
35
@@ -38,13 +38,13 @@ Alignment makes your UI look neat, organized, and balanced and can also be used
38
38
-**Stretch** is the default for both properties, and elements fill all of the space they're provided in the parent container. Real-number Height and Width cancel a Stretch value, which will instead act as a Center value. Some controls, like Button, override the default Stretch value in their default style.
39
39
-[**HorizontalContentAlignment**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.control.horizontalcontentalignment) and [**VerticalContentAlignment**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.control.verticalcontentalignment) specify how child elements are positioned within a container.
40
40
- Alignment can affect clipping within a layout panel. For example, with `HorizontalAlignment="Left"`, the right side of the element gets clipped if the content is larger than the ActualWidth.
41
-
- Text elements use the [**TextAlignment**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.textalignment) property. Generally, we recommend using left-alignment, the default value. For more information about styling text, see [Typography](../style/typography.md).
41
+
- Text elements use the [**TextAlignment**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.textalignment) property. Generally, we recommend using left-alignment, the default value. For more information about styling text, see [Typography](../../design/signature-experiences/typography.md).
42
42
43
43
## Margin and padding
44
44
45
45
Margin and padding properties keep UI from looking too cluttered or too sparse, and they can also make it easier to use certain inputs like pen and touch. Here's an illustration displaying margins and padding for a container and its content.
46
46
47
-
47
+
48
48
49
49
### Margin
50
50
@@ -72,7 +72,7 @@ In each of these cases, elements also have a Margin property. If both Margin and
72
72
73
73
Let's look at the effects of Margin and Padding on real controls. Here’s a TextBox inside of a Grid with the default Margin and Padding values of 0.
74
74
75
-
75
+
76
76
77
77
Here’s the same TextBox and Grid with Margin and Padding values on the TextBox as shown in this XAML.
78
78
@@ -82,19 +82,19 @@ Here’s the same TextBox and Grid with Margin and Padding values on the TextBox
82
82
</Grid>
83
83
```
84
84
85
-
85
+
86
86
87
87
## Style resources
88
88
89
89
You don't have to set each property value individually on a control. It's typically more efficient to group property values into a [**Style**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.style) resource and apply the Style to a control. This is especially true when you need to apply the same property values to many controls. For more info about using styles, see [XAML styles](../../develop/platform/xaml/xaml-styles.md).
90
90
91
91
## General recommendations
92
92
93
-
- Only apply measurement values to certain key elements and use fluid layout behavior for the other elements. This provides for [responsive UI](responsive-design.md) when the window width changes.
94
-
- If you do use measurement values, **all dimensions, margins, and padding should be in increments of 4 epx**. When XAML uses [effective pixels and scaling](screen-sizes-and-breakpoints-for-responsive-design.md) to make your app legible on all devices and screen sizes, it scales UI elements by multiples of 4. Using values in increments of 4 results in the best rendering by aligning with whole pixels.
93
+
- Only apply measurement values to certain key elements and use fluid layout behavior for the other elements. This provides for [responsive UI](../../design/layout/responsive-design.md) when the window width changes.
94
+
- If you do use measurement values, **all dimensions, margins, and padding should be in increments of 4 epx**. When XAML uses [effective pixels and scaling](../../design/layout/screen-sizes-and-breakpoints-for-responsive-design.md) to make your app legible on all devices and screen sizes, it scales UI elements by multiples of 4. Using values in increments of 4 results in the best rendering by aligning with whole pixels.
95
95
- For small window widths (less than 640 pixels), we recommend 12 epx gutters, and for larger window widths, we recommend 24 epx gutters.
0 commit comments