Viewbox application in uwp development and viewboxuwp Development

Viewbox application in uwp development and viewboxuwp Development

Windows 8.1 and Windows Phone 8.1 UAP applications are finally unified under UWP on Windows 10. The original three different projects also become one. Without two sets of xaml pages, we need to use the same page to adapt to all devices. What's more troublesome is that on the Desktop device, we can drag the size of our application window at will. This puts forward higher requirements for our UI layout. Of course, we also have new tools to deal:

StateTriggers is added to VisualState to Trigger triggers based on different conditions and automatically switch to the corresponding VisualState. You can also add a Trigger that defines the Trigger conditions.

The RelativePanel control is added to allow the elements to adapt to different device and window sizes using the relative location layout.

On the other hand, Microsoft also released some guiding suggestions, such as Responsive design 101 for Universal Windows Platform (UWP) apps and UI basics for Universal Windows Platform (UWP) apps, plan your Universal Windows Platform (UWP) app and other articles. This is also very enlightening to us.

However, none of these mentioned the processing of window size dragging. Let's share some of our thoughts on this situation in the process of trying to develop UWP applications.

Overall Layout

In general, our application uses the layout of Figure 1 and figure 2 in UI basics for Universal Windows Platform (UWP) apps with the top and bottom columns always displayed, in the middle is the content display area.

If the UAP design is followed, we may design a fixed height for the top and bottom columns so that the content area in the middle can change with the screen size. However, in UWP, our application window can change freely between 500X320 and full screen. If the fixed height is still used, the content area will be squeezed by the top and bottom columns when the window becomes smaller, which is not what we want. Therefore, we adopt a proportional allocation strategy in the global layout:

<Grid. RowDefinitions>

<RowDefinition x: Name = "rd_1" Height = "*"> </RowDefinition>

<RowDefinition x: Name = "rd_2" Height = "8 *"> </RowDefinition>

<RowDefinition Height = "60 *"> </RowDefinition>

<RowDefinition x: Name = "rd_4" Height = "8 *"> </RowDefinition>

<RowDefinition x: Name = "rd_5" Height = "*"> </RowDefinition>

</Grid. RowDefinitions>

In this way, both the window size and the device size can be considered.

But this brings about a new problem: most of the text and images in the top and bottom columns are fixed. How can we make them automatically adapt with the screen and device? It is acceptable to use the new StateTriggers, but it is troublesome to specify the new sizes of each fixed-size control in different visualstates. In addition, our layout has not changed much and it is not necessary to use StateTriggers. So here we think of the Viewbox control. Viewbox is a container that can scale the content to its own size. We put Viewbox In the proportionally divided Grid, and then put the top and bottom columns in the Viewbox, so that they can maintain a unified proportion in different window sizes and devices:

<Viewbox x: Name = "vbNav" Grid. Row = "1" HorizontalAlignment = "Left" Visibility = "Visible">

<Grid Margin = "50, 0">

<Image Source = "{StaticResource mainPageMenuLeftImg}" Stretch = "Uniform" HorizontalAlignment = "Left" Height = "160"

Margin = "-20, 0, 100" verticalignment = "Center" Canvas. ZIndex = ""> </Image>

<ListView x: Name = "lvNav" SelectionMode = "Single" Height = "160" Canvas. ZIndex = "99"

SelectionChanged = "lvNav_SelectionChanged" HorizontalAlignment = "Left"

VerticalAlignment = "Center" ScrollViewer. HorizontalScrollMode = "Enabled"

Background = "# FFF6EBA1" ItemContainerStyle = "{StaticResource ContextControlItemContainerStyle}">

<ListView. ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel Orientation = "Horizontal" Margin = "0" verticalignment = "Center"> </VirtualizingStackPanel>

</ItemsPanelTemplate>

</ListView. ItemsPanel>

</ListView>

<Image Source = "{StaticResource mainPageMenuRightImg}" Stretch = "Uniform" HorizontalAlignment = "Right" Height = "160"

Margin = "100,-20, 0" verticalignment = "Center" Canvas. ZIndex = ""> </Image>

</Grid>

</Viewbox>

Here, the image and listview are fixed in size. After viewbox is used, the image and listview can always occupy only a certain proportion of the screen, instead of exceeding the Grid on the small screen, and appear relatively small on the large screen.

Content Layout

There are two types of page content: content list and editing and preview.

For the content list, we use the resize policy in Responsive design 101 for Universal Windows Platform (UWP) apps.

It is mainly a horizontally scrolling GridView, which displays 3 or 4 rows of content when the screen is high enough, and 2 rows if the screen is small. However, this small case actually covers a relatively large range. If you still use a fixed-size list element control, you will encounter a problem similar to that of the top and bottom columns. So we use viewbox again: place a Grid in the content area in the outermost layer, and then place the viewbox containing the GridView in it. In response to the sizechange event of the Grid on the outermost layer, change the length-width ratio of the GridView to adapt to the display area.

Xaml:

<Grid x: Name = "grid_content" SizeChanged = "gridRoot_SizeChanged" Grid. Row = "2">

<Viewbox>

<GridView x: Name = "gv_Content" ItemContainerStyle = "{StaticResource contentTemplateStyle }"

SelectionMode = "Single" IsSynchronizedWithCurrentItem = "{x: Null }"

SelectionChanged = "gvContent_SelectionChanged" IsItemClickEnabled = "True"

VerticalAlignment = "Stretch" HorizontalAlignment = "Stretch"

Width = "630"

Height = "774"

ScrollViewer. HorizontalScrollMode = "Enabled" ScrollViewer. HorizontalScrollBarVisibility = "Visible"

Margin = "20">

<GridView. ItemsPanel>

<ItemsPanelTemplate>

<WrapGrid Orientation = "Vertical" Margin = "0" MaximumRowsOrColumns = "4" VerticalAlignment = "Top"> </WrapGrid>

</ItemsPanelTemplate>

</GridView. ItemsPanel>

</GridView>

</Viewbox>

</Grid>

CS:

Private void gridRoot_SizeChanged (object sender, SizeChangedEventArgs e)

{

Try

{

Grid thisGrid = sender as Grid;

If (thisGrid. ActualHeight> = 480 & thisGrid. ActualHeight <= 720)

{

This. gv_Content.Height = 784*1.5; // change the height and put three list elements.

}

Else if (thisGrid. ActualHeight> 720)

{

This. gv_Content.Height = 784*2; // change the height and put four list elements.

}

Else

{

This. gv_Content.Height = 784; // change the height and put two list elements.

}

This. gv_Content.Width = thisGrid. ActualWidth/(thisGrid. ActualHeight) * this. gv_Content.Height; // adjust the width to adapt to the display area ratio.

}

Catch (Exception ex)

{

Debug. WriteLine (ex. Source + "\ r \ n" + ex. Message + "\ r \ n" + ex. StackTrace );

}

}

For the editing and preview interfaces, we hide the preview interface when the screen width is small, so that the interface can be switched between editing and preview.

Summary

The above is part of our experience with the new features of UWP in UI layout. We hope to attract more partners to UWP development.