你的位置:首页 > 软件开发 > ASP.net > Win10 UWP开发中的重复性静态UI绘制小技巧 2

Win10 UWP开发中的重复性静态UI绘制小技巧 2

发布时间:2015-07-14 12:00:23
小技巧1 地址:http://www.cnblogs.com/ms-uap/p/4641419.html介绍我们在上一篇博文中展示了通过Shape.Stroke族属性实现静态重复性UI绘制,使得UWP界面的实现变得稍微灵活一些了。但这一技巧还是有不少局限的,毕竟折腾StrokeD ...

小技巧1 地址:http://www.cnblogs.com/ms-uap/p/4641419.html

介绍

我们在上一篇博文中展示了通过Shape.Stroke族属性实现静态重复性UI绘制,使得UWP界面的实现变得稍微灵活一些了。

但这一技巧还是有不少局限的,毕竟折腾StrokeDashArray属性看上去并不是那么直观和适用(还存在用扇形欺骗观众这样的“问题”啦)。

这一篇博文我们将为大家介绍一种更为适用,同时也更为灵活和强大的重复性UI绘制技巧。

 

ItemsControl.ItemsSource和

ItemsControl.ItemTemplate组合技

ItemsControl是一个很常见的控件,虽然它经常是以ListView、ListBox等衍生类的形式出现,想必大家也是经常使用它们。

而ItemsControl本身,则提供了最基本的“作为对象集合”的功能。

而其中ItemsControl.ItemsSource和ItemsControl.ItemTemplate两个属性最为重要。前者将通过指定策略预处理的数据赋予控件,后者将源数据映射为UI元素。

灵活运用它们,就能方便的做出精准而又快速的设计。

 

比如:

Win10 UWP开发中的重复性静态UI绘制小技巧 2

<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>

原标题:Win10 UWP开发中的重复性静态UI绘制小技巧 2

关键词:win

win
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。