UWP学习笔记 20-24

20

……这节课的知识点比较碎，可能有些无趣。

20.1 CheckBox

这个控件应该比较常见，比如说，在网页中我们经常可以看到他的身影。说白了，就是这个东西：

我就是CheckBox

基本的XAML代码如下：

<CheckBox  />

添加Tapped事件，设置名字为cb1：

<CheckBox x:Name="cb1" Tapped="CheckBox_Tapped"/>

编辑C#代码：

        private void CheckBox_Tapped(object sender, TappedRoutedEventArgs e)
{
tb1.Text = cb1.IsChecked.ToString();
}

这样，初步实现了文字随CheckBox而动的效果。

---

20.2 RadioButton

据B站弹幕说，这个按钮来源于老式收音机，不过很奇怪啊，单选按钮和收音机有什么关系啊。

他长这样：

等额选举

写XAML的时候要注意，因为是单选，所以，要多设置一个GroupName属性。

<RadioButton x:Name="one" GroupName="list" Content="1"  Checked="one_Checked"/>
<RadioButton x:Name="two" GroupName="list" Content="2" Checked="one_Checked"/>

C#代码：

        private void one_Checked(object sender, RoutedEventArgs e)
{
tb2.Text = (bool)one.IsChecked ? "True" : "False";
}

▲注意了！这是之前讲过的三元运算符！相当于if语句！

---

20.3 Combobox
同样的，我们先来看一看他长啥样：

你最喜欢的星之卡比人物评选：卡比DDD梅塔瓦多迪

这里的C#代码需要好好解释一下了：

        private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (tb3 == null) return;
ComboBox combo = sender as ComboBox; //类型转换，把sender转换为Combobox
//var combo = (ComboBox)sender; ←这是源代码
//var item = (ComboBoxItem)combo.SelectedItem;
ComboBoxItem item = combo.SelectedItem as ComboBoxItem; //同理
tt.Text = item.Content.ToString();
}

原来的代码中的括号我是死活看不懂啊！Bob你在之前可没有教过啊！后来查了好多资料，才知道()里面的是目标变量类型。整个语句的意思是强制变量转换，把sender发送的对象实例化为Combobox，随后，转换SelectedItem为ComboBoxItem，最后显示出来。再简单点说，就是从抽象到实例。

---

20.4 ListBox

（汉堡菜单的重要构成）

图我就不上了，直接来XAML了：

<ListBox x:Name="lb1"  SelectionMode="Multiple" SelectionChanged="lb1_SelectionChanged_2" >
<ListBoxItem Content="001">
</ListBoxItem>
<ListBoxItem Content="002">
</ListBoxItem>
<ListBoxItem Content="003">
</ListBoxItem>
</ListBox>

模式要选择好，有单选的，也有多选的。

绑定事件：lb1_SelectionChanged_2

C#需要运用Linq知识：

        private void lb1_SelectionChanged_2(object sender, SelectionChangedEventArgs e)
{
var selitem = lb1.Items.Cast<ListBoxItem>()
.Where(p => p.IsSelected).Select(t => t.Content.ToString())
.ToArray();
tb4.Text = string.Join(" ",selitem);
}

详见之前发到这里的C#课程。

---

20.5 ToggleButton

这个东西，长的像开关，我们可以用XAML来控制他的显示内容，具体内容不在赘述，这里说一下Bob没讲的的事件：

         private void ts_Toggled(object sender, RoutedEventArgs e)
{
ts.Header = ts.IsOn.ToString();
}

 

 

---

21 简单（qigai）汉堡菜单的实现

先看看效果：

首先，学习了上一节课后，我们仔细观察一下汉堡菜单，相信答案也就会出现了：

顶端是一个按钮，下方是一个SplitView，在SplitView内是一个ListBox。如果看不懂，有一个结构图可以看一看：

、这样一来，结构就非常简单易懂了。下面上XAML代码：

<Page
x:Class="Hambuger.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Hambuger"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>、

//头部
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel>
<Button  Name="H_b" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="H_b_Click" />
//注意：这里的图标可不是什么图片，而是 Segoe MDL2 Assets 这种字体，&#xE700;是Unicode代码，在字符映射表中寻找！应用商店有UWP可以下载。

</RelativePanel>
<SplitView Name="S_v" Grid.Row="1" DisplayMode="CompactOverlay" OpenPaneLength="200" CompactPaneLength="56" HorizontalAlignment="Left">
<SplitView.Pane>
<ListBox  SelectionMode="Single" Name="Icons" SelectionChanged="Icons_SelectionChanged">
<ListBoxItem Name="lb_lock">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72E;"/>
<TextBlock Text="把你锁住=￣ω￣=" FontSize="24" Margin="10,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="lb_share">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE774;"/>
<TextBlock Text="发到网上(p≧w≦q)" FontSize="24" Margin="10,0,0,0" />
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<TextBlock Name="res"></TextBlock>
</SplitView.Content>
</SplitView>
</Grid>
</Page>

C#代码：

private void H_b_Click(object sender, RoutedEventArgs e)
{
S_v.IsPaneOpen = !S_v.IsPaneOpen;
}
private void Icons_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (lb_lock.IsSelected)
{
res.Text = "咔哒！";
}
else if (lb_share.IsSelected)
{
res.Text = "叮！";
}

//不用Linq的实现方法
}

22-23 作业：高级版汉堡菜单实现：

（我美化了Bob的样例）

XAML代码：

<Page
x:Class="Challenge.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Challenge"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<RelativePanel>
<Button Name="b1" Margin="0,-0.667,-5,-0.333" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Foreground="Black" Background="{x:Null}" RelativePanel.AlignVerticalCenterWithPanel="True" Click="Button_Click" BorderThickness="0,0,0,0" Height="32" Width="40" />

//Margin是手调的（逃
<Button  Name="back" RelativePanel.RightOf="b1" Margin="10,4,0,4" FontFamily="Segoe MDL2 Assets" Content="&#xE0C4;" Foreground="Black" Background="{x:Null}" RelativePanel.AlignVerticalCenterWithPanel="True" Click="back_Click" BorderThickness="0,0,0,0"  Visibility="Collapsed"/>
<TextBox  PlaceholderText="戳我搜索" BorderBrush="{x:Null}" RelativePanel.LeftOf="search" Width="175" Text="" BorderThickness="0" />
<Button Name="search" RelativePanel.AlignRightWithPanel="True" FontFamily="Segoe MDL2 Assets" Content="&#xE11A;" Foreground="Black" Background="{x:Null}" BorderThickness="0"  RelativePanel.AlignVerticalCenterWithPanel="True" Height="36" Margin="0,-6.667,0,-6.333"  />
</RelativePanel>
<SplitView Name="svmain" Grid.Row="1" DisplayMode="CompactOverlay" CompactPaneLength="40" OpenPaneLength="152" >
<SplitView.Pane>
<ListBox Name="lb" SelectionChanged="lb_SelectionChanged">
<ListBoxItem Name="box1">
<StackPanel Orientation="Horizontal">
<TextBlock  FontFamily="Segoe MDL2 Assets" Text="&#xE10F;" Padding="0,3,0,0" ></TextBlock>
<TextBlock Margin="20,0,0,0">主页</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="box2">
<StackPanel Orientation="Horizontal">
<TextBlock  FontFamily="Segoe MDL2 Assets" Text="&#xE188;" Padding="0,3,0,0" ></TextBlock>
<TextBlock Margin="20,0,0,0">文件</TextBlock>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<Frame Name="fm"></Frame>
</SplitView.Content>
</SplitView>
</Grid>
</Page>

看，我觉得好看一点了。不知道我这个审美如何？

C#代码主页：

namespace Challenge
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
fm.Navigate(typeof (BlankPage1));
lb.SelectedItem = box1;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
svmain.IsPaneOpen = !svmain.IsPaneOpen;
}
private void lb_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (box1.IsSelected)
{
fm.Navigate(typeof (BlankPage1));
back.Visibility = Visibility.Collapsed;
}
else if (box2.IsSelected)
{
fm.Navigate(typeof(BlankPage2));
back.Visibility = Visibility.Visible;
}
}
private void back_Click(object sender, RoutedEventArgs e)
{
if (fm.CanGoBack)
{
fm.GoBack();
back.Visibility = Visibility.Collapsed;
lb.SelectedItem = box1;
}
}
}
}

空白页面1：

<Image Source="Assets/Financial.png">
</Image>

空白页面2：

<Image Source="Assets/Food.png">
</Image>

这个作业综合运用了19-21课讲的东西，做的我手舞足蹈