UWP学习笔记 25-26

25

基本Xaml控件之二

▲大杂烩

这个真的没什么好讲的，我也不想一个个介绍了，就对着Xaml代码讲讲偷懒吧：

<TextBlock Grid.Row="0" Text="TimePicker" VerticalAlignment="Center" />
<TimePicker Grid.Row="0"
Grid.Column="1"
ClockIdentifier="12HourClock"
Margin="20,0,0,20" />
<!--首先要讲的就是这个顶上的TimePicker，Bob说了，这里有一个“有趣的属性”——ClockIdentifier，他可以更改为24/12小时制（其实就是多了个AM/PM）-->
<TextBlock Grid.Row="1"
Text="CalendarPicker"
VerticalAlignment="Center"/>
<CalendarDatePicker
Grid.Row="1"
Grid.Column="1"
Margin="20,0,0,20"
PlaceholderText="choose a date"/>
<!--这个CalendarDatePicker 顾名思义，就是选择日期的。顺便一提，在CalendarIdentifier属性中，有农历可以选择（可是我选的时候崩溃了）-->
<TextBlock Grid.Row="2" Text="CalendarView" VerticalAlignment="Center" />
<StackPanel Grid.Row="2"
Grid.Column="1"
Margin="20,0,0,20"
HorizontalAlignment="Left">
<CalendarView Name="MyCalendarView"
SelectionMode="Multiple"
SelectedDatesChanged="MyCalendarView_SelectedDatesChanged" />
<TextBlock Name="CalendarViewResultTextBlock" />
</StackPanel>
<!--Bob说，这个 CalendarView 相对的，比较“臃肿”一点-->
<TextBlock Grid.Row="3" Text="Flyout" VerticalAlignment="Center" />
<Button Name="MyFlyoutButton"
Margin="20,0,0,20"
Grid.Row="3"
Grid.Column="1"
Content="Flyout">

<!--下面的是Flyout（弹出）事件，这个事件可以用在很多地方的-->
<Button.Flyout>
<Flyout x:Name="MyFlyout">

<!--这是弹出内容了-->
<StackPanel Margin="20,20,20,20">
<TextBlock Text="I just flew out to say I love you." Margin="0,0,0,10" />
<Button Name="InnerFlyoutButton"
HorizontalAlignment="Right"
Content="OK"
Click="InnerFlyoutButton_Click" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>

<TextBlock Grid.Row="4" Text="FlyoutMenu" VerticalAlignment="Center" />
<Button Grid.Row="4"
Margin="20,0,0,20"
Grid.Column="1"
Content="FlyoutMenu">
<Button.Flyout>

<!--同样的，这是菜单弹出-->
<MenuFlyout Placement="Bottom">
<MenuFlyoutItem Text="Item 1" />
<MenuFlyoutItem Text="Item 2" />
<MenuFlyoutSeparator />
<!--横线-->
<MenuFlyoutSubItem Text="Item 3">
<MenuFlyoutItem Text="Item 4" />

<!--这是隶属于子菜单的父级-->
<MenuFlyoutSubItem Text="Item 5">

<!--这是子级的子级-->
<MenuFlyoutItem Text="Item 6" />
<MenuFlyoutItem Text="Item 7" />
</MenuFlyoutSubItem>
</MenuFlyoutSubItem>
<MenuFlyoutSeparator />
<!--横线-->
<ToggleMenuFlyoutItem Text="Item 8" />
</MenuFlyout>
</Button.Flyout>
</Button>
<!-- You can apply this to anything ... ex. Image: -->
<!-- https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn308516.aspx -->

<!--重点来了！TNND，气死我了，前面费那么大劲弄的搜索框啊！-->
<TextBlock Grid.Row="5" Text="AutosuggestBox" VerticalAlignment="Center" />
<AutoSuggestBox Name="MyAutoSuggestBox"
Margin="20,0,0,20"
Grid.Row="5"
Grid.Column="1"
HorizontalAlignment="Left"
QueryIcon="Find"
PlaceholderText="Find Something"
Width="200"
TextChanged="MyAutoSuggestBox_TextChanged"  />
<!--滚动条-->
<TextBlock Text="Slider" Grid.Row="6" VerticalAlignment="Center" />
<Slider Name="MySlider"
Margin="20,0,0,20"
Grid.Row="6"
Grid.Column="1"
HorizontalAlignment="Left"
Maximum="100"
Minimum="0"
Width="200" />

<!--进度条-->
<TextBlock Grid.Row="7" Text="ProgressBar" VerticalAlignment="Center" />
<ProgressBar Name="MyProgressBar"
Margin="20,0,0,20"
Grid.Row="7"
Grid.Column="1"
HorizontalAlignment="Left"
Width="200"
Maximum="100"
Value="{x:Bind MySlider.Value, Mode=OneWay}" /> <!--单向绑定，与Slider绑定，即变动Slider后进度条也变化-->
<!--圆环条-->
<TextBlock Grid.Row="8" Text="Progress Ring" VerticalAlignment="Center" />
<ProgressRing Name="MyProgressRing"
Margin="20,0,0,20"
Grid.Row="8"
Grid.Column="1"
HorizontalAlignment="Left"
Width="50"
Height="50"
IsActive="True" />
</Grid>

C#代码：

private string[] selectionItems = new string[] { "Ferdinand", "Frank", "Frida", "Nigel", "Tag", "Tanya", "Tanner", "Todd" };

//搜索框提示文字
public MainPage()
{
this.InitializeComponent();
}
private void MyCalendarView_SelectedDatesChanged(CalendarView sender, CalendarViewSelectedDatesChangedEventArgs args)
{
var sel = sender.SelectedDates.Select(p => p.Date.Month.ToString() + "/" + p.Day.ToString()).ToArray();

//无需类型转换，因为是特定类型，用Linq查询日期、月份
var val = String.Join(",", sel);
CalendarViewResultTextBlock.Text = val;
}
private void InnerFlyoutButton_Click(object sender, RoutedEventArgs e)
{
MyFlyout.Hide();

//隐藏语句
}
private void MyAutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
var sugbox = (AutoSuggestBox)sender;

//实例化sugbox
var after = selectionItems.Where(p => p.StartsWith(sugbox.Text)).ToArray();

//Linq
sugbox.ItemsSource = after;
}

26

ScrollView

这节课就4分钟，主要是讲滚动条的：

Xaml：

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Source="Assets/Financial.png"  Height="800" Stretch="Fill"/>
</ScrollViewer>

<!--普通的Scrollviewer，左右滚动条自动-->
<!-- Stack panel 会使Scrollviewer无效 -->
<StackPanel Grid.Row="1" Grid.Column="0">
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Image Source="Assets/Financial.png" Height="800" Stretch="None" />
</ScrollViewer>
</StackPanel>
<!-- 但ScrollViewer能包含StackPanel-->
<ScrollViewer
Grid.Row="1"
Grid.Column="1"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<StackPanel>
<Image Source="Assets/Financial.png" Height="800" Stretch="None" />
<Image Source="Assets/Financial.png" Height="800" Stretch="None" />
</StackPanel>
</ScrollViewer>