C#小白项目-WindowsDream
这是一个非常有趣的小项目。如果你是微软（Microsoft）的粉丝，那么这个小项目一定会让你眼前一亮，它模仿了Windows 10的“设置”，虽然不是百分百模仿，但是相似度极高。它没有使用MVVM模式，也没有使用更高技巧的C＃语言，它所使用的C＃语言代码非常的简单基础。
首先我们打开vs2019，创建一个应用“空白应用（通用 Windows）”，项目名称可以根据的喜好进行命名，一切准备就绪后进入开发界面。
我们双击“MainPage.xaml”进入XAML页面，如果你的应用要适配手机端，那么你可以直接在页面的左上端选择5*Phone 。
根据Windows 10内置的“设置”来看，“设置”使用了屏幕自适应设计模式，当屏幕尺寸进行大小变化时，应用内部的显示方式也随之发生了变化。
这是我在GitHub上传的项目，它就模仿了Windows 10内置的“设置”界面。下图是它的XAML界面。
在<ScrollViewer>···</ScrollViewer>里面有<StackPanel>···</StackPanel>,在<StackPanel>···</StackPanel>里又有两个小的<StackPanel>···</StackPanel>，他们的名字分别是left和right，left对应的是5*Phone显示界面，right对应的是大尺寸的显示界面。
下面请看具体的实现代码：
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="left.Orientation" Value="Vertical"></Setter>
<Setter Target="right.Visibility" Value="Collapsed"></Setter>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"></AdaptiveTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="left.Visibility" Value="Collapsed"></Setter>
<Setter Target="right.Orientation" Value="Vertical"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel>
<StackPanel x:Name="left" >
<TextBlock Text="设置" Margin="10"></TextBlock>
<!--输入框-->
<StackPanel>
<AutoSuggestBox Width="360" Margin="0 0 0 30" QueryIcon="Find" PlaceholderText="查找设置" ></AutoSuggestBox>
</StackPanel>
<ListView Name="listView" Margin="0 10 0 10">
<ListView.ItemTemplate>
<DataTemplate >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="{Binding IconUri}" MaxHeight="80" Stretch="Fill"></Image>
<StackPanel VerticalAlignment="Center" Margin="3 0 0 0" Grid.Column="1">
<TextBlock Text="{Binding Name}" Margin="0,0,0,2" TextWrapping="WrapWholeWords" TextTrimming="Clip" ></TextBlock>
<TextBlock Text="{Binding Describe}" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" TextWrapping="WrapWholeWords" TextTrimming="Clip" ></TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
<StackPanel x:Name="right">
<TextBlock Text="设置" Margin="10"></TextBlock>
<TextBlock Text="Windows设置" HorizontalAlignment="Center" FontSize="25" Margin="30" ></TextBlock>
<!--输入框-->
<StackPanel>
<AutoSuggestBox Width="450" Margin="0 0 0 30" QueryIcon="Find" PlaceholderText="查找设置" ></AutoSuggestBox>
</StackPanel>
<GridView Name="gridView" HorizontalAlignment="Center" SelectionMode="None" IsItemClickEnabled="True">
<GridView.ItemTemplate >
<DataTemplate >
<StackPanel Orientation="Horizontal" Width="350" Height="60">
<Image Source="{Binding IconUri}" Width="50" Height="50"></Image>
<StackPanel Height="55" VerticalAlignment="Center" Margin="5 0 0 0">
<TextBlock Text="{Binding Name}" Width="176" Margin="0,0,0,2" TextWrapping="WrapWholeWords" TextTrimming="Clip" ></TextBlock>
<TextBlock Text="{Binding Describe}" Width="176" Height="48" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" TextWrapping="WrapWholeWords" TextTrimming="Clip" ></TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Grid>