Tips for drawing repetitive static UI in Win10 UWP development 2. win10uwp

Tips for drawing repetitive static UI in Win10 UWP development 2. win10uwp

Tip 1 Address: http://www.cnblogs.com/ms-uap/p/4641419.html

Introduction

In the previous blog, we showed how to use the Shape. Stroke family attributes to achieve static and repetitive UI rendering, making the UWP interface implementation a little more flexible.

However, there are still many limitations in this technique. After all, tossing the StrokeDashArray attribute does not seem so intuitive and applicable (there are still "problems" such as using slice to spoof the audience ).

This blog will introduce you to a more suitable and flexible and powerful repetitive UI rendering technique.

 

ItemsControl. ItemsSource and ItemsControl. ItemTemplate

ItemsControl is a very common control, although it is often used in the form of ListView, ListBox, and other listing classes, it must be frequently used by everyone.

ItemsControl itself provides the most basic "as an object set" function.

Among them, the ItemsControl. ItemsSource and ItemsControl. ItemTemplate attributes are the most important. The former will be granted to the control by specifying the data pre-processed by the policy, and the latter will map the source data to the UI element.

By using them flexibly, you can easily make accurate and fast designs.

 

For example:

<Grid>    <Grid.Resources>        <design:AngleSource x:Key="source"/>    </Grid.Resources>    <Grid HorizontalAlignment="Center" VerticalAlignment="Center"          Width="200" Height="200">        <ItemsControl ItemsSource="{Binding Source={StaticResource source}, Path=Items}">            <ItemsControl.ItemsPanel>                <ItemsPanelTemplate>                    <Grid/>                </ItemsPanelTemplate>            </ItemsControl.ItemsPanel>            <ItemsControl.ItemContainerStyle>                <Style>                    <Setter Property="Control.VerticalAlignment" Value="Stretch"/>                    <Setter Property="Control.HorizontalAlignment" Value="Center"/>                </Style>            </ItemsControl.ItemContainerStyle>            <ItemsControl.ItemTemplate>                <DataTemplate>                    <Grid RenderTransformOrigin="0.5,0.5">                        <Line Stroke="Black" StrokeThickness="10" X1="5" X2="5" Y2="20" />                                                   <Grid.RenderTransform>                            <RotateTransform Angle="{Binding}"/>                        </Grid.RenderTransform>                    </Grid>                </DataTemplate>            </ItemsControl.ItemTemplate>        </ItemsControl>    </Grid></Grid>

Let's take a short look: :) is it a perfect solution for deceiving the audience?

The solution to a small problem sometimes brings new solutions and models. So let's take a look at the role of this piece of XAML?

 

First, AngleSource is a class like this:

public class AngleSource{    public IEnumerable<double> Items    {        get        {            return Enumerable.Range(0, 12).Select(d => d * 30.0);        }    }}

Its function is to provide a series, where the number represents the Rotation Angle of the line segment to be displayed relative to the center of the graph.

This AngleSource class exposes its contained series to the ItemsSource attribute of ItemsControl in the form of static resources:

ItemsSource="{Binding Source={StaticResource source}, Path=Items}"

Then, we use a custom ItemTemplate to convert a simple double value into a rotating image!

In this way, we can use simple code to do what we are best at, that is, to generate source data according to certain policies.

 

PS: if there are only a few simple elements, it is also possible not to use ItemsSource + Binding, as long:

<ItemsControl>    <x:Double>30</x:Double>    <x:Double>60</x:Double>    <x:Double>90</x:Double></ItemsControl>        <ItemsControl>    <local:FooItem Bar="123" Baz="456"/>    <local:FooItem Bar="789" Baz="233"/></ItemsControl>

 

We also use the ItemsControl. ItemsPanel and ItemsControl. ItemContainerStyle attributes to make each line segment rotate at the dial center as the reference point:

1) ItemContainerStyle is a peripheral customization of the Item area (the Item itself is handed over to the ItemTemplate ).

2) The role of ItemsPanel is to define the layout of elements in the control. The default layout is StackPanel, which is a common form of ListBox and ListView.

Common examples include:

<Grid/> <! -- Automatically alignment --> <Canvas/> <! -- Usually absolute positioning, easy to adjust layers, and can be out of range -->

 

The level of the entire ItemsControl is roughly as follows:

 

Similarly, more changes are coming soon:

Here we will make two simple extensions. More combinations are expected to be used flexibly ~

1. Dial with time

<Grid>    <Grid.Resources>        <design:AngleSource x:Key="source"/>        <design:AngleClockConverter x:Key="toClock"/>    </Grid.Resources>    <Grid HorizontalAlignment="Center" VerticalAlignment="Center"          Width="200" Height="200">        <ItemsControl ItemsSource="{Binding Source={StaticResource source}, Path=Items}"                      RenderTransformOrigin="0.5,0.5">            <ItemsControl.ItemsPanel>                <ItemsPanelTemplate>                    <Grid/>                </ItemsPanelTemplate>            </ItemsControl.ItemsPanel>            <ItemsControl.ItemContainerStyle>                <Style>                    <Setter Property="Control.VerticalAlignment" Value="Stretch"/>                    <Setter Property="Control.HorizontalAlignment" Value="Center"/>                </Style>            </ItemsControl.ItemContainerStyle>            <ItemsControl.ItemTemplate>                <DataTemplate>                    <Grid RenderTransformOrigin="0.5,0.5" Width="50">                        <TextBlock Text="{Binding Converter={StaticResource toClock}}"                                   HorizontalAlignment="Center"/>                        <Line Stroke="Black" StrokeThickness="10"                               X1="5" X2="5" Y1="20" Y2="40"                              HorizontalAlignment="Center"/>                        <Grid.RenderTransform>                            <RotateTransform Angle="{Binding}"/>                        </Grid.RenderTransform>                   </Grid>                </DataTemplate>            </ItemsControl.ItemTemplate>        </ItemsControl>    </Grid>
</Grid>

This section of XAML not only draws a line segment of rotation by angle, but also maps the source data through a converter. Is it a bit of a feeling of the linq select?

 

2. Fibonacci Series

<Grid> <Grid. resources> <design: Maid x: Key = "maid"/> </Grid. resources> <ItemsControl Margin = "20" ItemsSource = "{Binding Source = {StaticResource fibonacci}, Path = Items}"> <ItemsControl. itemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ItemsControl. itemsPanel> <ItemsControl. itemContainerStyle> <Style> <Setter Property = "Canvas. left "Value =" {Binding} "/> </Style> </ItemsCon Trol. ItemContainerStyle> <ItemsControl. ItemTemplate> <DataTemplate> <Canvas> <Line Y2 = "30" Stroke = "Black"/> <! -- Because our Left positioning is actually only used for the above Line --> <! -- So how can we make the following numerical display center in Line? --> <! -- Because Canvas allows the rendering of its content to be out of range, we can use the Grid to open up a sufficient space --> <! -- Center TextBlock in the text block --> <Grid Width = "50" Canvas. left = "-25" Canvas. top = "40"> <TextBlock HorizontalAlignment = "Center" Text = "{Binding}"/> </Grid> </Canvas> </DataTemplate> </ItemsControl. itemTemplate> </ItemsControl> </Grid>

 

This section of XAML is also very interesting. The ItemsSource only provides an IEnumerable <int>, that is, the Fibonacci series,

While we control Canvas. Left to draw a series of annotation lines, and their displacement from the Left side is the values of the Fibonacci series!

Maybe it can be used in some mathematical teaching apps ......

 

In addition

The Source class can also expose IEnumerable, which is similar to FoobarItem, so that you can set more and more attributes in FoobarItem,

Then, the ItemsControl. ItemTemplate (DataTemplate) is bound, supplemented by Style and Converter to achieve richer results.

 

What are the benefits of doing so?

These two blog posts introduce two methods to draw a repetitive UI. What is the significance of these methods, or what benefits can we achieve?

 

Decoupling.

Remove these UI settings that are completely unrelated to the program logic from the functional logic. Even if you need to write some code, it is completely unrelated to the functional logic.

It makes code behind fresh and more focused on the implementation of functions, while the UI transformation is still dynamic.

 

Accurate.

Since the UI is generated using XAML and raw data, the attributes, displacement, rotation, and other transformations of the UI elements are completely accurate, eliminating the risk of manual calibration.

In addition, the combination of CacheMode and ViewBox makes the UI clear and non-distorted during adaptation and rendering, taking into account performance.

 

It also provides a new way to control UI elements.

For example, the circular progress bar in the example is implemented. We can update StrokeDashArray in the background code to display the progress.

For example, if we have set the ItemsControl Data Display Policy, we only need to set the data source to easily display it.

 

 

I hope these two blogs will inspire you to learn more about creativity and skills, and help you develop UWP easily !;)