现代操作系统应用开发：UWP——自适应界面Adaptive UI(二)

最新推荐文章于 2022-03-19 10:06:57 发布

qiuxy23

最新推荐文章于 2022-03-19 10:06:57 发布

阅读量548

点赞数 1

分类专栏：现代操作系统应用开发学习笔记文章标签： UWP x现代操作系统应用开发

本文链接：https://blog.csdn.net/qiuxy23/article/details/81217989

版权

功能简介
实现效果
实现过程
总结
- FYI

功能简介

当你看这篇博客的时候，我就假设你已经看过了第一篇博客或者对UWP的自适应界面已经有了一定的了解了；UWP的自适应界面很强大，但是，UWP的自适应界面存在这样的限制，那就是如果你要设置一个控件自适应变换，你就必须给它声明x:Name；
如果我们使用ListView的数据绑定（PS：如果不了解数据绑定，请跳转），那么对于ListView.ItemTemplate里的控件，我们就不能通过声明x:Name绑定到Target上，如下面代码所示

<!-- MainPage.xaml -->
<!-- ItemSource用于指定ListView的数据源，这里的Array为MainPage.xml.cs中MainPage类的一个集合 -->
<ListView Margin="20,20,50,20" ItemsSource="{x:Bind Array}" x:Name="MyList">
    <ListView.ItemTemplate>
        <!-- DataType指定Array中对象的类型，这里的Item为我们自定义的一个类 -->
        <DataTemplate x:DataType="local:Item">
            <!--
                这里的ListView对应的模板为一个Checkbox，一个Grid（用于分隔开CheckBox和TextBlock）
                一个Imag，还有一个文本框
            -->
            <RelativePanel>
                <CheckBox  HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="14" CharacterSpacing="0" Margin="10,10,0,0"></CheckBox>
                <!-- 
                    在宽屏状态下，Space的宽度为90，这时候文本框和Checkbox中间存在的空间正好存放图片
                    在窄屏状态下，Space的宽度为0，此时图片隐藏，Checkbox后紧跟着文本框
                -->
                <Grid Width="90" x:Name="Space"></Grid>
                <Image  HorizontalAlignment="Left" Height="40" Margin="50,10,0,0" VerticalAlignment="Top" Width="40" Source="{x:Bind Source}" x:Name="MyImage"></Image>
                <TextBlock Text="{x:Bind Content}"  RelativePanel.RightOf="Space" VerticalAlignment="Top" HorizontalAlignment=